본문 바로가기

JavaScript50

[자바스크립트] 함수를 선언하는 3가지 방법 (함수 선언식, 함수 표현식, 화살표 함수) 함수를 선언하는 3가지 방법 1. 함수 선언식 (function declaration) 일반적인 함수 선언 호이스팅이되서 코드 맨 앞줄에 자동으로 선언이된다 function 함수이름() { 함수실행문 } sayHello(); // 함수의 선언식은 호이스팅이되기 때문에 함수가 실행된다 function sayHello() { console.log('Hello World'); } 2. 함수 표현식 (function expression) 함수를 변수에 저장 일반 함수와 다르게 호이스팅이 되지 않는다 let 변수명 = function() { 함수실행문 } sayHello(); // 함수의 표현식은 호이스팅이되지 않기 때문에 함수가 실행되지 않는다 let sayHello = function() { console.l.. 2022. 3. 29.
[자바스크립트] document.createElement로 DOM 요소 추가하기 DOM 요소를 추가하는 document의 메소드 document.createElement(태그이름) DOM 요소를 만들어주는 함수 createElement 함수로 DOM 요소를 만든 후 반드시 DOM에 붙여주는 작업을 해야한다 // 새 요소 만들기 const newDiv = document.createElement("div"); // 스타일 추가 newDiv.style.backgroundColor = "blue"; newDiv.style.width = "50px"; newDiv.style.height = "50px"; // 요소를 body에 추가 document.body.appendChild(newDiv); 2022. 3. 25.
[자바스크립트] document의 메소드로 DOM 요소에 접근하기 DOM 요소에 접근하는 5가지 document의 메소드 1. document.getElementsByTagName(태그이름) DOM 요소를 태그 이름으로 접근하는 함수 id나 class 선택자가 없는 DOM 요소에 접근하는 함수 getElementsByTagName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다 this is paragaph this is paragaph this is paragaph 2. document.getElementsByName(name속성값) DOM 요소를 요소의 name 속성값으로 접근하는 함수 getElementsByName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다 3. document.getElementById(아이디) DOM 요소를 .. 2022. 3. 25.
[자바스크립트] 프로토타입과 클래스의 차이점 자바스크립트는 2015년 6월에 여러가지 새로운 기능이 추가된 큰 업데이트를 하게됩니다. 이 업데이트를 에크마 스크립트 프로그래밍 버전 6(version 6 of the ECMA Script programming language) 줄여서 ES6라고 부릅니다. ES6이전 자바스크립트에서는 클래스가 없었고 프로토타입(prototype)이라는 문법을 사용해 새로운 객체를 찍어내는 템플릿을 만들었습니다. 1. 객체를 찍어내는 템플릿 프로토타입, 클래스가 필요한 이유 아래의 코드와 같이 name이라는 키를 가지고 있고 farewell()이라는 함수를 가지고 있는 4개의 각기다른 person이라는 객체를 만든다고 가정해보자. person1 = { name: 'John', farewell: function (){ c.. 2022. 3. 23.
[자바스크립트/한줄정리] 돔 트리 (DOM Tree)란? DOM의 구조가 부모와 자식 요소로 구분되는 나무와 같은 형태와 같다고 해서 이름이 붙여졌다 2022. 3. 22.
[자바스크립트/한줄정리] 문서 객체 모델(DOM)이란? HTML 요소 하나하나를 객체로 생각하는 모델 모든 요소를 자바스크립트로 조작하기 위해 HTML 문서를 객체로 해석하는 방법 웹 문서의 텍스트, 이미지, 표 등 모든 요소를 모두 객체로 접근하고 조정하는 것 2022. 3. 22.
[자바스크립트] 배열에서 데이터를 추가, 삭제, 복사하는 함수 6가지 (push, pop, unshift, shift, splice, concat) 목차 push: 뒤에서부터 데이터 추가 pop: 뒤에서부터 데이터 삭제 unshift: 앞에서부터 데이터 추가 shift: 앞에서부터 데이터 삭제 splice: 인덱스번호로 데이터 삭제, 추가 concat: 두 배열을 합쳐서 새로운 배열을 생성 배열에서 데이터를 추가, 삭제, 복사하는 함수 1. push() 배열 뒤에서부터 데이터를 추가해주는 함수로 배열의 새로운 길이가 리턴된다. 기존 배열 값이 변한다. Array.push(뒤에서 추가할 데이터); 👉 예제 const alphabet = ['a', 'b', 'c']; const result = alphabet.push('d'); console.log(alphabet); // ["a", "b", "c", "d"] console.log(result); //.. 2022. 3. 18.
[자바스크립트] 배열안에 있는 원소 모두 출력하는 3가지 방법 (for문, for of문, forEach 함수) 배열안에 있는 원소 모두 출력하는 3가지 방법 1. for문 반복문 for문을 사용해서 배열 안에 있는 전체 원소를 출력해준다. const animals = ['Blue whale', 'Elephant', 'Penguins', 'Giant panda', 'Cat']; for(let i = 0; i < animals.length; i++) { console.log(animals[i]); } // "Blue whale" // "Elephant" // "Penguins" // "Giant panda" // "Cat" 2. for of문 변수 i가 배열에 첫번째 원소부터 마지막 원소까지 순서대로 돌아가며 할당해준다. const animals = ['Blue whale', 'Elephant', 'Penguins'.. 2022. 3. 18.
[자바스크립트] 배열 정렬하기 sort(), 오름차순, 내림차순 정리법 1. 배열 기본 문법 1 배열 안에 있는 원소를 문자열로 바꿔 유니코드의 순서대로 오름차순 정렬해준다. 기존 배열을 변경해준다 Array.sort() 👉 문자정렬 예제 알파벳 순서대로 months 배열안에 있는 데이터가 정렬된다. const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // ["Dec", "Feb", "Jan", "March"] 👉 숫자정렬 예제 sort() 함수는 배열안에 있는 원소를 문자열로 바꿔서 정렬해주기 때문에 숫자크기대로 정렬이 되지 않는다. const numbers = [25, 13, 1, 6, 59] const result = numbers.sort(); console.log(res.. 2022. 3. 18.
[자바스크립트] 객체 키 접근방법의 차이점 (중괄호 vs 마침표) 객체에 접근하는 방법 2가지 1. 중괄호 obj['key'] 2. 마침표 obj.key 👉 예제 const planets = { 수성: "Mercury", 금성: "Venus", 지구: "Earth", 화성: "Mars", 목성: "Jupiter", 토성: "Saturn", 천왕성: "Uranus", 해왕성: "Neptune" }; const name = "지구" // []로 접근하면 동작한다 console.log(planets[name]); // Earth // .으로 접근하면 동작하지 않는다 console.log(planets.name); // Undefined // .으로 접근하려면 key값으로 직접 접근해야한다 console.log(planets.지구); // Earth 결론 객체의 key에 직접.. 2022. 3. 18.

티스토리툴바