📖 모던 자바스크립트 교재) 5장. 표현식과 문 01. 값 값(value)은 식(표현식)이 평가(evaluate)되어 생성된 결과를 말한다. 🖥️ 예제 코드 // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. var sum = 10 + 20; ➡️ 변수에 할당되는 것 또한 값. 02. 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 💡 리터럴을 사용하여 생성할 수 있는 값의 종류 정수 리터럴 부동소수점 리터럴 2진수 리터럴 8진수 리터럴 16진수 리터럴 문자열 리터럴 불리언 리터럴 null 리터럴 undefined 리터럴 객체 리터럴 배열 리터럴 함수..
📖 모던 자바스크립트 교재) 4장. 변수 01. 변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 🖥️ 예제 코드 var result = 10 + 20; 변수 이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 (위의 예제에서, result) 변수 값 : 변수에 저장된 값 (위의 예제에서, 30) 할당(대입, 저장) : 변수에 값을 저장하는 것 참조 : 변수에 저장된 값을 읽어 들이는 것 02. 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름 또는 변수 이름 값은 메모리 공간에 저장되어 있으므로, 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다. 03. 변수..
리스트를 작성하여 submit하면 작성한 문구와 함께 check button 아이콘을 추가하고 싶었다. Font Awesome 에서 원하는 아이콘 찾아서 사용하면 된다. 문제는 .. non-check-button을 클릭하면 check-button으로 바뀌도록 하고 싶었던 것이다. button.setAttribute("onclick", "handleButtonClick()"); 이 코드를 추가하고, handleButtonClick 함수를 추가해주면 된다. 근데 또 문제가 생기고 말았다. 리스트를 하나 더 추가할 때마다 먼저 작성한 리스트의 checkbutton이 없어지는 것이다.... 이유는 ... const button = document.createElement("i"); -> 이 코드를 전체적으로 통..
input type="text"의 value 값을 element에서 찾고 싶어, console.dir(document.body); 를 입력하였다. childeNodes -> form.login-form -> -> input.login-form__text.hidden -> value: "gaeun"
form 에는 분명히 class="hidden"이 적용되어 있고, style.css 파일에는 class="hidden"는 display: none;으로 적용되도록 설정되어 있다. 하지만 위 사진과 같이 개발자 도구에서 취소선이 그어지면서 안먹히는 현상이.. 나타났다. 이는 해당하는 #login-form 이 display가 flex에 해당되어서 그랬던 것이다... 이유는 차차 알아보자. 따라서 위와 같이 class="hidden" 을 display: flex가 걸려있는 form 이 아닌, input에 따로따로 걸어줬더니 정상작동 한다 !!
1. Adding ToDos 2. Deleting ToDos function deleteToDo(event) { const li = event.target.parentElement; li.remove(); } todo.js
1. html form 생성 ; index.html 2. js 연동 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { // submit의 기본설정 막음 (새로고침) event.preventDefault(); // input의 value를 새로운 변수에 복사 const newTodo = toDoInput.value; // input의 value를 비움 toDoInput.value = ""; } toDoForm...
1. Javascript에서 html element을 생성 how to use // images 배열 생성 const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg"]; // images 랜덤으로 선택 const chosenImage = images[Math.floor(Math.random() * images.length)]; // html에 img element 생성 const bgImage = document.createElement("img"); // (랜덤 생성) bgImage.src = `img/${chosenImage}`; background.js 2. body에 html을 추가 how to use document.body.appendChild(..
padStart padStart(maxLength, fillstring) -> padStart가 적용되는 문자열의 길이가 maxLength보다 작다면, 부족한 길이만큼 fillstring을 문자열 앞쪽에 채운다. padEnd padEnd(maxLength, fillstring) -> 문자열 뒤쪽에 채운다. how to use clock.js hello.padStart(7, "x"); // xxhello 9.padStart(2, "0"); // 09
1. timeout setTimeout(func, time) -> time(ms) 이후에 func이 실행됨. how to use clock.js function sayHello() { console.log("hello"); } // 5000ms(5초) 뒤에 sayHello 함수 실행됨. setTimeout(sayHello, 5000); 2. date object web에서 제공하는 기본 객체로, 날짜/시간과 관련된 객체 - google -> js date mdn search ! how to use clock.js const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); // Date 객체 ..
