-
day39 - JavaScript(function, scope, 객체)KIC/JavaScript,CSS 2021. 8. 10. 00:19반응형
[scope]
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert titlte here</title> <script> let pi = 3.14 console.log(`파이 값은 ${pi} 입니다.`) //블록을 사용한 스코프 생성 { let pi = 3.141592 console.log(`파이 값은 ${pi} 입니다.`) } console.log(`파이 값은 ${pi} 입니다.`) //함수 블록을 사용한 스코프 생성 function sample() { let pi = 3.141592 console.log(`파이 값은 ${pi} 입니다.`) } sample() console.log(`파이 값은 ${pi} 입니다.`) </script> </head> <body> </body> </html>
[익명 함수]
-> 익명함수는 한 페이지에서 재정의가 가능하다.
-> 선언적 함수 또한 top - down으로 재정의가 된다.
-> 자바 스크립트에서는 선언적 함수를 먼저 정의하고 후에 익명 함수를 정의하기 때문에 아래 코드는 결과로 익명 함수가 나온다.
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title></title> <script> // 익명 함수를 정의 한다. 함수 = function () { console.log('익명 함수입니다.') } // 선언적 함수로 재정의 function 함수() { console.log('선언적 함수입니다.') } //함수 호출 함수() </script> </head> <body> </body> </html>
[객체]
-> 자바스크립트는 속성과 메소드를 가질 수 있는 모든것이 객체이다.
-> 추천하는 방법은 아니지만 배열과 함수도 객체로 사용할 수 있다고 한다.
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title></title> <script> //변수를 선언 const pet = { name: '구름', eat: function (food) { alert(this.name + '은/는' + food + '을/를 먹습니다.') } } //메소드 호출하기 pet.eat('밥') </script> </head> <body> </body> </html>
[JSON]
-> JSON의 약자는 Java Script Object Notation 이다.
-> stringify는 자바 스크립트의 객체를 JSON형식으로 바꾼다.
-> parse는 String type의 json 변수를 Object로 변환해준다.
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title></title> <script> //객체를 선언 const student = {} student.이름 = '나자바' student.취미 = '피아노' student.장래희망 = '프로그래머' delete student.장래희망 //출력 console.log(JSON.stringify(student, null, 2)) console.log(typeof student) console.log(typeof JSON.stringify(student)) </script> </head> <body> </body> </html>
[ex 2]
<!DOCTYPE html> <html> <head> <title></title> <script> // 자료를 생성합니다. const data = [{ name: '혼자 공부하는 파이썬', price: 18000, publisher: '한빛미디어' }, { name: 'HTML5 웹 프로그래밍 입문', price: 26000, publisher: '한빛아카데미' }] // 자료를 JSON으로 변환합니다. const json = JSON.stringify(data) console.log(json) // JSON 문자열을 다시 자바스크립트 객체로 변환합니다. console.log(JSON.parse(json)) </script> </head> <body></body> </html>[object2]
-> 이미 자바스크립트에서 정의한 Number 객체에 prototype으로 속성 및 메서드 추가가 가능하다.
<!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title></title> <script> const s1 = 277 const s2 = new Number(150) alert(typeof s1) alert(typeof s2) s2.sample = 10 console.log(s2) alert(s2) alert(s2.sample) alert("s1 number : " + s1.valueOf()) // Number에 prototype으로 method를 추가할 수 있다. Number.prototype.power = function (n =2) { return this.valueOf() **n } //Number 객체의 power() 메소드를 사용하기 const a = 12 console('a.power()' , a.power()) // 12의 제곱(기본값) console('a.power(3)' , a.power(3)) // 12의 세제곱 console('a.power(4)' , a.power(4)) // 12의 네제곱 </script> </head> <body> </body> </html>
300x250'KIC > JavaScript,CSS' 카테고리의 다른 글
day40 - JavaScript(DOM) (0) 2021.08.10 VScode - 급작스러운 JavaScrip 404 에러 (0) 2021.08.10 day38 - JavaScript(prompt, for문, while, 이중 for문, function, array, parameter, callback) (0) 2021.08.06 day37_2 - JavaScript(alert, let, prompt, 자료 형변환, if문) (0) 2021.08.05 day37_1 - JavaScript(CSS 선택자, tag, id, class, border, padding, margin) (0) 2021.08.05