김숭늉 마음대로

안녕하세요. 김숭늉입니다. 자바스크립트, javascript if else, control structure(컨트롤 스트럭쳐)에 대해 알아보겠습니다. 자바스크립트 조건문 (javascript conditional statements) - if 자바스크립트 조건문은 if statement 라고도 합니다. 작성한 코드의 조건에 따라 참과, 거짓을 판별하고 그 결과에 따라 조건문을 실행하게 됩니다. 간단한 예제로 알아보겠습니다. const age = 19; const isOldEnough = age >= 18; // true if (isOldEnough) { // 괄호안에 참일때 실행됨 console.log("Sarah can star drinving license! 🚗"); } isOldEnough 변수는 ..

안녕하세요. 김숭늉입니다. let, const, var의 차이점에 대해 간단하게 알아보겠습니다. let, const, var의 차이점 let : 빈 변수를 선언할수 있고, 변수값을 재 할당 할수 있습니다. const : 변수값을 재 할당할수 없으며 빈변수를 선언할수 없습니다. 변수값을 바꾸면 버그가 생기는경우에 사용합니다. var : 옛날 정의 방식으로 let이랑 거의 비슷하지만 지금은 거의 사용하지 않습니다. let age = 30; // 빈 변수를 선언할수 있음 age = 31; // 변수값 재 할당 가능(reassign the variable) const birthYear = 1991; // 빈변수를 선언할수 없음 , 변수값을 바꾸면 버그가 생기는 경우 birthYear = 1990; var job..

자바스크립트의 Data type에 대해 알아 보겠습니다. Data type의 Value(값)은 object(객체) 혹은 primitive data(원시 데이터) 둘중 하나 입니다. primitive data(원시 데이터)의 종류는 뭐가 있을까? 1. 숫자(number) let age = 23; let PI = 3.1415; // 파이 처럼 변하지 않는 숫자인경우는 변수명을 대문자로 사용함 (관례적 약속) 2. 글자 (string) let firstname = 'seung' 3. 불리언 (Boolean) - true or false 4. undefined - 변수를 선언했을때 (빈값임) //undifined let year; // 빈 변수 console.log(year); // undifined conso..

안녕하세요. 오늘도 김숭늉입니다. 이번글에서는 시차효과(Parallax effect)에 대해 알아보겠습니다. 그럼 바로 본론으로 레쓰고~ 시차효과(Parallax effect)효과 란? Parallax는 천문학에서 사용되는 단어인데요, 멀리있는 물체는 상대적으로 천천히 움직이게되고, 더 가까운 물체는 빨리 움직이는 현상을 의미합니다. 이런 현상을 이용하여 웹사이트를 디자인 한다면 좀더 동적인 느낌이 있도록 디자인을 할수 있습니다. 그럼 시차효과를 웹사이트에 적용하려면? 아주아주 간단한 방법이 있습니다. 바로 simpleparallax.com에 접속한후 코드를 복붙해주시면 됩니다! 너무 쉽죠? 아래 url을 클릭해주셔요! https://simpleparallax.com/ simpleParallax.js -..

