본문 바로가기

JavaScript

 (83)
[JavaScript] DOM window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 한다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있음. DOM (Document Object Model) DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델. 간단하게 표현하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.
[JavaScript] css 선택자로 태그 선택하기 document.quertSelector('css선택자') (1) id 선택하기 id 를 선택할때 #을 사용하므로 '#id' const myTag = document.querySelector('#myNumber'); console.log(myTag); const myTag2 = document.getElementById('myNumber'); console.log(myTag2); 이 코드는 id로 태그를 선택하는 방법과 결과가 같다. (2-1) class 선택하기 (맨 첫번째 값) class 를 선택할 때 .을 사용하므로 '.class' const myTag3 = document.querySelector('.color-btn'); console.log(myTag3); 여러 값이 있어도 가장 처음 값이 선..
[JavaScript] 태그 이름으로 태그 선택하기 document.getElementsByTagName('태그이름') : 태그이름으로 태그를 선택하는 메소드 const btns = document.getElementsByTagName('button'); 태그 이름으로 요소를 찾는 경우에, 여러 태그를 선택할수 있으므로 반드시 Elements 로 작성해 주어야 한다. 또한 실행결과 역시 HTMLCollction 으로 유사배열을 리턴함. const btns = document.getElementsByTagName('button'); const allTags = document.getElementsByTagName('*'); 이처럼 '*' 을 입력하면 모든 태그를 선택할수도 있음.
[JavaScript] class 로 태그 선택하기 자바스크립트에서 여러요소의 값을 한번에 선택할 때, 같은 class 를 가진 태그를 선택하는 방법이다. document.getElementsByClassName('class'); (여러요소를 선택하므로 Elements 라고 작성해야한다.) /* HTML */ const myTags1 = document.getElementsByClassName('color-btn'); console.log(myTags1); console.log(myTags1[1]); // 특정 인덱스 번호에 접근 console.log(myTags1.length); // length property 사용 가능 for (let tag of myTags1) { console.log(tag); } 배열이 아니기 때문에 배열의 메소드는 사용할 수..
[JavaScript] 배열 메소드 forEach 와 map forEach 메소드 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드로 forEach 함수는 첫번째 아규먼트로 콜백함수를 전달 받는데, 콜백함수의 파라미터에는 각각 배열의 요소, Index, 메소드를 호출한 배열이 전달된다. 그동안 반복적인 작업을 할 때, for of 문을 사용했었으나 const members = ['철수', '유리', '훈이', '짱구', '맹구']; for (let member of members) { console.log(`${member}님이 입장하셨습니다.`); } const members = ['철수', '유리', '훈이', '짱구', '맹구']; members.forEach(function (member) { console.log(`${member}님이 입장하셨습니..
[JavaScript] id로 태그 선택하기 어떤 태그를 움직이거나, 사용자의 마우스 속성에 반응하도록 하려면 내가 다루고자하는 태그를 선택해야 한다. Id 로 태그를 선택하는 것은 자바스크립트로 원하는 태그를 선택하는 방법중 하나로 , 고유한 id 를 가진 하나의 태그를 선택할 때 유용하다. document.getElementById(); document.getElementById('id'); const myTag1 = document.getElementById('myNumber'); console.log(myTag1); const myTag2 = document.getElementById('btns'); console.log(myTag2); const myTag3 = document.getElementById('codeit'); console...
[JavaScript] 객체에서 데이터 접근하기 [객체에서 데이터 접근] 자바스크립트 객체에 접근하는 방법은 크게 두가지가 있다. let codeit = { name: '코드잇', bornYear: 2017, isVeryNice: true, worstCourse: Null, bestCourse: { title: '자바스크립트 프로그래밍 기초', language: 'JavaScript' } }; 1. 점 표기법 (ObjectName.PropertyName) let codeit = { name: '코드잇', bornYear: 2017, isVeryNice: true, worstCourse: null, bestCourse: { title: '자바스크립트 프로그래밍 기초', language: 'JavaScript' } }; console.log(codeit...
[JavaScript] 객체와 프로퍼티 객체(Object) 다음처럼 값을 하나씩 저장할 수도 있지만, 여러가지 값을 한번에 저장할 수 있음. let name = 'Codeit'; let bornYear = 2017; let isVeryNice = true; 객체는 {} 를 통해서 만들수 있으며, 다양한 값들을 쉼표로 구분할 수 있다. { Name: '신짱구', bornYear : 1990, isVeryNice : true, } 이처럼 Name, bornYear, isVeryNice 는 key (값 이름), '신짱구', 1990, true 는 value(값) 라고 하며 하나의 key 와 value 를 가르켜 property (속성) 이라고 한다. [Property Name (key Name) 주의사항] 프로퍼티 네임은 보통 문자열로 작성해야하지..

티스토리툴바