본문 바로가기
728x90
반응형
colors[Math.floor(Math.random() * colors.length)];랜덤값 출력하기 colors[Math.floor(Math.random() * colors.length)]; 2023. 6. 18.
삼항 연산자 ternary 함수 실행 true 판정: 문자열, 0이외의 숫자 등 false 판정: '', 0, null, undefined if(5 2023. 6. 17.
Array 배열 배열의 추가, 삭제 push, pop, shift, unshift, splice let arr = [1, 2, 3, 4, 5]; 1. 배열의 뒤에 추가, 삭제 arr.push() 배열의 맨 뒤에 요소를 넣는다. arr.push(6); console.log(arr); //[1, 2, 3, 4, 5, 6] arr.push(7,8); console.log(arr);//[1, 2, 3, 4, 5, 6,7,8] arr.pop() 배열의 맨 뒤의 요소를 하나만 삭제한다. let el =arr.pop(); console.log(arr, el);//[1, 2, 3, 4, 5, 6, 7] 8let arr =[1,2,3,4,5]; 2. 배열의 앞에 추가, 삭제 shift의 리턴값 => 빼낸 값 arr.unshift() 배.. 2023. 6. 15.
JavaScript 란? Mocha→Livescript→JavaScript JavasScript 문법 JavasScript의 실행문은 세미콜론(;)으로 구분된다. var x = 10; var result = x + 3 JavasScript는 대소문자를 구분한다. 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용해야 한다. var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨. var JavaScript = 20; 리터럴(literal) 리터럴은 직접 표현되는 값 그 자체를 의미한다. 다음 예제에서 등장하는 값들은 모두 리터럴이다. 12 // 숫자 리터럴 "JavaScript" // 문자열 리터럴 '안녕하세요' // 문.. 2023. 6. 15.
JavaScript 출력 JavaScript 출력 자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있다. 자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같다. window.alert() 메소드 HTML DOM 요소를 이용한 innerHTML 프로퍼티 document.write() 메소드 console.log() 메소드 window.alert() 메소드 자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법은 window.alert() 메소드를 이용하는 것이다. window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해 준다. window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있다. HTML DOM 요소를 이용한 i.. 2023. 6. 14.
Javascript 규칙 javascript 문 기본 형태 세미콜론은 생략 가능하지만 쓰는 것이 안전하다! alert('Hello'); //주석의 시작은 슬래쉬 두개 /*여러 줄 할 떄는 이렇게! */ 변수 변수란? 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다. 첫 글자는 숫자가 될 수 없다. 카멜규칙 ex)mouseOver let message; message = 'Hello!'; message = 'World!'; // 값이 변경되었습니다. alert(message); let Hello = 'Hello world!'; let message; // Hello의 'Hello world' 값을 message에 복사합니다. message = Hello; //.. 2023. 6. 14.
Operator 연산자 String conatenation console.log('my' + 'cat'); //my cat console.log('1' + '2'); //12 console.log(`string literals: 1 + 2 = ${1 + 2}`); //string literals: 1 + 2 = 3 Numeric operators console.log(1 + 1); console.log(1 - 1); console.log(1 * 1); console.log(1 / 1); console.log(5 % 2); //remainder 나머지 값 1 console.log(2 ** 3); //제곱 8 Increment 증가 연산자 /감소도 같은 방식 let counter = 2; const preIncrement = ++.. 2023. 4. 24.
Data Type data type let name = 'sulki'; console.log(name);//sulki name = 'hello'; console.log(name);//hello {let name = 'sulki'; console.log(name);//sulki name = 'hello'; console.log(name);//hello} console.log(name);//출력되지 않음 global variable 전역변수는 블록(컬리브라켓 안)에서도 호출되고 밖에서도 호출되나 local 지역변수는 블록 안에서만 가능하다. 전역변수는 최소한으로 설정 let VS var 변수(mutable data type) read & write var은 유연하지만 문법이 붕괴되어 있어 let을 사용하기를 권장 hoisti.. 2023. 4. 24.
Return const easyCalcualtor = { plus : function (a, b){return(a + b);}, minus : function (a, b) {return(a - b);}, multiply : function (a, b) {return(a * b);}, devide : function (a, b) {return(a / b);}, power : function (a, b) {return(a ** b);}, }; const plusResult = easyCalcualtor.plus(2,3); const minusResult = easyCalcualtor.minus(plusResult,3); const multiplyResult = easyCalcualtor.multiply(2,minusRe.. 2023. 4. 24.
CSS in JS CSS in JavaScript! const h1 = document.querySelector("h1") function handleTitleClick(){ const currentColor = h1.style.color; //currentColor는 getter로 최근 color값을 복사한다. let newColor; //setter, 변수에 대입된 값을 최종적으로 h1.style.color에 할당시킴 if (currentColor === "blue"){ newColor = "tomato"; } else{ newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click",handleTitleClick); click event 발생.. 2023. 4. 24.
Event Event 💡 웹브라우저에서 일어나는 사건 2023. 4. 24.
축약연산자 축약연산자 i = i + 1 => i++ i = i - 1 => i-- i = i + 2 => i += 2 i = i - 2 => i -= 2 sum = sum + i=>sum += i 2023. 4. 23.
date, setInterval, localStorage 윈도우창에 시계만들기 const clockContainer = document.querySelector(".js-clock"), // clockContainer는 도큐먼트 안의 js-clock클래스 clockTitle = clockContainer.querySelector("h1"); // clockTitle은 clockContainer 안의 h1 function getTime() { const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours}:${minutes}:${seconds}`.. 2023. 4. 14.
toggle const title = document.querySelector("#title"); //title id를 title이라고 변수 설정 const CLICKED_CLASS = "clicked"; //'clicked'라는 class명 변수 설정 function handleClick() { const hasClass = title.classList.contains(CLICKED_CLASS); //title에 class 리스트로 CLICKED_CLASS(=clicked 라는 class명 가지고 있을 때)일 때를 //변수 hasClass라고 한다 //다시 말해 hasClass는 clicked라는 클래스가 있을 때 if (hasClass === false) { //hasClass는 clicked라는 클래스가 없을 .. 2023. 4. 14.
Objects object는 property를 가진 데이터를 저장해주며, { } 를 사용한다. const player = { const player = { name : "tomato", color : "red", food : true }; console.log(player); property를 불러오는 방법은 2가지가 있다. console.log(player.name); => tomato console.log(player["name"]); => tomato 또한 property를 바꾸는 것은 가능하지만 선언된 object를 바꾸는 것은 불가능하다. const player = { name : "tomato", color : "red", food : true, }; console.log(player); player.col.. 2023. 4. 14.
Array Array는 variables 안에 list를 추가하는 것 데이터를 나열하기 위한 방법 중 하나. 항상 [ ] 안에 콤마(,)로 데이터들을 나열한다. 변수도 쓰일 수 있고, boolean, text, 숫자 등 데이터 정렬이 가능하다. ex) const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; //daysOfWeek이라는 변수 안에 배열 작성 console.log(daysOfWeek[5]); //5번째 인덱스는 =>fri daysOfWeek.push("sun"); //배열에 sun을 추가하면 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]; 2023. 4. 14.
addEventListener 활용하여 크기별로 글자 와 배경이 변하는 윈도우 창 만들기 const title = document.querySelector("h2"); // import "./styles.css"; const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"]; // /* ✅ The text of the title should change when the mouse is on top of it. ✅ The text of the title should change when the mouse is leaves it. ✅ When the window is resized the title should change. ✅ On right click the title should also change. ✅ The colors.. 2023. 4. 13.
728x90
반응형

티스토리툴바