요소를 반환함. - document.URL - HTML 문서의 완전한 URL 주소를 반환함. - document.baseURI - HTML 문서의 절대 URI(absolute base URI)를 반환함. - document.doctype - HTML 문서의 문서 타입(doctype)을 반환함. - document.documentElement - <html>요소를 반환함. - document.documentMode - 웹 브라우저가 사용하고 있는 모드를 반환함. - document.documentURI - HTML 문서의 URI를 반환함. - document.domConfig - HTML DOM 설정을 반환함. (더는 사용하지 않음) - document.embeds - <embed>요소를 모두 반환함. - document.head - <head>요소를 반환함. - document.implementation - HTML DOM 구현(implementation)을 반환함. - document.inputEncoding - HTML 문서의 문자 인코딩(character set) 형식을 반환함. - document.lastModified - HTML 문서의 마지막 갱신 날짜 및 시간을 반환함 - document.readyState - HTML 문서의 로딩 상태(loading status)를 반환함. - document.scripts - <script>요소를 모두 반환함. - document.strictErrorChecking - 오류의 강제 검사 여부를 반환함. </article></body></html>

$$config title: ?Let's JavaScript keywords: - 메인 $$ # 개요 - 자바스크립트로는 웹의 동작을 구현 - 자바스크립트는 HTML의 '내용' '속성' '스타일'을 변경 1. 자바스크립트는 객체 기반의 스크립트 언어 2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 - 언어는 소스 파일을 작성한 후, 해당 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용 - 인터프리터 언어는 이러한 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어 3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 # 변수 - 자바스크립트 문자는 항상 따음표 - 예약어 변수명으로 사용 금지 - alert() 경고창 - console.log() 콘솔창 - name = "Mike" 이런식의 변수선언은 위험함. 이를 방지하기 위해 두가지 방법이 존재함 - let 변수 - const 상수 ## 표준객체 자바스크립트에서 표준 객체(standard object)는 다른 객체의 기초가 되는 핵심적인 객체입니다. 자주 사용되는 대표적인 자바스크립트 표준 객체는 다음과 같습니다. 1. Number 객체 2. Math 객체 3. Date 객체 4. String 객체 5. Array 객체 ```js let name = "mike"; //문자형 " " ' ' ` ` 3가지. 특수문자 앞에는 역슬래시 ``` ## `` 는 문자열 안에 변수를 표시하기 좋은 방법 ```js name = "google"; const message3 = `My name is ${name}` const message4 = `나는 ${30+1}살이다.` console.log(message4); ``` - 변수 앞에는 달러 붙여준다. ## let은 재선언 가능 ## const는 절대 바뀌지 않는 상수. 수정할 수 없다. 1. 변수는 문자와 숫자. $와 _만 사용 2. 첫글자는 숫자로 불가 3. 예약어 사용 불가 4. 가급적 상수는 대문자로 표기하자 5. 변수는 읽기 쉽고 이해하기 편하게 ## console에서 사칙연산 가능 ```js console.log(2/0)//Infinity const A=name/2 console.log(A) // NaN const age = 12 console.log(name=="google") console.log(age==12) ``` - null 존재하지 않는 값. null은 객체가 아니다!! - undefined 할당값 없음 ## typeof 연산자는 변수의 자료형을 알아낼 수 있음 ```js console.log(typeof A) console.log(message3 + message4) ``` ## 리터럴(literal) - 리터럴은 직접 표현되는 값 그 자체 ```js 12 // 숫자 리터럴 "JavaScript" // 문자열 리터럴 '안녕하세요' // 문자열 리터럴 true // 불리언 리터럴 ``` # 알림 - 스크립트 일시정지됨. 스타일링 불가함. - alert 알려줌 - prompt 입력받음 - confirm 확인받음 ```js const samplePrompt = prompt("이름을 입력하라는 팝업", "디폴트값을 여기에 작성") alert("환영합니다. : " + samplePrompt + "님") alert(`환영합니다. : ${samplePrompt}님`) const isCheck = confirm("취소 또는 확인이 나오는 팝업창") console.log(isCheck) ``` # 형변환 - String() 괄호안 타입을 문자형으로 - Number() - Boolen() ```js const mathScore = prompt("수학은 몇점입니까?", "100") const englishScore = prompt("영어는 몇점입니까?", "50") const result = (mathScore + englishScore)/2 console.log(result) ``` - 입력받은값은 무조건 문자열임 - 10050 / 2가 되었음 - 숫자형으로 자동 형 변환되어 계산됨. ```js console.log(String(3), String(true), String(null), Number(true), Number(null), Number(undefined), Number(false), Boolean(1), Boolean(0), Boolean(undefined)); ``` # 조건문 ```js if(name=="google"){ console.log(`google. 환영해`) } else{ console.log(`samsung. 환영해.`) } ``` ```js switch(평가){ case A : 원하는 코드 case B : 원하는 코드 default : 원하는 코드 } ``` # 반복문 do - while do코드는 한번은 실행됨. # 함수 ```js function showError(){ alert('에러가 발생합니다.') } showError(); ``` - 쉬운 유지보수. ```js function sayHello(name){ const message = `Hello~ ${name}`; console.log(message); } sayHello(`용재`); ``` ```js function sayHello2(name){ let message1 = `Hello~~ ` if(name){ message1 += name } console.log(message1) } sayHello2(`김갑환`) ``` ```js function addMethod(num1, num2){ return num1+num2 } console.log(addMethod(1,2)) ``` ## 함수 선언문 = 어디서든 호출이 가능하다. 호출이 위에 있어도 가능 - 자바스크립트는 실행 전 코드의 모든 함수를 미리 생성해놓음 - 사용가능범위가 상단 ABC()까지 확장. 이를 호이스팅이라고 함. ```js ABC() function ABC(){ console.log(`abcedfg~`) } ABC() ``` ## 함수 표현식 - 자바스크립트가 한줄씩 내려가면서 실행. 코드에 도달해야만 실행됨. ``` let DEF = function(){ console.log(`defgh~`) } DEF() ``` ## 화살표함수 ```js let sample = function(num1,num2){ return num1 + num2 } let sample2 = (num1, num2) => (num1 + num2) //function 삭제 및 화살표 추가. 코드구문 한줄이면 return 삭제. return 구문은 소괄호로 바꿔줌. 그러나 return전에 여러 구문이 있다면 소괄호로 바꾸기 불가. let sample3 = (num1, num2) => num1 + num2; //리턴문 한줄이면 소괄호까지 생략 가능 let smaple4 = num1 => `hello, ${num1}` // 인수가 하나면 매개체 괄호까지 생략 가능. 인수가 없으면 생략 불가 ``` ```js 화살표예시 = () => {console.log(`함수선언문을 화살표함수로`)} 화살표예시() ``` # Document 객체 - 슈퍼맨 객체 ```js const power = 100 const level = 24 const superman = { name : 'clark', // 키와 값으로 구분되어있음. age : 33, power : power, //아래 level 처럼 단어 하나로만 사용 가능. 그러나 그 전에 외부에서 defined 되어야함 level } //접근시 점 또는 대괄호 이용 console.log(superman.name) console.log(superman.[`age`]) //추가와 삭제도 동일 superman.gender = 'male' superman[`hairCut`] = `shorts` console.log(superman.hairCut) delete superman.name superman.gender // 일반적인 객체 접근 'gender' in superman //객체 내 존재 여부 확인. 불리언. console.log('gender' in superman) ``` ## for in 객체순회 ```js console.log(`///------------for in 객체순회-----------------///`) //for - in 문을 통한 객체 순회 for(let key in superman){ console.log(key +` : `+superman[key]) } ``` ## 함수를 통한 객체 생성 ```js console.log(`///---------------객체생성(함수화)-------------///`) //객체 생성을 함수화하기 function makeObject(name,age){ return{ name, age, hobby : `football` } } const 최번개 = makeObject(`최번개`,20) console.log(최번개) ``` ## 객체 생성과 내부 함수 추가 ```js console.log(`///------------객체생성 및 내부 함수 추가--------------///`) const 포켓몬 = { name : `피카츄`, age : 4, 전광석화 : function(){ //전광석화() 라고 써도 가능함!! console.log('피카츄의 전광석화') } } 포켓몬.전광석화(); ``` ## this에 대해 알아보자 ```js console.log(`///--------------------this 알아보기----------------------///`) const pokemon1={ 이름 : `밀탱크`, 포켓몬인사 : function(){//포켓몬인사() 라고 써도 됨. console.log(`안녕하세요? 저는 ${this.이름} 입니다.`) //pokemon1.이름 아니라 this.이름으로 사용해줌. //this는 실행시점. 즉 런타임에 결정됨. } } pokemon1.포켓몬인사(); //pokemon1이 this가 됨. //그러나 포켓몬인사 함수를 화살표함수로 선언하면 동작이 바뀜 //화살표함수는 자신만의 this를 가지지 않음 //화살표함수 내부에서 this 사용시 외부에서 가져옴. 즉, 전역객체를 가리키게 됨. ``` # 배열 ```js let 포켓몬도감 = [`파이리`, `꼬부기`, `이상해씨`] //배열 안에는 객체나 숫자, 함수도 넣을 수 있음. console.log(포켓몬도감.length) 포켓몬도감.push(`피카츄`) console.log(포켓몬도감.length) 포켓몬도감.pop() console.log(포켓몬도감.length); 포켓몬도감.unshift(`포니타`,`마그마`); //제일 앞에 추가 console.log(포켓몬도감) 포켓몬도감.shift() // 제일 앞에 제거 console.log(포켓몬도감) console.log(`///------------for of 배열순회-----------------///`) for(let 포켓몬 of 포켓몬도감){ console.log(포켓몬) } ``` # DOM. 요소의 선택 ## 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 ### 메소드 설명 - document.getElementsByTagName(태그이름) - 해당 태그 이름의 요소를 모두 선택함. - document.getElementById(아이디) - 해당 아이디의 요소를 선택함. - document.getElementsByClassName(클래스이름) - 해당 클래스에 속한 요소를 모두 선택함. - document.getElementsByName(name속성값) - 해당 name 속성값을 가지는 요소를 모두 선택함. - document.querySelectorAll(선택자) - 해당 선택자로 선택되는 요소를 모두 선택함. - document.createElement(HTML요소) - 지정된 HTML 요소를 생성함. - document.write(텍스트) - HTML 출력 스트림을 통해 텍스트를 출력함. - document.getElementById(아이디).onclick = function(){ 실행할 코드 } - 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함. - document.anchors - name 속성을 가지는 요소를 모두 반환함. - document.applets - applet 요소를 모두 반환함. (HTML5에서 제외됨) - document.body - 요소를 반환함. - document.cookie - HTML 문서의 쿠키(cookie)를 반환함. - document.domain - HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함. - document.forms -

