반응형 자바스크립트10 자바스크립트 canvas 배경 채우기 기능 추가 / recFill() 활용 / recFill(x, y, width, height) / javas 그림판의 필수 기능인 배경 채우기. recFill로 만들 수 있다. 버튼을 추가해 선 드로잉 모드 / 배경 채우기 모드 두가지를 선택할 수 있게했고 원하는 색상으로 배경이 채워진다. index.html 추가된 버튼 태그. 딱 이 한줄 추가되었다. Fill index.html의 전체코드 Fill app.js 추가된 코드 const modeBtn = document.getElementById("mode-btn"); /** 선그리기, 배경채우기 변경 버튼 지정 */ let isFilling = false; /** 선그리기, 배경채우기 / false에서 true값으로 변경시킬 것이므로 let */ function onclickMode(){ /** 선그리기, 배경채우기 - isFilling이 참이면 거짓으로 만들.. 2022. 11. 7. 자바스크립트로 크리스마스 디데이 계산기 / Date, setInterval, Math.floor 함수 작업포인트 ( 사용된 내장 함수 ) new Date Date 타입의 새로운 객체를 생성. 인수를 생략하면 현재 날짜 및 시간을 나타내는 객체가 생성되고 인수를 전달하면 인수에 따라 Date 객체가 생성된다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date setInterval(사용할 함수명, 실행 간격) 2개의 인수를 받는다. 하나는 실행할 함수와 실행 간격. 간격은 밀리초로 입력한다. 1초는 1000으로 표기한다. https://developer.mozilla.org/en-US/docs/Web/API/setInterval Math.floor() 내림함수 : 받은 숫자와 같거나 작은 정수의 .. 2022. 5. 23. querySelector VS getElementById 차이점 / #4.0 Login input Values / 자바스크립트 파일에서 html의 id가 login-form인 특정 요소를 찾을 때 (id는 임의로 login-form이라고 지었음, id는 자기가 알아서 맘대로 지으면 된다. apple, banana ... 등등) querySelector 사용 const loginForm = document.querySeletcor("#login-form"); querySelector는 class name과 id 모두 검색이 가능하므로 두 가지를 구분되게 표시해줘야함. id는 값 앞에 # 표시 필요. getElementById 사용 const loginForm = document.getElementById("login-form"); id 값만 찾을 수 있다는걸 자바스크립트가 잘 알고 있으므로 그냥 id 값을 괄호 안에 .. 2022. 5. 18. Node.js 설치, 버전 확인하는 방법 / LTS, Current 의미 / Node.js 란 Node js 설치하는 방법 1. nodejs.org 들어간다. https://nodejs.org/ (클릭) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 두개의 녹색 버튼 중 Recommended For Most Users 버튼 클릭하여 다운로드 받는다. (사용하는 버전은 vscode의 터미널에 node -v 치면 알 수 있다.) * LTS 와 Current 차이 왼쪽 LTS는 Long Term Support. 오른쪽 Current는 최신 기능을 탑재한 버전이다. 최신기능은 어떤 건 작동하지 않을 수도 있다. 본인이 사용할 패키지들이 새로운 node js버전에 맞게 업데이트가 되.. 2022. 4. 8. #5 [2021 UPDATE] CLOCK #5.0 Intervals interval은 매번 일어나야 하는 무언가를 의미한다. 매 2초마다 무슨일이 일어나길 원할 때 사용. 이미 자바스크립트에 내장되어 있음 setInterval() 두개의 argument를 받는다. 첫째는 내가 실행하고자 하는 function 함수. 두번째는 function을 몇ms 간격으로 할지 5000ms = 5s(5초) function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); 5초마다 콘솔에 hello가 나타난다. ========================== #5.1 Timeouts and Dates function을 딱 한번 호출하는데, 일정 시간이 흐른 뒤에 호출하는 것. setInterva.. 2022. 3. 30. 객체/비구조화 할당 어떠한 값을 선언하게 될 때, 하나의 이름에 여러 종류의 값을 넣을 수 있게 함 const dogName = '멍멍이'; const dogAge = 2; console.log(dogName); ----------출력 : 멍멍이 console.log(dogAge); ----------출력 : 2 => 객체로 변경. 코드블록 아님. 키 : 값 으로 이루어져 있음 const dog = { name : '멍멍이' age : 2 cute : true simple : {a:1, b:2} } console.log(dog.name); ----------출력 : 멍멍이 console.log(dog.age); ----------출력 : 2 const ironMan = { name : '토니 스타크' actor : '로버트.. 2020. 7. 13. ES6 화살표 함수 const add = (a, b) => { return a + b; } => {} 중괄호와 retrun 생략 가능 const add = (a, b) => a + b; const hello = (name) => { console.log ('Hello, ${name}!'); } hello('j'); ----------출력 : Hello, j! 2020. 7. 13. 함수 특정 코드를 하나의 명령어로 실행할 수 있게 해주는 기능. 파라미터(인풋) -> 함수 -> 결과 function add (a, b) { return a + b; } const sum = add (1, 2); console.log(sum); ----------출력 : 3 function hell (name) { console.log ('Hello' + name + '!'); } hello('j'); ----------출력 : Hello j! ES6 : ECMAScript 6. 자바스크립트의 버전으로 2015년에 도입. ES2015라 부르기도 함 function hell (name) { console.log(`Hello ${naem} !`); } hello ('j'); ----------출력 : Hello .. 2020. 7. 13. 자바스크립트 논리연산자 (! && ||) 논리연산자에는 not, and, or 이라는 세가지 종류가 있다. 계산 우선순위는 다음과 같다. NOT(!) -- AND(&&) -- OR(||) NOT은 true를 false로, false를 true로 변경해준다. const a = !true; console.log(a); --------- 결과값은 false const b = !false; console.log(b); --------- 결과값은 true AND는 양쪽의 값이 모두 true 일때만 결과값이 true const a = true && true; console.log(a); --------- 결과값은 true const b = false && true; console.log(b); --------- 결과값은 false const c = fal.. 2020. 7. 11. 이전 1 2 다음 반응형
