자바스크립트 기초
·
Web/JavaScript
자바스크립트란? 웹의 동작을 구현하는 객체 기반 언어 온클립 속성의 값으로 옴. 객체 객체: 이름(name)과 값(value)으로 구성된 프로퍼티의 정렬되지 않은 집합 객체의 프로퍼티 참조 객체이름.프로퍼티이름 또는 객체이름["프로퍼티이름"] 객체의 메소드 참조 객체이름.메소드이름() innerHTML 프로퍼티 선택 1. HTML 태그 이름 - getElementsByTagName() 2. 아이디(id)를 이용한 선택 - getElementById() 3. 클래스(class) - getElementsByClassName() 메 4. name 속성(attribute) - getElementByName() 5. CSS 선택자(아이디, 클래스, 속성, 속성값 등) - querySelectorAll() 6. H..
생활코딩 JavaScript 객체지향 프로그래밍 (4)
·
Web/JavaScript
객체 간의 상속 var superObj = {superVal: 'super'}; var subObj = {subVal: 'sub'}; subObj.__proto__ = superObj; console.log('subObj.subVal =>', subObj.subVal); console.log('subObj.superVal =>', subObj.superVal); //.__proto__ : subObj의 부모를 superObj로! // 찾았는데 없다면, 부모에서 가져다 씀. subObj.superVal = 'sub'; console.log('superObj.superVal =>', superObj.superVal); // 자식 객체값을 바꿔도, 프로토 값은 바뀌지 않음. (얕은 복사같은 느낌!) // .b..
생활코딩 JavaScript 객체지향 프로그래밍 (3)
·
Web/JavaScript
class //class 생성 /* class Person { } var kim = new Person(); console.log(kim); */ // class constructor function class Person { constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } } var kim = new Person('kim', 10, 20); console.log('kim', kim); // 출력값: kim Person { name: 'kim', first: 10, second: 20 } class constructor class Person { constructor(name, fi..
생활코딩 JavaScript 객체지향 프로그래밍 (2)
·
Web/JavaScript
객체 실제로 사용하기 console.log("Math.PI", Math.PI); console.log("Math.random()", Math.random()); console.log("Math.floor(3.9)", Math.floor(3.9)); // 객체에 소속된 함수 = 메소드 var MyMath = { PI: Math.PI, random: function(){ return Math.random(); }, floor: function(val) { return Math.floor(val); } } console.log(MyMath.PI); console.log(MyMath.random()); console.log(MyMath.floor(3.9)); "this" 란? 메소드 내에서 메소드가 속한 객체를..
생활코딩 JavaScript 객체지향 프로그래밍 (1)
·
Web/JavaScript
객체지향 프로그래밍의 필요성? 코드가 많아질수록 복잡해진다. 이를 단순화시키기 위해 정리정돈을 하는 것. 객체(클래스)란? 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것 object.js // 배열 var memberArray = ['young','abyss','moon']; console.log("memberArray[1]", memberArray[1]); // 인자까지 출력 var memberObject = { manager:'young', developer: 'abyss', designer: 'moon' } //객체 읽기 2가지 console.log("memberObject.manager", memberObject.manager); console.log("memberObject['manage..