js

자바스크립트(JavaScript) : 페이지에서 발생한 이벤트에 대해 페이지를 조작하기 위한 기능을 제공하는 스크립트 프로그래밍 언어 - 클라이언트에서 해석되어 실행 특징1.자바스크립트의 주석문은 자바와 동일 특징2.자바스크립트는 한 줄에 작성된 코드

리터럴(Literal) : 프로그램 언어에서 값을 표현하는 방법

자바스크립트의 변수 > 특징: ES6ECMAScript6 - JavaScript 문법 규약)에서 추가된 변수 > 종류와 특징

JavaScript의 연산자

자바스크립트 형변환의 특징자동 형변환 - ✔연산자에 의해 값의 자료형이 자동으로 변환강제 형변환 - 자료형 관련 ✔함수에 의해 값의 자료형을 강제로 변환NaN(Not a Number) : 숫자값으로 형변환할 수 없는 경우 제공되는 상수

제어문 : 명령을 처리하는 흐름(스레드)을 변경하는 구문 선택문 : if, switch 반복문 : for, while 기타 : break, continue prompt(message[,value]) : 입력창을 제공하여 값을 입력받아 문자값으로 반환하는 함수 isNaN

자바스크립트 함수 > 함수(Function) : 매개변수로 값을 전달받아 가공 처리하여 결과를 반환하는 기능 제공 함수를 선언해야만 함수를 호출하여 함수 내부에 작성된 명령을 실행하여 처리결과 반환받아 사용 함수는 선언방법에 따라 선언함수와 익명함수로 구분 선언함수 :

지역변수 - 선언된 함수가 종료되면 지역변수 자동 소멸 : 다른 함수에서 사용 불가능변수를 var 키워드로 선언하지 않고 값을 저장하여 사용한 경우 전역변수로 처리

매개변수(Argument) : 함수 내부에 작성된 명령을 실행하기 위해 반드시 필요한 값을 함수 호출시 전달받아 저장하기 위한 변수

return을 활용하여 값 비교값을 합칠경우ES6에서 추가된 화살표 함수를 사용하여 함수 선언 및 호출return 키워드 생략 가능반환되는 값이 없는 함수를 호출할 경우 함수의 반환값을 사용하면 undefined 자료형으로 처리

반환되는 값(return)이 없는 함수를 호출할 경우

내부함수 : 함수 내부에 선언된 함수 - 선언된 함수 ✔내부에서만 호출 가능

매개변수로 함수를 전달받아 저장하고 함수 내부에서 매개변수를 이용하여 호출되는 함수 > 함수의 매개변수로 함수를 전달받아 저장 가능하므로 함수를 전달받아 이용할 함수 선언

외부함수 안에 내부함수 선언과 사용

내장함수 - 시간 관련 함수 > setTimeout(callback, ms) : 시간(ms) 경과 후 콜백함수가 호출되어 콜백함수에 작성된 명령을 한번만 실행하는 함수 - timeoutId(setTimeout 함수 호출에 대한 식별자) 반환 clearTimeout(timeoutId) : timeoutId 식별자를 이용하여 setTimeout 함수의 실행...

URL 주소는 영문자,숫자,일부 특수문자로만 표현 가능 => URI(자원의 식별자) = URL(자원의 위치) + QueryString(전달값)웹(Web)은 URI 주소의 질의문자열(QueryString)로 요청 웹프로그램에 값 전달 가능문제점)질의문자열에는 URI 주소

내장함수 - eval 함수 eval(string) : 문자값을 전달받아 자바스크립트 명령으로 변환하여 반환하는 함수

내장함수 - isNaN 함수 isNaN(value) : 전달값이 숫자로만 구성된 경우 false를 반환하고 숫자로만 구성되지 않은 경우 true를 반환하는 함수

내장함수 - isFinite 함수 isFinite(value) : 전달값이 무한수인 경우 false를 반환하고 유한수인 경우 true를 반환하는 함수

내장함수 - 숫자 변환 관련 함수 parseInt(value) : 전달값을 정수값으로 변환하여 반환하는 함수 parseFloat(value) : 전달값을 실수값으로 변환하여 반환하는 함수

