JavaScript
-
이벤트(Events)란?!JavaScript/EventHandler 2022. 11. 6. 15:39
이벤트(Events)란?! - 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다(ex 키보드에서 키 누르기, 웹 브라우저에서 새로운 페이지를 불러오는 것) - 이벤트는 웹 문서 안에서만 이루어지는 동작을 말한다. 따라서 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다 (예를 들어 브라우저 창 맨 위의 제목 표시줄에서 클릭하는 것은 이벤트라 하지 않는다) 이벤트(Events) 종류 1. 마우스이벤트(Mouse Events) - 마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼 조작할 때 발생 click onclick When mouse click on an element mouseover onmouseover When the cursor of the mouse comes over the ..
-
유사배열(Array-Like Object)JavaScript/DOM 2022. 11. 6. 14:40
// color-btn이라는 클래스를 다 선택했을 때 const myTags = document.getElementsByClassName("color-btn"); console.log(myTags); console.log(myTags[0]); console.log(myTags.length); // 하나의 클래스를 선택했을 때 const myTags2 = document.getElementsByClassName('red'); console.log(myTags2); console.log(myTags2[0]); console.log(myTags2.length); // 없는 classname을 선택했을때 const myTags3 = document.getElementsByClassName('white'); co..
-
반복문정리JavaScript/Basic 2022. 10. 5. 09:32
JavaScript에서 사용할 수 있는 반복문의 형태 1. while 문 2. do / while 문 3. for 문 4. for / in 문 5. for / of 문 6. for each while문 while (표현식) { 표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문; } ex) var i = 1; while(i{ console.log('index ' + index + ' value: ' + number, '원본 array ' + array); }); index 0 value: 1 원본 array 1,2,3,4,5 index 1 value: 2 원본 array 1,2,3,4,5 index 2 value: 3 원본 array 1,2,3,4,5 index 3 value: 4 원본 arra..
-
객체(Obejct) & 메서드(Method)JavaScript/Basic 2022. 9. 15. 08:35
객체란(Obejct)?! - 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 // 왼쪽이 객체의 property name(key), 오른쪽이 객체의 property value { '1st': null, '2nd' : 연아, friend: {name: 'crew', age: 3}, 'my-name': 'yunajoe' } Property Name 의 자료형은 문자열이지만, 반드시 따옴표로 감싸줄 필요는 없다. 다만 아래의 사항들을 어길시에는 따옴표로 감싸줘야 한다. 1. 첫번째 글자는 반드시 문자, 밑줄, 달러기로 시작해야 한다 2. 띄어쓰기 금지 3. 하이픈 금지 // 데이터에 접근해보자 let profile = { name: "yuna", 'born Y..
-
RequestJavaScript/Webdevelopment 2022. 9. 7. 07:53
response로 html, js 뿐만 아니라 json형태의 정보도 받을 수 있다. # JSON이란 Javascript object notaiton 줄임말. 정보를 교환할 때 주도 받는 데이터 형식. JS의 문법을 본 따서 만들어짐. # 특징 1. JSON에는 프로퍼티의 이름과 값을 표현하는 방식에 제한이 있습니다. (1) JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 합니다. (2) JSON에서는 값이 문자열인 경우 큰따옴표(")를 사용해야 합니다. => name, height, wieght, hobbies 가 ""로 감싸져있다. { "name":"Michael Kim", "height":180, "weight":70, "hobbies":["Basketball", "Listenin..
-
ArrowFunctionJavaScript/Basic 2022. 9. 2. 09:18
ArrowFunction - 함수 표현 방식을 보다 간결하게 만들어주는 방법 - Arrow function은 익명함수 이기 때문에 이름을 가진 변수에 할당하거나 다른 함수의 argument로 선언이 될 때 사용 // 함수 선언 function getTwice(number){ return number *2; } // 함수 표현 const getTwice = function(number) { return number*2; } // 화살표 함수 const getTwice = number => number * 2; 매개변수에 따른 선언 // parameter가 여러개 일 때 m 소괄호 안에 parameter를 쓴다 const arrow = (x,y) => {...}; // parameter가 한 개인 경우 소괄..
-
JavaScript로 HTML 태그를 선택하는 방법JavaScript/DOM 2022. 8. 27. 13:47
1. HTML 태그 이름을 이용한 선택(document.getElementsByTagName) 2. HTML id를 이용한 선택(document.getElementById) 3. HTML class를 이용한 선택(document.getElementsByClassName) 4. HTML name 속성을 이용한 선택(document.getElementsByName) 5. CSS 선택자를 이용한 선택 (querySelectorAll() 메소드는 CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML 요소) 6. HTML 객체 집합(object collection)을 이용한 선택 (HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 요소를 선택) 태그이름..