코린이 공부장

Mouse Effect 다음 이미지처럼 마우스의 위치정보 불러오기, 선택자별 마우스효과를 만들어 보겠습니다. 코드블럭 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Failureis simply the opportunity to beginagain, this time more intelligently. 실패는 더 현명하게 다시 시도할 수 있는 기회일 뿐이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px lee3ll@naver.com 보충설명 이미지출처 clientX, clientY 브라우저에서 사용자에..

for문은 while문과는 달리 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문이다. 문법 for (초기식; 조건식; 증감식) { 조건식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문; } for in문 🎈반복문의 한 종류로, 주어진 iterable 객체의 모든 항목을 순서대로 반복하여 처리할 수 있도록 해주는 구문. 문법 for 변수 in iterable 객체: 객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문; 🎈 for in문은 일반적인 for문과는 전혀 다른 형태의 반복문이다. 🎈 for in문은 해당 객체의 모든 열거할 수 있는 프로퍼티를 순회할 수 있도록 해준다. 예제 결과값. name age for of문 for-of 문은 JavaScr..

01. 변수 : 데이터 불러오기 변수안에 저장된 데이터를 불러오는 방법입니다. { let x = 100, y=200, z="javascript"; console.log(x, y, z); } 결과값 100 200 javascript 02. 상수 : 데이터 불러오기 상수안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과값 100 200 javascript 03. 배열 : 데이터 불러오기 배열안에 저장된 데이터를 불러오는 방법입니다. { const arr = [100, 200, "javascript"]; console.log(arr[0], arr[1], arr[2]); } 결과값 100 200..

객체(object) 💡프로그래밍에서 객체는 데이터를 저장하고 처리하는 기본 단위이다. 실생활에서 사물을 정의하는 방법과 비슷하다. 예를들어 한 자동차를 정의하기 위해 제조사나 모델명, 색상, 배기량등의 자료와 같다. 키와값 배열(array)은 index 순서가 담긴 값을 자동으로 부여받아 저장된 데이터들이 순서를 가진다면 객체(object)는 순서없이 문자를 사용하여 key(키)와 value(값)이 저장된다. 객체를 만들 때는 ({ }) 중괄호를 사용하고, 중괄호 사이에 ' 키:값 '형식으로 필요한 프로퍼티를 나열한다. const obj = {key : value, key : value} 배열안에 객체 { const obj = [ {a:77, b:66}, {c:"xyxy"} ]; console.log(o..

여러가지 데이터 이펙트 📝1부터 100까지 출력하기 for(let i=1; i

데이터 제어하기 01. if문 { if(조건식){ document.write("실행되었습니다.(true)"); } else { document.write("실행되었습니다.(false)"); } } 결과 값: 실행되었습니다(false) 02. if문 생략 { const num = 100; if(num) document.write("실행되었습니다.(true)"); else document.write("실행되었습니다.(false)"); } 결과 값: 실행되었습니다(false) 03. 삼항 연산자 { const num = 100; if(num == 100){ document.write("true"); }else { document.write("false"); } (num == 100) ? document.wri..

예제 1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지 또는 0인지 판단해서 알림 참에 보여주는 프로그램을 작성해보기 function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); } else if (n < 0) { alert(`${n}은 음수입니다.`); } else { alert(`${n}은 0입니다.`); } } const number = parseInt(prompt('숫자를 입력하세요.')); // parseInt() 는 숫자가 아닐 경우 NaN을 반환함 if(!isNaN(number)) { // 숫자일 경우에만 실행 isPositive(number); } 예제2 2개의 숫자를 입력받아 두..

함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합이다. ✨01.선언적 함수 선언적함수는 함수를 호출할 함수의 앞 또는 뒤에서 호출 가능하다. function func(){ document.write("실행되었습니다."); } func(); //결과 값: 실행되었습니다. 변수나 함수를 선언하지 않고 호출하였을 때는에러가 발생해야 하는 것이 맞지만, var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않는다 이러한 자바스크립트 성질을 '끌어올리기 ' 호이스팅 이라고 한다. ✨02. 익명함수 const func = function (){ document.write("실행되었습니다."); } func(); //결과값: 실행되었습니다. 변수..

[ 01. 변수 : 데이터 저장 ] 변수는 데이터를 저장하는 저장소입니다. { var x = 100; //변수 x에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저장함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); } ▶결과값 100 200 javascript [02. 변수 : 데이터 저장 + 데이터 변경] 변수는 데이터를 저장할 수도 있지만 변경도 가능하다. { let x = 100; let y = 200; let z = "javascript"; x = 300; y = 200; z = "react"; console.log(x); console.l..

for문과 if문을 사용한 자바스크립트 예제 문제1) const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] 주어진 배열에서 10보다 큰 숫자만 찾아 화면에 표시하시오. const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] for(let i=0; i 10){ //배열 i가 10보다 클 때 document.write(arr[i]); } 문제2) 사용자에게 1보다 큰 수를 입력하게 한 후 입력한 숫자까지 짝수만 출력하고, 그 숫자까지 짝수만 더하는 프로그램을 작성하시오. let num = prompt("1보다 큰 숫자를 입력하세요."); //prompt는 브라우저에 들어왔을때 창을 띄어준다. let sum = 0; if(num !== null &..