자바스크립트는 객체 지향 프로그래밍 언어로 객체를 이용하여 프로그램을 작성하는 언어자바스크립트는 모든 값을 객체로 표현하여 처리 - 브라우저를 window 객체로 표현하여 사용객체(Object) : 현실 세계에 존재하는 대상을 프로그램에서 사용하기 위해 프로퍼티(Pro

클래스 함수에는 프로퍼티만 선언=> 객체에 상관없이 메모리(Method 영역)에 하나만 생성되어 모든 객체가 공유하여 사용

Object 클래스 함수 요소가 하나도 선언되어 있지 않은 클래스 함수 - 요소가 없는 객체 생성 생성된 Object 객체에 필요한 요소를 추가하여 사용 - 원하는 요소의 객체를 하나만 생성 자바스크립트에서는 Object 객체를 보다 쉽게 생성하기 위해 JSON 기

값(객체)를 여러개 저장하기 위한 객체(배열)을 생성하기 위한 클래스 함수-객체에 대한 프로터티와 메소드 제공 > 요소가 하나도 없는 Array 객체 생성 - Empty Array > Array(size) : 매개변수에 전달된 정수값의 갯수만큼 요소를 가진 Arra

구조분해할당(Destructuring Assignment) 구조분해할당 : Array 객체(배열)이나 Object 객체의 요소를 해체하여 요소값을 개별적인 변수에 저장하여 제공하기 위한 기능 - ES6 > 일반적인 경우: 인덱스를 통해 값을 반환하여 저장 > Arr

Number 클래스 함수 : 숫자값이 저장된 객체를 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공 > //매개변수에 전달된 숫자값이 저장된 Number 객체를 생성하여 변수에 저장 //var num=new Number(100); var num

문자값이 저장된 객체를 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공

클라이언트 플렛폼(OS)의 현재 날짜와 시간이 저장된 Date객체를 생성하여 변수에 저장 Date.toString() : Date 객체에 저장된 날짜와 시간을 문자값을 변환하여 반환하는 메소드Date.toLocaleString() : Date 객체에 저장된 날짜와 시간

Math.PI : 원주율을 저장한 프로퍼티Math.ceil(number) : 매개변수로 전달받은 숫자값에 소숫점 자리에 값이 있는 경우 올림 처리된 정수값으로 반환하는 메소드Math.floor(number) : 매개변수로 전달받은 숫자값에 소숫점 자리에 값이 있는 경우

JSON 기능을 사용하여 Object 객체를 생성하여 변수에 저장Object.toString() : 객체를 생성한 클래스를 문자값으로 반환하는 메소드 \> Object 객체가 저장된 객체변수를 출력할 경우 toString() 메소드 자동 호출JSON.stringify(

window.alert(message) : 메세지창(경고창)을 이용하여 메세지를 출력하는 메소드\> window 객체를 생략해도 메소드 호출 가능 - 함수window.prompt(message,value) : 입력창을 이용하여 사용자로부터 문자값을 입력받아 반환하는 메

screen.width : 브라우저가 출력될 출력장치(모니터)의 폭을 저장한 프로퍼티screen.height : 브라우저가 출력될 출력장치(모니터)의 높이를 저장한 프로퍼티자식 브라우저를 생성하여 변수에 저장Window.moveTo(x, y) : 브라우저의 출력좌표를

navigator.appName : 브라우저 엔진의 이름을 저장한 프로퍼티navigator.appVersion : 브라우저 엔진의 버전을 저장한 프로퍼티navigator.userAgent : 브라우저 엔진을 저장한 프로퍼티

location.toString() : 브라우저 주소 입력영역의 URL 주소를 문자값으로 반환하는 메소드 => toString() 메소드 자동 호출location.href : location 객체의 URL 주소를 저장한 프로퍼티\> location.href 프로퍼티의

BOM(Browser Object Model) - document 객체 document 객체 : 웹프로그램(웹문서)의 요청 결과를 응답받아 브라우저에 출력하는 영역을 객체로 표현하여 프로퍼티와 메소드 제공

DOM(Document Object Model) - onload 이벤트 > 요청 웹프로그램(웹문서)의 실행결과를 응답받아 출력되는 영역을 자바스크립트에서는 document 객체로 표현하며 document 객체에 출력되는 태그(박스모델)는 Element 객체로 표현하여

document.getElementById(id) : 태그의 id 속성값으로 태그를 검색하여 Element 객체를 반환하는 메소드\>document 객체의 자식태그 중 하나의 태그를 검색하여 Element 객체로 반환\>document 객체 대신 부모 Element 객

DOM(Document Object Model) - Element 객체 생성 및 추가 >document.createElement(nodeName) : 전달값의 태그명을 가진 Element 객체를 생성하여 반환하는 메소드 - 태그 생성 > //document.creat

DOM(Document Object Model) - Element 객체 삭제

공통사항 태그내용 변경 > 태그내용 추가 >

DOM(Document Object Model) - 시계

HTML 태그의 onXXX 속성 : 태그에 발생되는 이벤트에 대한 속성으로 이벤트 처리 명령을 속성값으로 설정태그의 이벤트 속성값으로 이벤트 처리 함수 호출 - javascript 접두사 생략 가능

this로 객체를 표현해서 보다 간단하게 코드작성 가능.개별적인 온클릭 속성부여.

a 태그는 이벤트 처리 함수를 등록하지 않아도 클릭 이벤트가 발생되면 href 속성값으로 브라우저의 URL 주소를 변경하고 웹프로그램을 요청하여 실행결과를 응답받아 출력 - 기본 이벤트event 객체 : 이벤트 관련 프로퍼티와 메소드를 제공하는 객체event.preve

이벤트(Event) - 이벤트 전달(Event Propagation) 이벤트 전달 : 태그에서 발생된 이벤트가 다른 태그로 전달 - 캡쳐링 >> 타겟 >> 버블링 캡쳐링(Capturing) 단계 : 이벤트가 부모 태그에서 자식 태그로 전달 타겟(Target) 단계

버튼1과 버튼2에대한 여러개의 이벤트처리 태그를 검색하여 Element 객체로 반환받아 이벤트 속성에 이벤트 처리 함수 등록하여 이벤트 처리 \> Element 객체의 이벤트 속성에하는 이벤트 처리 함수를 ✔하나만 등록 가능\> type : 이벤트 종류, callbak

이벤트(Event) - DHTML(Dynamic HTML DHTML : 태그에서 이벤트가 발생될 경우 태그에 대한 Element 객체를 조작하여 동적인 페이지 제공하는 기능

47_event_action.html48_submit_action.html

자바스크립트 예외 처리