1. let과 const 1) let 변수는 중복 선언이 불가능하다. 2) let 변수의 유효범위는 {} 블록이다. //let변수는 같은 블록에서 내에서 중복이 불가능하다. let y = 1; // let y = 100; //에러 //let변수의 유효범위는 {}블록이다 let z = 10; if(true) { let z = 100; console.log(z); //100 } console.log(z); //10 const GENDER = "남자"; // var GENDER = "여자"; //에러 // GENDER = "여자"; //에러 const arr = ["홍길동", "이순신", "홍길자"]; // arr = ["김철수"]; //에러 arr[0] = "김철수"; //내부의 값 변경은 허용 arr.pu..

1. day62-js 카카오 로그인 - google에서 js 쿼리 스트링 값 가져오기 검색 * 예제 - 카카오 로그인 연결 결과 페이지 로그인 창으로 * 카카오, 네이버 등 다른 api 활용해서 가져와보는 연습 해볼 것

1. 자바스크립트 비동기 AJAX - AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다. 일반적인 경우 데이터 처리는 요청 순서대로 진행하지만 AJAX는 순차적으로 진행하지 않습니다. 이런 방식을 비동기 방식 이라고 합니다. 자바스크립트의 비동기 방식은 상당히 까다로운데, 이를 간단히 사용할 수 있게 해주는 최신 자바스크립트 API인 fetch API를 이용하도록 하겠습니다. - API가 뭔가요? (application programming interface) 우리 기능을 사용 할려면 너는 x1, x2, x3, x4, x5 .... x100을 처리해야해 하지만 너무 어렵고 많은 것을 해야 하잖아? 그럼 우리가 사용 방법을 ..

1. day60-js 이어서 bom 1) location 객체 - 자바스크립트 페이지 이동: location.href = 주소; - 자바스크립트 새로고침: location.reload() * 예제(location 객체) 네이버 이동하기 2) history객체 - history.go(-1); : 기록 이동 - history.back(); : 뒤로가기 - history.replaceState(저장 할 데이터 , 바꿀제목 , 바뀐주소 ); : 새로운 기록 추가(현재의 기록을 지운다거나, 앞에 null값을 변경 하는 데이터 조정을 통해 뒤로 가기 확인이 가능함) - history.state : 페이지 데이터 - history.pushState: 브라우저에 기록을 추가하는 것 여기서 pushState와 repla..

* 실습 1 - 메뉴를 선택할 때마다 밑에 div가 메뉴 이름으로 나오고 애니메이션 추가해줌. 메뉴1 메뉴2 메뉴3 토글메뉴1 토글메뉴2 토글메뉴3 1. DOM - DOM은 문서 객체 모델이라 하며, document객체를 의미합니다. - DOM은 요소(element)의 선택, 삭제 생성 등을 위해 사용합니다. - DOM객체를 이용한 요소의 접근은 자바스크립트의 강력한 기능이며 반드시 외워야 하는 기능입니다. 1) form 객체 - form객체는 document 객체의 하위 객체 중 하나 입니다. - form을 이용하면 form 유효성 검사 등을 할 수 있습니다. - form객체는 document의 하위 객체이므로 유일하게 name속성으로 선택이 가능합니다 ex) document.폼명.요소명 * 예제(fo..

1. 노드의 속성 추가 및 제거 - getAttribute(): 요소의 속성 취득 - setAttribute(): 요소의 속성 저장 - removeAttribute(): 요소의 속성 제거 2. 이벤트 객체(정말 중요함) - 이벤트 발생시 실행되는 함수의 (인자값) 으로 현재 실행되는 event객체를 넣어주게 되어 있다. - stopPropagation(): 이벤트 전파를 막는다. (버블링 중단하기) - target: 이벤트를 적용한 타겟 속성 - currentTarget: 실제 이벤트가 걸려있는 타겟 속성 - preventDefault(): 고유특성을 가진 태그의 이벤트를 제거 * 예제(다중 이벤트, 이벤트 전파) 여러 이벤트를 한번에 걸어주기 1.홍길동 2.홍길자 3.이순신 4.강감찬 5.둘리 선택한 ..

1. 부모 노드, 자식 노드 선택 - children: 모든 자식 노드 선택 - parentElement: 부모노드 선택 - nextElementSibling: 다음 형제 노드 선택 - previousElementSibling: 이전 형제 노드 선택 - firstChild: 첫번째 자식 노드 선택 - lastChild: 마지막 자식 노드 선택 * 예제 이동 번호 이름 내용 날짜 ↓↑ 1 홍길자 안녕! 2019-01-01 ↓↑ 2 이순신 반가워 2019-02-01 ↓↑ 3 이순신 반가워 2019-02-01 ↓↑ 4 이순신 반가워 2019-02-01 ↓ ↑ 5 이순신 반가워 2019-02-01 2. 노드 삭제 - 요소를 생성하는 방법입니다. - remove(): 노드 삭제 - removeChild(삭제 할 ..

* css제어 - 문제 1~2 1번 2번 3번 4번 5번 6번 7번 8번 9번 클릭 JS 카운트 만들기 - this, innerHTML, value 속성을 사용하면 됩니다. 증가 감소 1. 노드 css 변경하기 - 노드의 css속성을 바꿀 때는 style속성을 이용합니다 - css의 속성은 카멜표기법을 따릅니다. - 노드의 style에 전달되는 값은 문자열로 작성합니다 * 규칙 노드.style.css속성 = 값 * css 제어 - 문제 3, 답안 봄 여름 가을 겨울 이미지 바꾸기 색상 변경하기 봄 여름 가을 겨울 이미지 바꾸기 색상 변경하기 * css 제어 - 문제 4, 답안 onfocus - input에 focus가 들어갈 때(마우스가 포커싱을 줄 때) 그 때 동작합니다, onblur(input에 fo..