(방울)도마토의 개발일지

1. Math - 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 내장 객체(함수 객체 X) Math.random() : 난수 생성 float로 반환함 Math.randon() * 10 → 0 에서 10 사이 (10 포함 X)의 난수 생성 - int 부분만 가져오는 3가지 방법 1) round() : 반올림 2) ceil() : 올림 3) floor() : 내림 // in HTML // ========================================================================================== const quotes = [ { quote: "The greatest glory in living lies not in never falling, b..

Java Script 2023. 10. 18. 14:49

1. setIntervals(funcName, timeDelay) - 특정 시간 마다 반복적으로 함수를 시행함 - repeatedly calls a function or executes a code snippet, with a fixed time delay between each call (in mdn) - time delay는 ms 단위로 적어줌 const clock = document.querySelector("h2#clock") function sayHello() { console.log("Hello"); } setInterval(sayHello, 5000); // 5초마다 'sayHello' 함수를 호출함 2. setTimeout(funcName, timeDelay) - 시간을 설정하여 지정된 함..

Java Script 2023. 10. 18. 13:43

04. form 화면 없애고 user에게 입력받아 완성된 h1 띄우기 ** 문자열 합치기 1. "string " + variableName 2. `string ${variableName}` - 반드시 백틱(``)으로 감싸야 함! //in CSS .hidden { display: none; } ================================================= //in HTML const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting");..

Java Script 2023. 10. 10. 16:25

01. input에서 받는 입력 값을 제어하는 방법 1-1. JS에서 function을 통해 제어하기 function onLoginBtnClick() { const username = loginInput.value; // username에 값이 없거나 너무 긴 경우 (in JS) if (username === ""){ alert("Please write your name"); } else if (username.length > 15) { alert("Your name is too long"); } } 1-2. HTML에서 input의 속성값을 변경하기 // input이 form 안에 포함되어야 함 Log In/button> 02. - 서버의 폼 핸들러(form handler)로 폼 데이터(form dat..

Java Script 2023. 10. 10. 15:37

04. CSS in JavaScript - Click event에 따라 글자색이 바뀌도록 하는 JS code const h1 = document.querySelector(".hello:first-child h1"); function handleTitleClick() { const currentColor = h1.style.color; // getter, 현재 h1의 color 값을 받아오는 변수 let newColor; // setter, 변수에 새로이 대입된 색상 값을 h1.style.color에 최종적으로 할당하는 역할 if(currentColor === "blue") { newColor = "tomato"; } else { newColor = "blue" } h1.style.color = newCo..

Java Script 2023. 10. 7. 01:32

03. Events - event : 사용자가 입력을 하거나, enter를 누르는 등의 행위 -> JS는 모든 event를 listen 할 수 있음 * addEventListener() : JS에서 event를 listen할 수 있게 하는 함수 - 무슨 event를 listen할 것인지 알려줘야 함 - removeEventListener를 통해 event listener 제거 가능 const title = document.querySelector(".hello h1"); function handleTitleClick() { console.log("title was clicked"); } title.addEventListener("click", handleTitleClick) // 사용자가 title을 c..

Java Script 2023. 10. 7. 00:30

01. JavaScript를 사용하는 이유 - HTML과 상호작용하기 위해서 -> HTML의 Element를 JS를 통해 변경하고 읽을 수 있음 * Browser의 핵심 object : document - JS는 HTML document 객체로부터 title이란 요소를 가지고 올 수 있음 (document.title -> "Momentum") -> JS는 HTML에 접근하고 읽을 수 있게 설정되어 있음 * object 의 properities는 변경 가능함 -> JS에서는 어떻게? - JS에서도 변경 가능! (새로고침하면 다시 되돌아감 Hello -> Momentum) 02. The way to access elements in HTML from JavaScript 1. getElementById("Id..

Java Script 2023. 10. 6. 23:24

1. const and let const : 상수(constant) let : 변수(variable), 변수를 처음 생성할 때만 작성 → const를 기본으로 사용하고, 이후 variable를 업데이트 해야하는 상황에는 let을 사용 let myName = "nico"; console.log("Hello " + myName) // Hello nico myName = "nicolas" console.log("Hello " + myName) // Hello nicolas const mySisterName = "benny" console.log("Hello " + mySisterName) // Hello benny mySisterName = "berry" console.log("Hello " + mySiste..

Java Script 2023. 9. 13. 09:10