본문 바로가기

Programming/Javascript

 (7)
[Javascript] application 만들기 3 (Random) QUOTES 배열에 명언을 저장해두고 랜덤하게 페이지에 보여주는 기능 만들기 DOCTYPE html> Momentum App quotes.js const quotes = [ { quote: "삶이 있는 한 희망은 있다", author: "키케로", }, { quote: "산다는것 그것은 치열한 전투이다", author: "로망로랑", }, { quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다", author: "사무엘존슨", }, { quote: "언제나 현재에 집중할수 있다면 행복할 것 이다", author: "파울로 코엘료", }, { quote: "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해", author: "찰리 채플린", }, { quote..
[Javascript] application 만들기 2 (CLOCK) Interval 매번 일어나는 일 setInterval 함수 setInterval(arg1, arg2) : arg1(실행하고자하는 function), arg2(호출되는 function 간격을 몇 ms으로 할지) ex) setInterval(sayHello, 5000); : 5초에 한번씩 sayHello 함수를 호출 Timeouts and Dates setTimeout 함수 setTimeout(arg1, arg2) : arg1(실행할 function), arg2(얼마나 기다릴지 ms) ex) setTimeout(sayHello, 5000); : 5초후에 sayHello 함수를 한번만 호출 일요일 : 0 DOCTYPE html> Momentum App clock.js const clock = document..
[Javascript] application 만들기 1 (LOGIN) Input Values DOCTYPE html> Momentum App Log in const loginForm = document.getElementById("login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); //const loginInput = document.querySelector("#login-form input"); //const loginButton = document.querySelector("#login-form button"); - 사용자 입력 값 유효성 검사 (js) const loginInput = document.q..
[Javascript] 기초 4 (event, CSS) Event const title = document.querySelector("div.hello:first-child h1"); function handleTitleClick(){ console.log("title was clicked!"); } title.addEventListener("click" , handleTitleClick); // event를 listen 하는 방법 // HTMLelement.addEventListener("listen할 event이름", event가 발생하면 호출할 함수); const title = document.querySelector("div.hello:first-child h1"); function handleTitleClick(){ title.style.color ..
[Javascript] 기초 3 (HTML element 접근) Javascript를 통해 HTML에 접근, 읽기, 수정이 가능함 document 객체 getElementById() : HTML에서 id를 통해 element를 찾아주는 함수 const title = document.getElementById("title"); DOCTYPE html> Momentum grab me! const title = document.getElementById("title"); console.dir(title); - getElementsByClassName() : 많은 element를 가져올 때 사용, array로 반환됨 const hellos = document.getElementsByClassName("hello"); console.log(hellos); //HTMLColle..
[Javascript] 기초 2 (함수, 조건문) 함수 function - 계속 사용할 수 있는 코드 조각 - 코드들 캡슐화해서 실행을 여러 번 할 수 있게 해줌 function sayHello(){ console.log("hello!"); } sayHello(); sayHello(); sayHello(); 인수 argument - 함수를 실행하는 동안 어떤 정보를 함수에게 보낼 수 있는 방법 function sayHello(nameOfPerson){ console.log(nameOfPerson); } sayHello("kk1"); sayHello("kk2"); sayHello("kk3"); function sayHello(nameOfPerson, age){ console.log("Hello my name is " + nameOfPerson + " an..
[Javascript] 기초 1 (데이터 타입, 변수, 배열, 객체) 데이터 타입(Data Types) 1. Number - 정수(Integer) // 1, 2, 3 ... - 실수(float) // 1.5, 1.222 ... 1 + 1.5 // 2.5 2. String 문자(text)로 구성, 싱글쿼터 or 더블쿼터로 묶어서 표현 "Hello " + "Thank you" // Hello Thank you 'Hello' + 'hi' //Hellohi 3. Booleans true false 4. null const amIFat = null; - 아무것도 없음, 비어있음 파이썬은 True, False, None 5. undefined let something; - 정의되지 않음 변수가 메모리할당은 되었으나 값이 채워지지 않은 상태 변수(Variables) const a = ..

티스토리툴바