
[JS] DOM API
2022. 1. 31. 05:38
개발이야기/JS
DOM API란? -> 여기서 DOM은 Document Obhect Model 의 약어로 document는 html에 들어있는 여러가지 오브젝트 모델을 말하는데, 오브젝트모델은 대표적은 div요소 span요소 input요소등이 있다. API는 application programming interface로 어떤 어플리케이션이나 웹사이트가 동작하기위해 입력하는 프로그래밍 명령이라고 생각하면 쉽다. *자바스크립트에서 html을 제어하는 여러가지 명령들*이라고 생각하면된다. box!!! 이러한 코드를 작성했을때, main.js 파일에 적성하면 콘솔창에 null이라는 값이 뜨게 된다. let boxEl = document.querySelector('.box) console.log(boxEl) 브라우저는 코드를 위..

[JS] 조건문 (if, else)
2022. 1. 31. 05:33
개발이야기/JS
조건의 결과에 따라 다른 코드를 실행하는 구문 (if, else) if 라는 키워드 다음 소괄호 사이에다가 어떠한 조건을 추가할 수 있는데, 여기서 조건은 isshow, isshow는 true이기때문에 콘솔창에는 show라는 메세지가 뜨게된다. 위에 동일하게 checked 라는 조건을 넣고 checked는 false 값으로 거짓이다. 그럼 ckecked안에 false를 넣어보면, 조건에 부합하지않는 거짓이기때문에 중괄호 사이에 내용은 실행이 안된다. 콘솔창에는 아무것도 뜨지않음. 결국, 조건문이라는것은 조건을 작성하는 소괄호 사이에다가 거짓과 참을 구분하는 블린데이터 를 넣어보고 참이라는 값이 들어있으면 조건을 실행하고, 거짓이 들어있으면 조건을 실행하지않는다. let isShow = true; let ..

[JS] 함수 (function)
2022. 1. 31. 04:41
개발이야기/JS
함수 (function) -> 특정 동작(기능)을 수행하는 일부 코드의 집합이다. 헬로펑크라는 함수를 선언하고 소괄호()-중괄호{} 사이에 명령들이 들어가 있다. 명령은 콘솔창에다가 어떤 로그(기록)를 남기는데 그 데이터가 1234라는 데이터를 남기겠다. 라는 한줄의 명령이 들어있는 것. function helloFunc() { console.log(1234); } helloFunc(); //1234 함수는 명령을 감싸고 있는 하나의 집합! 함수안에서 어떠한건 반환할수 있는데 그때 return을 사용한다. 펑션 키워드를 통해서 리턴펑크라는 이름을 만들었고, 그 안에는 리턴 키워드로 숫자 데이터 123를 반환하도록 만들었다. 이렇게 반환한 숫자 데이터 123을 let이라는 키워드를 사용하는 a라는 변수가 ..

[JS] 변수 (let, const)
2022. 1. 31. 03:41
개발이야기/JS
데이터를 저장하고 참조(사용)하는 데이터의 이름 let //재사용이 가능! //변수를 선언할 땐 let이라는 키워드를 이용해서 원하는 이름을 명시한다. let a = 2; let b = 5; console.log(a + b); //7 console.log(a - b); //-3 console.log(a * b); //10 console.log(a / b); //0.4 let a = 12; //let으로 변수를 선언함. console.log(a); //12 a = 999; //새로운 값으로 변수의 데이터를 재할당함. console.log(a); //999 const const a= 12; console.log(a); //12 //콘스트로 선언한 a 변수는 let과 다르게 재할당이 불가능하다. //보통 대부..

[JS] 데이터 종류 (자료형)
2022. 1. 31. 02:44
개발이야기/JS
js 자료형 데이터 String: "", '', `` Number Boolean: true, false Undefined Null Object: {} Array: [] 자바스크립트 자료형은 모두 '객체' 로 이루어져있다. 원시 타입 : String: "", '', `` Number Boolean: true, false Undefined Null Symbol 비 원시 타입: Object: {} Array: [] Function String (문자 데이터) -> 따옴표를 사용한다. let myName = "seo0"; //큰따옴표 let email = 'seo0@naver.com'; //작은따옴표 let hello = `Hello ${myName}?!!` //백틱 // 양쪽에 '백틱'이라는 기호를 통해서 문..