JavaScript

addListener() 함수 현재 방식 사용법 변수명 = document.querySelector("선택자") 변수명.addListener("event",function(){실행문;}); 옛날방식 이벤트들 onchange : HTML요소가 변경되었 을때 onclick : HTML 요소가 클릭되었을때 onmouseover : HTML요소의 위에 사용자가 커서를 올릴때 onmouseout : HTML요소의 위에 사용자가 커서를 치울때 onkeydown : 사용자가 키보드를 눌렀을때 onload : 브라우저가 로딩을 끝마쳤을때 등 event의 중요 속성 중 하나 = target event.target = 호출한 태그가 선택됨

querySelector() DOM(html태그)에 접근하는 함수 하나의 태그에 접근하는 함수 querySelectorAll() DOM(html태그)에 접근하는 함수 여러개의 태그에 접근하는 함수 예시 1) 변수에 저장 => let elements = document.querySelectorAll("ul li")

DOM Document Object Model Document 웹브라우저 DOM은 트리 구조로 되어있다 DOM 시각화 예시) html 웹 문서 동작 1) 컴퓨터 웹브라우저에 html 문서를 읽어들임(파싱 : 문법 해석) 2) 파싱된 문서(DOM) => 메모리에 저장(DOM 저장됨) 노드(Node) html 문서의 특징 태그(tag) 속성 (attribute) 텍스트(text) 주석(comment) 를 통칭하여 노드(Node)라고 한다. 태그 , 속성 , 텍스트 , 주석별로 구분하여 트리구조로 메모리에 저장됨 querySelector() DOM(html태그) 접근하는(선택하는) 함수 사용법 document.querySelector("선택자") : html 선택자 선택 태그 : 속성(style등) , 상세속..

NULL null 자료형 변수는 있으나 공간이 비어있는 것 (js, 자바 , c/c++등에서 사용) 보통 옛날에는 초기화 할때 사용했었다. 현재는 null 초기화는 권장하지 않는다 (버그가 많이 발생한다.) 옛날 let char1 = null 현재 let char = " "; let num = 0; Undefined 자료형 객체의 속성명이 정의되지 않은 상태(것) JS에서만 있음

사용자 정의 함수 void형식과 return 형식 둘다 가능하다 사용법 function 함수명(매개변수) { 실행문; } 함수 호출 함수명(인수); 객체 실생활에서 보이는 모든 것 사용법 자료형 변수명 = { 속성1 = 값1, 속성2 = 값2, ... } 객체속성 출력 객체변수명.속성;

자료형 배열 자료형 : 문자열(string), 숫자(number) , 참/거짓(boolean, bool) (한마디로 모든지 다 들어갈 수 있다...) 배열 : 여러가지 값을 저장하는 장소 , 변수명은 동일하게 사용 , 인덱스번호를 사용 예시 1) let str 또는 const str = "boy" "boy"는 각각 boy[0] = 'b' boy[1] = 'o' boy[2] = 'y' 배열로 구분 되어 있다 (나는 매우 놀랐었다.. 나만 그런가) 예시 2) let a = [1,2,3.....]; console.log(a[1]) = 2가 출력 예시 3) let 또는 const 변수명 = new Array(배열 갯수); ※ java처럼 타입이 정해진것이 아닌 모든 타입들을 넣을 수가 있다... 거기다 모든 것..

조건문 if / else if ... / else 예제 ) 3항 연산자 let 변수명 = (조건문)? 실행1:실행2; switch switch(조건변수) {case 값 : 실행문... default : 실행문} 반복문 반복문 예약어 break(중단 예약어) continue(계속 예약어) for for(초기값;조건식;증감식) {반복문(문장)} 예제) 안녕하세요를 100번 출력하세요. while while(조건문) {실행문} do~while do{실행문} while(조건문); 특징 : 조건식이 거짓이라도 1번은 실행한다.

사칙연산자 + (덧셈) , - (뺄셈) , * (곱셈) , / (나눗셈) , % (나머지) 덧셈 예제 ) 뺄셈 곱셈 나눗셈 나머지도 이와 동일합니다. ※ JavaScript에서는 java에서 나눗셈을 할때는 나오지 않던 실수(소수점)도 같이 나오게 됩니다. 다만 정확한 것이 아닌 유사한 숫자가 나옵니다. 비교 연산자 >= , ,

① 문자열(String) ● " " 또는 ' ' 둘중 아무거나 사용해도 상관없습니다. 예시) ② 숫자형(number) ● 말 그래도 숫자요 ㅎ.. 예시 ) ③ 변수 (let) ● 변하는 수를 의미합니다. ● 따라서 값을 수정하는 것이 가능합니다. ● ' let 변수명 = 값 ' 을 많이 사용합니다. ● 변수를 사용하여 출력하는 것을 소프트 코딩(soft coding) 이라고 합니다. 소프트 코딩(soft coding) // 추천 방식 (위의 자료) vs 하드코딩 (hard coding) // 추천드리지 않습니다. ④ 상수 (const) ● 변하지 않는 수를 의미합니다. ● 따라서 값을 수정할 수 없습니다. ※ 주의 만약 상수를 수정하게 된다면 에러(Error)가 뜹니다. 식별자 ● 변수명 , 상수명 , ..

Visual Studio Code를 사용했습니다. 일단 script를 활용해 html과 js를 연결 시켜준다 화면 출력 방법 예시 1) ● alert("Hello Javascript"); 예시 2) ● console.log("Hello Javascript"); 결과 ※ 검사창의 console에서 확인이 가능하다. 들어가기에 앞서.. 제 기준으로 적는 것이기에 잘못 적을 수도 있습니다. 배우면서 끄적이기에.. java와 비교하면서 적을 것 같습니다아