JavaScript12 [JavaScript] Canvas API CANVAS API 📌 CANVAS API : Javascript로 그래픽을 그릴 수 있게 하는 API. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API Canvas API - Web APIs | MDN The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing. developer.mozilla.org CA.. 2022. 10. 24. [JavaScript] JavaScript와 CSS JavaScript와 CSS 📌 JavaScript와 CSS : JavaScript에서 CSS 수정 가능. 📄 h1을 클릭하면 텍스트가 green, tomato로 번갈아 색이 바뀌도록 하는 프로그램. 📄 index.html Hello! This is title 📄 style.css body { background-color: beige; } h1 { color: green; } .clicked { color: tomato; } 📄 app.js const title = document.querySelector("h1"); function handleTitleClick() { const clickedClass = "clicked"; if(title.className === clickedClass) { tit.. 2022. 10. 14. [JavaScript] Event Event 📌 Event : 입력을 끝내거나, 마우스로 클릭을 하거나 하는 등의 행위를 말함. 📌 .addEventListener() : 어떤 event를 listen하고 싶은지 설정, 💡 console.dir( [element] ) : 앞에 on이 붙은 것이 event. Event - click 📌 .addEventListener("click", [function] ) : 클릭할 경우, function 실행. 📄 h1을 클릭하면 텍스트가 보라색으로 변함. const title = document.querySelector("h1"); function handleTitleClick() { title.style.color = "purple"; } title.addEventListener("click", ha.. 2022. 10. 14. [JavaScript] document document 📌 document : HTML를 가리키는 객체. JavaScript에서 HTML에 접근 가능함. 📌 document의 속성을 가져올 수 있고, 변경할 수도 있음. 💡 console.dir() : element를 더 자세히 볼 수 있음. JavaScript에서 HTML에 접근하는 방법 - id 📌 document.getElementById( " [id] " ) : 해당 id의 element를 얻을 수 있음. const title = document.getElementById("title"); JavaScript에서 HTML에 접근하는 방법 - className 📌 document.getElementsByClassName( " [className] " ) : 해당 class name의 el.. 2022. 10. 14. [JavaScript] conditional conditional 📌 if문 : if문이 true일 경우, if문 중괄호 영역 실행. else if 문이 true일 경우, else if문 중괄호 영역 실행. 위의 모든 if, else if문이 false일 경우, else문 중괄호 영역 실행. if( [조건문] ) { [실행문]; } else if ( [조건문] ) { [실행문]; } else { [실행문]; } 💡 and(&&) T F T T F F F F 💡 or(||) T F T T T F T F 📄 나이 입력받은 후 술을 마셔도 되는 나이인지 확인하는 프로그램. const age = parseInt(prompt("age? : ")); if(isNaN(age)) { console.log("Please write a number"); } else.. 2022. 10. 13. [JavaScript] prompt와 형 변환 prompt 📌 prompt( [message], [default] ) : 사용자에게 message를 보여주고 값을 입력 받음. 입력을 받을 때까지 자바 스크립트 실행을 멈춤. 예전에 사용하던 방식으로, 요즘에는 html이나 css를 통해 값을 받음. 💡 typeof [변수명] : 변수의 타입 확인 가능. 형 변환 📌 형 변환 : 자료형을 변경하는 것. 📌 parseInt( [string] ) : string을 int로 변경해줌. 숫자가 아닌 경우, NaN을 반환함. 💡 isNaN( ) : NaN인지 확인 후 true 또는 false 반환. NaN은 Not a Number을 의미. 2022. 10. 13. [JavaScript] function function 📌 function : 어떤 기능을 캡슐화해 반복해서 사용할 수 있게 하는 것. 인자는 생략할 수 있고, 여러개를 사용할 수도 있음. function [함수명]( [인자] ) { [실행문] } 📄 더하기 function. function sum(a, b) { console.log(a + " + " + b + " = " + (a + b)); } sum(1, 10); sum(2, 20); sum(3, 30); 📌 object 안에서 function 사용 가능. 📄 'player' object 안에 'sayHello' function 생성. const player = { name: "jin", age: 23, sayHello: function(name) { console.log("Hi! " +.. 2022. 10. 13. [JavaScript] Object Object 📌 Object : 여러 변수를 담을 수 있는 자료형. const [객체명] = { [변수명]: [값], [변수명]: [값], ... } 📌 .xxx 로 object 안의 변수에 접근 가능. 📌 .push( ) : 값 추가. 📄 app.js const player = { name: "jin", age: 23, phone: "010-1234-5678" } console.log(player); // {name: 'jin', age: 23, phone: '010-1234-5678'} console.log(player.name); // jin player.name = "j"; console.log(player); // {name: 'j', age: 23, phone: '010-1234-5678'} .. 2022. 10. 12. 이전 1 2 다음
