data life

.createElement() : 선택한 요소 안에 요소 생성 .createTextNode() : 선택한 요소에 텍스트 추가 .appenChild() : 선택한 요소 안에 자식 요소를 추가 HTML 삽입 미리보기할 수 없는 소스

setInterval() setInterval(function, milliseconds); : 일정 시간 간격으로 작업 수행하기 위한 함수 -> 다음 작업 중지 : clearInterval() const clock = document.querySelector(".js-clock"); function realTime() { const today = new Date(); const hours = today.getHours(); const minutes = today.getMinutes(); const seconds = today.getSeconds(); clock.innerText = `${hours}:${minutes}:${seconds}`; }; realTime(); //00:00:00 보이지 않고 바로..

preventDefault() event.preventDefault() :어떤 event의 기본 행동이 발생되는 것을 막음 : addEventLister 내부 함수가 발생되는 것을 막음 *사용 예시* submit 버튼을 눌러도 새로고침이 안되게끔 태그를 눌렀을 때도 href링크로 이동하지 않게끔 localStorage : 하나의 작은 DB : key-value 형태 : array로는 저장 불가 only text만! setItem : 데이터 저장 localStorage.setItem("key","value"); getItem : 데이터 읽기 localStorage.getItem("key"); removeItem : 데이터 지우기 localStorage.removeItem("key"); clear : 초기화..

Math 수학 상수나 함수에 대한 속성, 메소드가 있는 내장 객체 다른 전역 객체와 달리 생성자(constructor) 존재하지 않음 ➡️ Math 객체의 모든 메소드나 property를 바로 사용 가능 대표 메소드 Math.min() : 가장 작은 수 반환 : 인수가 없을 경우 //Infinity, 비교할 값이 포함될 경우 //NaN Math.min(-1,0,-100,"string") //NaN Math.max() :가장 큰 수 반환 : 인수가 없을 경우 //-Infinity, 비교할 값이 포함될 경우 //NaN Math.max(1,0,-10,"100") //100 Math.random() 0과 1 사이의 랜덤한 숫자를 반환 Math.random() * 10 //0과 10 사이의 랜덤한 숫자 반환 Ma..

h1 { color: cornflowerblue; } .clicked { color: tomato; } className 이전 클래스와 상관없이 모든 걸 교체해버림 클래스 이름 변경 element.className = "변경할 이름"; 클래스 이름 추가 기존 클래스에 값을 추가 앞에 space도 같이 추가해줄 것 element.className += " 추가할 이름"; function handleClick() { const.clickedClass = "clicked" if (h1.classList === clickedClass){ h1.className = ""; } else { h1.className = clickedClass; } } h1.addEventListener("click", handleCl..

React Native : Js 만으로 안드로이드, iOS 앱 개발 가능 Electron : CSS, HTML, Js로 데스크탑 앱 개발 가능 자바스크립트의 HTML 접근 document 객체 브라우저에 존재하는 object로, console 창에서 작성한 html 문서를 가져옴 document 메소드 HTML element 선택 HTML element 생성 HTML 이벤트 핸들러 추가 HTML 객체 선택 * console.dir(document); : document 의 속성 확인 document.body head title 은 중요한 속성이므로 언제든 불러올 수 있으나 나머지 요소들은 다음과 같이 선택해서 불어와야함. 선택 document.getElementBy (TagName , Id , Class..

if ... else 문 if (condition){ /// condition === true } else { /// condition === false } * else 는 선택사항 isNaN 함수 - NaN (Not-A-Number) 판별 const age = parseInt(prompt("How old are you?")); if (isNaN(age)) { console.log("Please write a number"); //true } else { //false console.log("All right!"); } else if - 조건문 추가 const age = parseInt(prompt("How old are you?")); if (isNaN(age)) { console.log("Please..

입력 함수 1️⃣ prompt() 2️⃣ confirm() 1. prompt(message, default) message : 입력 창에 띄울 메세지 default : 입력 부분의 기본 값 (string) const age = prompt("How old are you?"); console.log(age); - 오래된 기능이라 잘 쓰진 않음 - 문자열의 값을 반환하므로 숫자로 얻고 싶은 경우 타입 변환이 필요하다. typeof : 데이터 타입 반환하는 연산자 console.log(typeof 1); // "number" console.log(typeof "code"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefi..

❓why use Function? To encapsulate a piece of code function name(parameter1, parameter2) { } "Function 함수이름 () 순서" - () : 함수를 실행 시킴 - 키워드로 시작하며 객체이다. - 괄호()에는 쉼표(,)로 구분된 매개변수 이름이 포함 (parameter1, parameter2, ...) - {} : 함수에 의해 실행될 코드 - 함수 호출 선언 (매개변수 parameter) 호출 (전달인자 argument) - 함수 반환 return 명령문에 도달 시, 실행이 중지 var x = plus(4,3); //4, 3 -> argument function plus(a, b) { //a,b -> parameter return ..

데이터 타입 원시 타입 Number String Boolean null undefined symbol 객체 타입 object 1. Number(숫자) - 모든 숫자를 실수로 처리함 - 각종 연산 가능 (+, -, *, /, %) 2. String (문자열) - 문자열 길이와 상관없음 - ' ' & " " &` ` - 한 번 정의한 문자열은 변하지 않음 var str = 'hello'; str[0] = 'H'; console.log(str); //hello 2-1. 문자열+ 문자열 var str1= "hi"; var str2 = " nice to meet you"; var result = str1 + str2; console.log(result); //"hi nice to meet you" 2-2. 인덱스..