🛠 JavaScript8 JavaScript를 이용한 로그인 버튼 활성화 들어가기 전에 드디어 위코드에서 JacaScript를 활용한 제일 기초적인 활용을 하게 되었다. 아직까지 JS에 대해 설명하라면 하지도 못하겠지만 부딪혀가며 직접 기억에 우겨넣도록 하자! 우선, 키보드 입력과 연관 된 이벤트들을 알아보자 onekeyup : 사용자가 키보드에서 키를 놓을 때 생기는 이벤트 onekeydown : 사용자가 키보드에서 키를 누를 때 생기는 이벤트 onekeypress : 글씨가 써질 때 생기는 이벤트(shift, ctrl, backspace, tab 한글 등을 인식 못 함) 이런 식으로 input 혹은 button 태그에 관련 함수를 생성하여 넣는 식으로 사용할 수 있다. ➕ button 태그의 disabled 속성 활용 태그의 disabled 속성은 해당 버튼이 비활성화됨을.. 2022. 5. 5. About Class class 객체를 생성하기 위한 템플릿. 함수의 종류라고 볼 수 있으며, class 문법에도 표현식과 선언 방법이 있다. Class 선언 class를 정의하기 위한 방법 중 하나로, class와 함께 class의 이름을 지정해야한다. class WeCode { constructor(height, width) { this.height = height; this.width = width; } } Hoisting function과 class 선언의 중요한 차이점은 function의 경우, 정의를 하기 전에 호출이 가능하지만 class는 반드시 정의를 해야 사용할 수 있다. const student = new WeCode(); class WeCode {} // ReferenceError! 꼭 선언 후 호출하도록.. 2022. 5. 2. About Object Object와 Array의 차이 object와 array의 가장 큰 차이점은 우리가 원하는 것을 찾고자 할 때, object에서의 value 순서는 문제가 되지 않지만 array에서는 순서가 매우 중요하다는 점이다. 접근 방법이 다르기 때문인데, array에서는 number를 이용해서 접근하기 때문이다. 그렇기에 순차적인 데이터는 array를 쓰고, 그렇지 않은 데이터는 object를 쓰는 것이 좋다. 또한, 데이터를 접근할 때 보통 이름을 통해 찾는데 object는 기본적으로 name 기반이라는 장점이 있다. Object 사용 방법 console.log(seulgi.lastName); 괄호 안에는 (object. property) 순으로 쓰여진다. . 은 연산자Operator의 역할을 한다. [ ] B.. 2022. 4. 29. 생활코딩 WEB2 - JavaScript (2) body 태그에 속한 부분을 JavaScript를 통해 변경을 하려고 한다. 그러면 어떻게 body태그를 선택할 수 있을까? 다시 한번 정확히 정리를 해보자면, 우리가 하고 싶은 것은 CSS의 선택자를 이용해서 JavaScript에서 태그를 선택하고 싶은 것이다. 구글에다가 javascript select tag by css selector를 검색하여 어떻게하면 CSS를 선택할 수 있는지 찾아보자 https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector Document.querySelector() - Web API | MDN Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Elem.. 2022. 1. 21. JavaScript - function function makeBurger(){ console.log("빵두기") console.log("상추두기") console.log("고기패티두기") console.log("뚜겅덮기") } makeBurger() function makeBurger(type,size,num){ if(num false if(date){ return `${year}/${month}/${date}` } else if(month){ return `${year}년 ${month}월` } else if(year){ return `${year}년` } } console.log(meetAt(2021,1)) 2022. 1. 16. JavaScript - for // for문 for(let i=1; i 2022. 1. 15. JavaScript - if let patient = { name :"hyein", age : 30, disease : "love" } //객체 {} 어레이 [] console.log(patient) console.log(patient.name) //원하는 값만 출력하고 싶을 때 console.log(patient.age) console.log(patient["age"]) //출력되는 값은 같다. patient.name = "HI" patient.age = 25 //원하는 값을 선택적으로 바꿀 수 있다. console.log(patient) let patientList = [{name:"Kumho", age:4},{name:"Eunha", age:2},{name:"Donghae", age:1}] console.log(patientL.. 2022. 1. 14. WEB2 - JavaScript (1) 2022-01-13 HTML과 JavaScript의 만남 1 (script 태그) / HTML과 JavaScript의 만남 2 (이벤트) / HTML과 JavaScript의 만남 3 (콘솔) / 데이터타입 - 문자열과 숫자 JavaScript JavaScript는 사용자와 상호작용하며, HTML을 제어할 수 있는 언어이다. JavaScript html 1+1 JavaScript의 text 출력 코드는 ↓ HTML의 onclick의 속성의 속성 값으로는 반드시 JavaScript가 오고, 웹브라우저는 이것을 기억하고 있다가 onclick 속성이 위치하고 있는 태그를 실행했을 때 동작되도록 한다. 이처럼 웹브라우저 위에서 일어나는 일들을 이벤트Event 라고 한다. 구글 개발자 도구 > 검사 > Consol.. 2022. 1. 13. 이전 1 다음