요소를 모두 반환함. - document.images - 요소를 모두 반환함. - document.links - href 속성을 가지는 요소와 요소를 모두 반환함. - document.referrer - 링크(linking)되어 있는 문서의 URI를 반환함. - document.title - 요소를 반환함. - document.URL - HTML 문서의 완전한 URL 주소를 반환함. - document.baseURI - HTML 문서의 절대 URI(absolute base URI)를 반환함. - document.doctype - HTML 문서의 문서 타입(doctype)을 반환함. - document.documentElement - <html>요소를 반환함. - document.documentMode - 웹 브라우저가 사용하고 있는 모드를 반환함. - document.documentURI - HTML 문서의 URI를 반환함. - document.domConfig - HTML DOM 설정을 반환함. (더는 사용하지 않음) - document.embeds - <embed>요소를 모두 반환함. - document.head - <head>요소를 반환함. - document.implementation - HTML DOM 구현(implementation)을 반환함. - document.inputEncoding - HTML 문서의 문자 인코딩(character set) 형식을 반환함. - document.lastModified - HTML 문서의 마지막 갱신 날짜 및 시간을 반환함 - document.readyState - HTML 문서의 로딩 상태(loading status)를 반환함. - document.scripts - <script>요소를 모두 반환함. - document.strictErrorChecking - 오류의 강제 검사 여부를 반환함. </article></body></html>