study

참고자료: poiemaweb.com/es6-block-scope let, const | PoiemaWeb ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 poiemaweb.com 1. 함수 레벨 스코프(Function-level scope): var - 코드블록 안에서 정의하든 밖에서 정의하든 무조건 전역변수로 선언됨 - 보통 변수 개념인 선 정의 후 사용이 아닌 선 사용 후 정의가 가능함 2. 블록 레벨 스코프(Block-level scope): const, let - 자바등 대부분의 프로그래밍 언어에서 사용되는 변수 정의 방법 - 특정 코드 블록 안에서..

const girl = { look : "good", //속성:값 key:value heart : "nice", food : function() { alert("먹는속도 빠름"); } }; 객체를 이렇게 간단하게 표현하는게 JSON임, 데이터 전달할때 훨신 간편해짐 웹에서는 배열로 바꿔서 보내고 받을떈 다시 JSON으로 바꿔서 받음 JSON(객체) -> 배열 : JSON.stringify(객체명) 배열 -> JSON(객체) : JSON.parse(배열명)

alert("윈도우 화면 크기: "+window.screen.width +" x "+ screen.height); 위에걸로 윈도우 화면 크기 가져올 수 있음 그 후 (윈도우 화면가로-사진가로)/2 (윈도우 화면세로-사진세로)/2 하면 화면 정 가운데 출력할수있음

html에서 css 파일 임포트 하기 html에서 js 파일 임포트 하기

자식 노드 추가하는 방법: - html에 있는 태그를 변경하는 것이 아닌 html에 없는 태그 추가하기 const 변수명 = document.createElement("태그명"); -> createElement로 먼저 태그 생성 변수명.setAttribute("속성명", 값); -> .setAttribute("class", "myClass"); 하면 클래스 추가됨 부모노드.appendChild("변수명"); -> 부모노드에 방금 생성한 자식 노드 추가 ex) function append() { const image = document.createElement("img"); //태그 생성 image.setAttribute("src","img/ball.jpg"); //src 속성 추가 image.setAtt..

기본은 객체.속성=값 ex) document.getElementById("id명").src="경로명"; 이러면 해당 태그의 src 속성이 변경됨 객체를 변수에 저장한 후 변수를 변경해도 됨 - css 속성은 "-" 이 기호를 빼고 카멜표기법으로 사용 bodyid.style.backgroundColor="black"; (원래는 background-color: black;) - 문자 넣기 .innerHTML .outerHTML inner outter 차이는 해당 아이디가 있는 태그 포함 or 미포함면태그 포함 or 미포함 비공식이지만 html이 아닌 문자열 삽입하는 방법 .innerText .outerText

1) html 에서의 script 태그 위치 - 웬만하면 자바스크립트 내용은 .js 파일로 빼서 사용하는 것이 이상적, 하지만 꼭 html 안에 넣어야 할때는 바디 태그 밑에 위치하게 하기 스크립트태그가 바디 태그보다 위에 있으면 자바스크립트는 인터프리터 언어라 스크립트 문장이 실행될때 바디테그가 생성이 안되어있어서 값을 가져올 수 없을 수도 있음 2) DOM으로 html을 가져올때는 객체 자체를 가져와야됨 - 이때 객체가 아닌 객체 안에 속성을 가져오면 수정한다고 변경되지 않음, 변수에 객체를 담은다음 객체를 변경해야됨

DOM으로 html 태그에 접근하는 두가지 방법 1) document.getElementBy... document.getElementById("id명"); //객체로 받아옴 document.getElementsByClassName("class명"); //HTMLCollection 으로 받아옴 document.getElementsByName("name명"); //NodeList 로 받아옴 document.getElementsByTagName("태그명"); //HTMLCollection 으로 받아옴 //Array.from("변수명") 사용하면 HTMLCollection로 받아온 값을 배열로 바꿀 수 있음 2) document.querySelector.. document.querySelector("#id명")..

함수 1,2,3 형식 1형식: 매개변수 X return X 2형식: 매개변수 O return X 3형식: 매개변수 O return O for 반복문 // 1. for문 for (let i = 0; i < array.length; i++) { } // 2. for in 문 (iterator 형식) for (const iterable_element in iterable) { } // iterable_element는 배열일 경우 인덱스(숫자), 객체일 경우 key 값 // ex) const myCar = { color:"red", door:4, price:30000 }; for (const tmp in myCar) { document.write(`${tmp} : ${myCar[tmp]} `); } - for ..

1) 배열 생성 var arr = []; let arr = [1,2,3]; const arr = ["a", "b", "c"]; 2) 정렬 // 1. 문자 정렬 arr.sort(); // 2. 숫자 정렬 arr.sort(function(a, b) { return a - b; }); //오름차순 정렬, compare 함수로 정렬 기준을 줘야됨 // 3. 객체 정렬 obj.sort(function(a,b) { return a.name b.name ? 1 : 0; }); //똑같이 compare 함수로 기준을 줘야됨 3) 값 추가 - arr[0] = 1; //직접 추가 - push(); //배열의 맨끝에 추가 4) 값 삭제 - shift(); //배열의 첫번째 삭제 ..