간단한 AJAX 코드비동기 자바스크립트와 XML이라는 뜻으로 자바스크립트를 통해 서버에 비동기로 요청하는 것XML이 붙었지만, JSON을 사용해도 무관(현재는 JSON 사용하여 통신하는 경우가 많음)클라이언트 코드HTML 페이지 내에 XHR을 사용하여 서버로 AJAX 요청하는 코드 AJAX resources/static 폴더에 추가된 ajaxStudy.html onReadyStateChange()라는 함수 선언ajaxRequest.readyState가 DONE or 4가 되면 true, 아니면 false 에러로그 찍음 XHR 객체는 UNSENT -> OPENED -> HEADERS_RECEIVED -> LOADING -> DONE의 순서로 총 4번의 변화UNSENT : 0 : XHR 객..
프로그래밍언어/JavaScript
JSON 표기 방법Javascript에서 Object(객체)를 Notation(표기)하는 방법기본형태{ "name":"김땡땡". "age":30, "isAlive":true, "address":{ "city":"Seoul", "postCode":"12345" }, "family":["dad","mom"] "children":[], "spouse":null}[ { "name":"이가네". "age":20 }, { "name":"박가네". "age":30 }]중괄호로 시작해서 중괄호로 끝남"key":value 처럼 하나의 쌍으로 데이터를 표기각 데이터의 쌍은 쉼표로 구분key는 큰따옴표 필수, value은 값의 타입에 따라 큰따옴표로 감싸거나 감싸지 않음배열의 형태로 시작할 수 있..
window객체창에 대한 전반적인 모든 상황을 제어하는 최상위 객체로 widow객체에서 파생 된 다른 객체를 이용해 대부분의 작업을 처리한다. 매우 다양한 메서드와 속성을 제공하는데 alert(), confirm(), prompt()도 window 객체에 포함 된 메서드다. 원칙적으로 window.메서드() 처럼 window를 붙여서 사용해야 하지만 생략해도 무방하다.메서드설명open()새로운 윈도우를 엶close()열린 창을 닫음setInterval()일정 시간 간격으로 반복적으로 함수 호출. 함수 수행 중지는 clearInterval() 사용setTimeout()일정 시간 후 지정함수를 수행. 함수 수행 중지는 clearTimeout() 사용alert()경고창 표시confirm()확인창 표시promp..
DOM(Document Object Model) 브라우저가 HTML 문서에 접근 할 수 있도록 정의 해 놓은 표준 모델. 태그를 객체로 만든 것을 문서 객체라고 하고, HTML 문서를 분석하고 표시하는 방식을 문서 객체 모델이라고 한다. 계층적인 구조를 갖는 트리로 표현된다. DOM에서 자바스크립트를 이용하면 프로그램 실행 중 웹 문서의 내용, 구조 및 스타일 등에 쉽게 접근하고 동적인 작업을 할 수 있다. 문서 제목 HTML DOM DOM 트리 document노드 : DOM트리의 루트 노트로 HTML문서 자체를 나타낸다. 요소(element)노드 : 등 요소들 텍스트 노드 : 문서제목, HTML DOM, DOM 트리 등 요소 안에 있는 텍스트들 속성(attribute)노드 : class 등 요소의 속성..
대화상자 사용자에게 간단한 메시지를 보여 주거나 확인 요청 또는 외부 입력을 받기 위해서 함수들을 사용한다. alert("주의, 경고시 사용하는 대화상자 보여주는 함수"); prompt("사용자에게 알려주는 구문","입력하지않을시저장할기본값"); confirm("동의를 구하는 메세지"); 알림 창 : alert("주의, 경고 메시지 내용") alert("메시지") 확인 창 : confirm("동의 메시지 내용") 반환값 = confirm("메시지 확인") 입력 창 : prompt("알림","미입력시 기본 값") 반환값 = prompt("설명",기본값)
이벤트(event)이벤트(event)"마우스 버튼을 클릭하는 경우", "키보드를 누르는 경우" 등 어떤 특정한 사건이나 동작을 의미. 이벤트 핸들러(event handler)이벤트가 발생 할 때 마다 적당한 처리가 이루어지기 위해 이벤트 핸들러가 필요하다. 이벤트에 대응하는 처리 내용을 이벤트 핸들러로 작성하고 등록하면 이벤트가 발생 시 자동으로 등록 된 이벤트 핸들러가 수행된다.이벤트 이름 앞에 on을 붙여 표기하며, HTML 태그의 한 속성으로 사용된다.형식 : 사용 방법 : 주야간모드 선택 버튼 만들기 1. 제어 할 태그 선택 : JS코드(이벤트 핸들러)에서 CSS선택자를 이용해서 제어 할 선택자 선택.document.querySelector('선택자');'javascript select ..
특징브라우저에서 실행이 되는 언어로 html문서와 같이 사용한다. 문법에 맞게 내용을 작성하면 컴파일해서 2진수로 변환된다. 메모리에 로딩을 후 변역해서 컴퓨터가 실행한다.(화면에 결과를 보여준다.) 소스파일을 메모리에 바로 올려서 실행해서 화면에 에러표시가 안된다. 순차문으로 써진 순서대로 실행이 된다. 함수형 언어이다. 플랫폼(운영체제)에 상관없이 다 실행이 된다. 따로 파일로 만들어서 불러올 수 있다. 문법변수 형식) var 변수명 = 저장할값; => 함수안에서 사용. 재할당 가능. 재선언 가능 형식) let 변수명 = 저장할 값; => ES6 이상. 블록안에서만 사용, 재할당 가능, 재선언 불가능 형식) const 변수명 = 저장할 값; => ES6 이상. 상수변수로. 변하지 않을 값을 변수로 ..
JS코드의 재사용코드의 중복의 제거가 필요한 이유웹페이지에 JS코드를 다른 페이지들에도 하나하나 복사하고 수정하려면 오래걸린다. 웹페이지마다 중복 된 태그를 지우는게 효율적이다.코드 재사용 하는 법 - 파일정리정돈의 도구들인 함수, 객체 보다 더 큰 정리정돈의 도구인 파일.서로 연관된 코드들을 파일로 묶어서 그룹핑하는 것.1. 파일명.js파일 만들어서 중복된 JS 코드 붙여 넣기. 이때 JS태그인 3. 주고가 담긴 script태그를 원하는 html파일마다 넣어준다. 파일로 만들어서 JS코드 사용하는게 편한 이유html 코드창의 깔끔해져 가독성이 올라간다.js코드 수정시 한 번만 수정하면 전체페이지에 적용되어 유지보수가 편해진다.새로운 웹페이지에도 이미 만들어 놓은 js코드를 재사용하기 쉽다.html파일..
객체(Object) 자바스크립트는 객체 기반의 언어이다. 함수와 변수가 많아지면서 코드가 복잡해지면 서로 연관된 함수나, 변수등을 관련된 것끼리 모아서 정리정돈하는 수단으로 어떤 데이터든 담을 수 있는 변수와 함수를 그룹화 한 것이다. 객체 안에 속해있는 함수를 메소드라고 부른다. 메소 배열 : 정보를 담는 그릇. 정보가 순서대로 저장된다. 객체 : 순서 상관 없이 정보가 저장된다. 순서는 없지만 이름을 붙여 이름으로 불러올 수 있게 저장한다. 객체 = 속성(객체의 특성으로 논리적으로 연관 된 데이터 모임) + 메서드(규칙/방법) 스마트폰이라는 객체에 이름:iSmart, 색상:블랙, 크기:5.5"같은 속성과, 전화걸기:iSmart.call(), 문자보내기:iSmart.text() 같은 메서드를 더해서..
함수(Function)함수공통으로 자주 사용되는 이런 유사한 코드들을 묶어서 이름을 붙이고, 필요시 이름을 불러서 사용하는 기능다른 언어와 달리 함수선언이 함수호출 보다 밑에 있어도 한 파일 안에 있으면 호출 가능 => 호이스팅(끌어올리다는 뜻)중첩함수 사용 가능 함수선언function 함수명(매개변수(들)){ 문장(들) [return 반환값;]} 함수호출함수명(인자);function greeting(name) { console.log(`${name} hi`); function result(){ //중첩함수 가능 console.log("complete"); } return result(); //리턴만나면 해당 함수 종료}greeting("luna");get..
