노드 생성, 추가 함수 설명 createElement() 요소를 생성 createTextNode() //몰라도됨 innerHTML로 대체 텍스트를 생성 appendChild() 요소를 부모 자식 관계로 넣어줌 innerHTML= 요소를 html방식으로 생성 insertBefore(삽입노드 , 기준노드) 기준노드 앞에 삽입노드 추가 버튼을 누르면 아래 태그 생성 링크가 나옴 태그 생성 버튼을 누르면 위에 check box 생성 태그 생성 할 일을 입력하고 추가버튼을 누르면 아래에 입력한 할 일을 추가 > To Do List 추가 버튼을 누르면 기존 10개 리스트에서 아래 리스트가 추가됨 추가 1개 버튼을 누르면 1개의 행 추가, 5개 버튼 누르면 5개의 행 추가 중앙유치원 * 수업 내용 작성하기 + 5개 ..

1. 노드의 css속성을 바꿀 떄는 style속성을 이용합니다. 2. css 속성은 카멜 표기법을 따릅니다. (하이픈이 제거되고 카멜표기법) ex) text-aligin = textAlign 태그를 얻어와 style속성으로 접근한다. 3. 노드의 style에 전달되는 값은 문자열로 작성합니다. 규칙 노드.style.css속성 = "값" 예제 1) li의 배경색 변경 목록1 목록2 목록3 css속성변경하기 퀴즈1 ) 옵션의 value 값에 따라 이미지 변경 / color 값에 따라 border 색상 변경 select 안에 option의 value 값을 얻으려면 select.value change 이벤트로 한번에 변경하기 봄 여름 가을 겨울 퀴즈2 ) 아이디와 비밀번호의 조건 충족 focus : input에..

자바스크립트의 두번째 강력한 기능 BOM (Browser Object Model) 브라우저상의 동작 브라우저 객체 모델이라 하며, 자바스크립트 안에 들어있는 내장 함수들을 의미합니다. window(생략가능), location, history, document등이 포함됩니다. DOM (Document Object Model) 태그 핸들링 문서 객체 모델이라 하며, document객체를 의미합니다. (화면을 핸들링하는 객체) 화면에 있는 태그를 선택하고 삭제 생성등을 위해 사용합니다. ! BOM 안에 DOM 이 있음 - 모던 javascript 튜토리얼 이미지 찾아 넣기 https://ko.javascript.info/ document.으로 시작! 다양한 방법으로 태그를 선택할 수 있다. Element( 태..

1 ) 함수에서의 this 는 window라는 최상위 객체를 가리킨다. //함수에서의 this -> window라는 최상위 객체를 가리킴 var a = 1; //전역변수 a는 window에 선언됨 function aaa(){ var a = 10; //지역변수 console.log(a); //지역변수 접근 10 console.log(this); //window console.log(this.a); //전역변수에 접근 1 } aaa(); 2 ) 이벤트에서의 this 는 태그 자신을 가리킵니다. //이벤트에서의 this -> 태그 자신 var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ console.log(th..

* 이벤트란? - 이벤트 : 사용자의 동작 - 핸들러 : 이벤트가 일어났을 때 제어해주는 함수 화면에서 클릭이나, 동작시 발생하는 동적인 기능입니다. 자바스크립트의 첫번째 강력한 기능이며, 사용방법만 암기하면 충분합니다. 태그와 스크립트의 이벤트를 연결한다. 그 방식에는 (1)인라인 이벤트 모델, (2)기본 이벤트 모델, (3)표준 이벤트 모델이 있으며 이벤트 앞에 on을 붙입니다. * 이벤트 종류 이벤트 앞에 on을 붙입니다. ex) onclick, onload, onfocus click 마우스를 클릭했을 때 이벤트 발생 dbclick 마우스를 더블클릭했을 때 이벤트 발생 mouseover 마우스를 오버했을 때 이벤트 발생 mouseout 마우스를 아웃했을 때 이벤트 발생 mousedown 마우스를 눌..

다른 서버와 데이터를 주고받는 일을 할 수 있다. 네트워크는 json을 모른다. 데이터는 주고 받을 때 자바스크립트 객체 형태로 주고 받을 수 없고 문자열 형태로 주고 받을 수 있다. ( json형식을 띄고 있는 ) 문자열의 형태로 형변환해서 데이터를 보내주어야한다. 문자열 타입이 넘어오는(받아오는) 데이터는 객체 타입으로 다시 형변환해서 받아야한다. 데이터 타입을 문자열로 형변환 하는 함수 JSON.stringify(data); 문자열을 제이슨으로 형변환 하는 함수 단, 이 경우는 엄격한 형식을 지킨다. (키,값이 전부 " "로 묶여야한다.) JSON.parse(문자열); var data = [ {id:'aaa123', title:'aaa',content:'a...'}, {id:'aaa123', tit..

json은 객체의 표기법이지 객체는 아니다 객체는 { } (중괄호)로 표기합니다. 키 : 값 map과 동일한 방법으로 사용된다. //객체의 표현{} var person = {name : 'hong', age:20, info:[1,2,3]}; console.log(person); //객체의 접근방법이 2개 입니다. //list -> .으로 접근 console.log(person.name); //hong console.log(person.age); //20 console.log(person.info);//[1,2,3] //2nd -> 이름[키] console.log(person['name']); //hong console.log(person['age']); //20 console.log(person['inf..

Lexical scoping (렉시칼 스코프) : 함수가 선언된 위치에 따라서 사용할 수 있는 값(참조될 수 있는 값)이 달라진다. 함수의 선언 위치에 따라서 상위 스코프를 결정하게 된다. 나랑 가까운 b전역변수를 참조하게 된다. //렉시칼 스코프 - 함수의 선언 위치에 따라서 상위 스코프를 결정하게 된다. var a = 1; function x(){ a = 10; console.log(a); //10 } x(); var b = 1; function y(){ var b = 10; z(); } function z(){ console.log(b); } y(); //1 클로저 내부함수를 이용해서 외부함수(a)의 변수의 접근할 수 있는 환경을 만들어준다. function func1(){ var a = 1; //..