하루 하루

하루입니다. JSON(JavaScript Object Notation) - 자바스크립트 객체 표기법을 활용한 경량의 데이터 교환형식이다. - 사람이 읽고 쓰기 쉽다. (읽고 쓰기 쉽게 데이터를 작성하는 방법임.) - 기계(프로그램)가 분석하고 생성하기 쉽다. - 프로그램 언어에 완전히 독립적이다. - 이상적인 데이터-교환 형식이다. - 거의 대부분의 프로그램 언어에서 실행 가능하다. JSON 표기법으로 작성된 텍스트 데이터 JSON Object 구조 key:value의 쌍들의 비순서화된 집합이다. {} {string:value} {string:value, string:value, string:value} 작성예 자바스크립트 let text ='{"no":100, "name":"홍길동", "salary":..

하루입니다. 자바스크립트에서는 기본자료형과 객체가 있다. 기본자료형 string, number, boolean, null, undefined 프로퍼티와 메소드를 갖지 못한다. 객체 기본자료형의 제외한 거의 모든 것들이 객체다. 배열, 함수, 정규표현식, 날짜 등이 전부 객체다. 프로퍼티와 메소드를 가질 수 있다. 함수와 메소드의 차이는 다음과 같다. 메소드는 함수의 한 종류다. 함수가 특정 객체에 소속되어 있을 때 메소드라고 부른다. string, number, boolean은 객체가 될 수 있다. -> (????!) 객체는 맵과 유사하다. key:value의 쌍으로 프로퍼티나 메소드를 담고 있다. key는 문자열, value는 기본자료형, 배열, 객체, 함수 모두 가능하다. 객체 생성하기 1. 객체 리..

하루입니다. Date 객체와 날짜 ko.javascript.info 참고할 분들 참고하세용 Date 객체 날짜와 시간정보를 표현하는 객체다. 시스템의 현재 날짜와 시간정보 표현하기 let now = new Date(); 결과 : Tue May 24 2022 16:49:04 GMT+0900 (한국 표준시) 1970년 1월 1일 0시0분0초부터 현재시간까지를 1/1000초 단위로 나타내기 let unixTime = now.getTime(); 결과 : 1653378544585 년월일시분초 찍기 console.log("년: " + now.getFullYear()); console.log("월: " + now.getMonth()); console.log("일: " + now.getDate()); console.l..

하루입니다. 마우스 이벤트 onmousenter : 엘리먼트 위로 마우스가 움직일 때 onmouseleave : 엘리먼트 밖으로 마우스가 움직일 때 onmouseover : 엘리먼트 위로 마우스가 움직일 때 onmouseout : 엘리먼트 밖으로 마우스가 움직일 때 onclick : 엘리먼트를 클릭했을 때 onmousemove :엘리먼트 위에서 마우스가 움직일 때 박스1을 들어가고, 박스2를 들어가고, 박스2를 나가고, 박스1을 나갔다. 박스 1을 들어가고, 박스 4에 들어감과 동시에 박스3에서는 나가고, 박스 4에서 나감과 동시에 박스 3으로 들어가고, 박스 3을 나간다. 키보드 이벤트 KeyboardEvent객체의 주요 API 프로퍼티 key 지금 입력한 문자를 제공한다. 문자키 : A single ..

하루입니다. 브라우저의 이벤트 기본동작 막기 브라우저의 대표적인 기본동작 링크를 클릭하면 (onclick이벤트가 발생하면) 해당 URL로 페이지를 이동시킨다. 폼 전송버튼(submit 버튼)을 클릭하면 (onsubmit 이벤트가 발생하면) 웹서버로 폼입력값을 제출한다. function fn(e) { e.preventDefault(); } 이 작업을 우리는 보통 [ (브라우저 없이) 자바스크립트를 이용한 서버와의 데이터 교환하기 ] 라고 한다. 1. 링크의 URL 정보 획득 2. 웹서버에 URL에 해당하는 데이터 요청 3. 데이터를 응답으로 받아서 HTML 컨텐츠 생성 4. 화면 이동이나 새로고침 없이 화면의 특정 영역에 3에서 생성한 HTML 컨텐츠 반영 5. 사용자는 화면의 이동이나 새로고침 없이 새 ..

하루입니다. 이벤트 모델. 그래픽 유저 인터페이스 환경에서 사용자와 상호작용하는 것. 이벤트 소스와, 이벤트와, 이벤트리스너(이벤트핸들러). 우리가 주로 다루는 건 이벤트 발생시 수행 작업이 들어간 함수인 이벤트리스너이다. 이벤트 핸들러의 함수 선호 방식 버튼을 누르면 '안녕' alert가 뜨는 이벤트를 만든다. 원래라면 을 만들고, 실행될 함수를 만들어야 한다. 하지만 이벤트핸들러는 종속성이 강해 타 이벤트에서 사용하기 힘들다. 그렇다면 굳이 함수에 이름까지 붙여가며 만들어야 할까? 버튼4 버튼5 let btn4 = document.getElementById("btn-4"); btn4.onclick = function() { alert("버튼4이 클릭되었습니다."); } let btn5 = docume..

하루입니다. 자바와의 차이점 접근제한자가 없다. 반환타입을 지정할 필요가 없다. 매개변수의 타입을 지정할 필요가 없다. 함수 중복정의가 소용이 없다. 이름있는함수, 이름없는함수 이름있는 함수 정의하기 function fn1() { console.log("이름있는 함수가 실행됨"); } 실행 함수명(); 이름없는 함수 정의하기 : 변수에 담아야 한다. let fn2 = function () { console.log("이름없는 함수가 실행됨"); } 실행 변수명(); 위 식에서 fn2가 실행되지 못한 이유. function은 스크립트 구문 분석할 때 window에 담긴다. 선언 위치 상관 없이 실행 가능하다는 뜻. fn2는 변수이고, 일단 function()이 실행돼야 fn2에 값이 담기게 된다. 실행을 정..

하루입니다. 주요 API : 체크박스/라디오버튼의 체크상태 변경하기 체크박스/라디오버튼의 체크상태 조회하기 let 변수 = element.checked; * 변수에는 true 혹은 false값이 대입된다. 체크박스/라디오버튼을 체크상태로 변경하기 element.checked = true; 체크박스/라디오버튼을 체크해제 상태로 변경하기 element.checked = false; HTML 문서의 체크박스 중에서 체크된 체크박스만 선택하기 let 변수 = document.querySelectorAll("선택자:checked"); * 변수에는 체크박스 중에서 체크된 체크박스를 표현하는 모든 엘리먼트 객체가 저장된 배열유사객체(NodeList나 HTMLCollection)가 반환된다. 엘리먼트의 속성 조작하기 ..