안녕하세요 김숭늉 입니다 :) 그럼 바로 알아보겠습니다! 먼저 첫번째로는 dom을 사용하여 button 요소중 [0]번째를 가지고온후 이벤트 리스너를 추가해줍니다. 이벤트 리스너는 click시 alert가 노출되는 function을 추가하였습니다 :) document.getElementsByTagName("button")[0].addEventListener("click", function(){ /// 0번째의 버튼에 적용 alert("클릭하셨네요? You got clicked!"); }) 위 코드를 실행하면 아래와 같이 button의 0번째의 버튼을 클릭하면 아래와 같은 alert 창이 생성 됩니다. 그다음은 방금 작성한 문장을 for 루프로 넣어서 버튼의 갯수만큼 루프가 돌아갈수 있도록 설정합니다! :..

자바스크립트 이벤트리스너의 기존구조 안녕하세요~ 자바스크립트의 이벤트리스너의 기본 구조에 대하여 알아 보겠습니다 ! document.getElementById("names").addEventListener("click", function(){ // 이 안에 function에 대한 내용을 작성함 }) 위의 이벤트리스너 기본구조를 풀어서 설명 하였습니다. 아래는 마우스 클릭시 이벤트 리스너를 통해 해당 names를 보여주지 않는 방법입니다. document.getElementById("names").addEventListener("click", function(){ // click을 하였을때 document.getElementById("alert").style.display = 'none'; // style..

DOM과 자바스크립트를 활용하여 2인 랜덤 주사위 굴리는 페이지 만들어 보겠습니다. 플레이어1과 플레이어2가 각각 랜덤주사위를 굴려 누가 승자인지 페이지에 노출시켜주면 되는 과제 입니다. 위 페이지는 랜덤주사위를 굴리기 첫 시작 페이지입니다. 상단에 으로 문구가 작성되어있고, Player 1과 Player 2의 주사위가 각각 h1문구 하단에 위치해 있습니다. 지금 위 상태는 js파일과 아래의 주사위 이미지 파일이 html 문서에 연결되어있지 않은 상태입니다. (아무런 액션을 취하지 않은 상태의 페이지에서는 각 주사위는 6이 고정으로 보이도록 합니다.) 먼저, dicee.html에 미리 만들어둔 자바스크립트 문서(index.js)와 이미지소스를 html 문서에 연결 시키는 간단한 작업부터 시작합니다. Re..

안녕하세요 💕 오늘은 피보나치 수열에 대해 알아보면서 자바스크립트 for 루프에 대해서도 함께 알아보겠습니다. 피보나치 수열은 각 항이 바로 앞의 두 항의 합으로 이루어진 수열을 말합니다. 예를들어 [0, 1] 이면 그다음에 올 숫자는 0과 1를 더해서 [0,1,1]이 되고 그다음에 올 숫자는 1과 1를 더해 [0,1,1,2]가 됩니다. 이러한 방식으로 점차적으로 더해나가다 보면 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 등등으로 숫자가 점점 커지게 됩니다! 피보나치 수열에 for 문을 사용하여 자동으로 계산되도록 코드를 작성 하겠습니다. 처음 두 항은 0과 1로 시작해볼게요! if 문을 통해 첫번째 두번째까지 배열을 작성해줍니다. 이후 세번째 숫자 이상부터는 for 문을 통해 작성 하였습..

안녕하세요 💕 이번글에서는 자바스크립트 while에 대해서 알아보겠습니다. while의 경우 조건이 false가 될때까지 무한정 계속 실행이 되는 무한 루프의 개념입니다. var i = 1; while(i = 0) { // 0이 될때까지 while 문을 돌림 var bottleWord = "bottles"; // 맥주가 여러개이면 복수 if (numberOfBottles === 1) { // 맥주가 1개이면 단수 bottleWord = "bottle"; } console.log(numberOfBottles + " " + bottleWord + " of beer on the wall"); console.log(numberOfBottles + " " + bottleWord + " of beer,"); con..

안녕하세요. 이번에는 자바스크립트에서 점심값은 누가 낼까?에 대한 문제를 풀어보겠습니다 ^^ names(배열)의 최대길이를 length함수로 뽑아내고 Math.random의 최대값(배열길이)을 곱한후, Math.floor를 통해 뒷자리는 버린후 랜덤으로 숫자를 뽑아 내게 됩니다. 그럼 코드를 작성 해볼까요? function whosPaying(names) { // names에 names 리스트를 넣음 var numberOfPeople = names.length; // 5 리스트에 작성된 이름만큼의 갯수 var randomPersonPosition = Math.floor(Math.random() * numberOfPeople); // 0-4 / Math.random()*최대값설정 var randomPers..