Cute Blinking Unicorn

프론트엔드/JavaScript 19

11/15 클론코딩 시작전 기초 연습

https://www.google.com/search?q=%EB%8B%A8%EC%9C%84%EB%B3%80%ED%99%98&oq=%EB%8B%A8%EC%9C%84%EB%B3%80%ED%99%98&gs_lcrp=EgZjaHJvbWUyDwgAEEUYORiDARixAxiABDIHCAEQABiABDIHCAIQABiABDIMCAMQABgUGIcCGIAEMgcIBBAAGIAEMgcIBRAAGIAEMgcIBhAAGIAEMgcIBxAAGIAEMgcICBAAGIAEMgcICRAAGIAE0gEIMjQ2NmowajeoAgCwAgA&sourceid=chrome&ie=UTF-8 🔎 단위변환: Google 검색 www.google.com 단위 변환 하는 것을 확인하면서 한번 확인 해보기~! (수업시작) inch를 cm로 바꾸기 ..

자바스크립트 객체 관련 활용한 날 (마지막 수업! 공부화이팅)

저번 시간 수업 복습 웹브라우저에 이벤트라는 개념이 도입되면서 동적으로 더 활용하게 됐다고 보면 된다. 브라우저에서 웹페이지를 불러오는 것. 어떤 링크를 클릭하는 것. ㄴ 이런 것들을 이벤트라고 할 수 있는데 사용자가 웹문서를 이렇게 벗어나서 브라우저의 제목 표시줄을 클릭한다. 이거는 이벤트가 아니다. 웹페이지안에서 일어나는 모든 동작들을 이벤트라고 표현할 수 있지만 모든 것들이 다 이벤트가 되는 것은 아니다. 마우스나 키보드를 사용 웹페이지 불러오거나 폼에다가 내용 입력하는 것들을 이벤트라고 보면 된다. 이벤트를 가장 빠르게 하는 것 태그 on 이벤트명 = 함수명 이게 이벤트를 처리하는 방법이라고 보면 되고 DOM을 이용한 이벤트 처리한 방법도 해봤다. 웹요소.on이벤트명 = 함수 오늘 수업 시간 웹요..

이미지클릭시

DOCTYPE html> Document #result { width: 500px; height: 300px; margin: 30px auto; border: 2px solid red; border-radius: 15px; } Box! js const boxEl = document.querySelector(".box"); console.log(boxEl); boxEl.addEventListener("click", function () { console.log("click"); }); let imgMsg = document.querySelector("#img"); imgMsg.onclick = function () { alert("이미지를 클릭했습니다."); }; 이미지 클릭시 이렇게 뜬다. let img..

이벤트(events), DOM(script 위치, defer속성이용), 콜백함수(addEventListener)

events 웹 페이지 또는 앱에서 사용자 상호 작용을 감지하고 처리하기 위한 중요한 개념입니다. 이벤트는 사용자의 행동(예: 클릭, 마우스 이동, 키보드 입력 등) 또는 브라우저 또는 웹 페이지 자체에서 발생할 수 있는 것들(예: 페이지 로드, 리사이징, 네트워크 요청 완료 등)을 나타냅니다. align-items/content는 부모 요소의 자식들 전체를 묶어서 정렬을 해주는 반면, 부모 요소의 자식 아이템들을 각각 다른 방식으로 정렬하고 싶다면 (정렬을 개별로 설정하고 싶다면) align-self를 사용한다. 출처: https://letsgojieun.tistory.com/49 [고지은고:티스토리] ul { display: inline-block; align-content: flex-start; /..

매개변수, 인수, 익명함수, 기명함수, 자기호출함수, 화살표함수

1. 매개변수(Parameters): 매개변수는 함수 또는 메서드를 정의할 때 함수가 받을 입력 값을 나타내는 변수입니다. 함수를 정의할 때 매개변수를 선언하며, 함수 내에서 이 매개변수를 사용하여 작업을 수행할 수 있습니다. 매개변수는 함수의 정의부분에서 변수 이름을 지정하며, 함수를 호출할 때 전달할 값을 받는 역할을 합니다. function greet(name) { console.log("Hello, " + name + "!"); } 위의 코드에서 name은 함수 greet의 매개변수입니다. 2. 인수(Arguments): 인수는 함수를 호출할 때 함수에 전달되는 실제 값 또는 데이터를 나타냅니다. 함수를 호출할 때, 함수의 매개변수에 해당 인수가 전달되어 함수 내부에서 사용됩니다. 함수를 호출할 ..

함수를 사용하는 이유?

함수 > 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) function 한번만 사용하는 게 아닌 여러번 반복하기 위해서 이런 함수를 사용한다. 이런 함수는 재사용이 가능하다. 자바스크립트 여러번 사용하고 싶다 > 함수는 어떤 코드를 재사용 정의: 선언: function 함수이름() { 실행할 문장 넣기 } 다 만들어놓은 함수를 호출해야한다. // let num1 = 2; // let num2 = 3; // let sum = num1 + num2; // document.write("두수의 합은" + sum); // 위에는 그냥 코딩한 거라면 진짜 함수는 사용하는 것은? function addNumber() { let num1 = 2; let num2 = 5; let sum = num1 + num2;..

실습(태어난 해 입력하기)

const year = Number(prompt("태어난 해를 입력하세요 (YYYY)")); const e = year % 12; let result; if (year == " ") { alert("데이터를 입력하지 않았습니다."); } else { if (e == 0) { result = "원숭이"; } else if (e == 1) { result = "닭"; } else if (e == 2) { result = "개"; } else if (e == 3) { result = "돼지"; } else if (e == 4) { result = "쥐"; } else if (e == 5) { result = "소"; } else if (e == 6) { result = "호랑이"; } else if (e ==..

실습(if로 통해 짝수 홀수 및 숫자 입력)

숫자를 입력받아서 홀수와 짝수를 구분하는 코드를 작성해보시오. 1. 숫자를 입력 받는 것 2. 입력받은 문자를 숫자로 변환 3. 숫자를 2로 나누기(나머지) 4. 나머지가 0이면 '짝수' 그렇지 않으면 '홀수'라고 출력 // const number = prompt("숫자를 입력하세요"); // const num = Number(number); const num = Number(prompt("숫자를 입력하세요")); if (num % 2 == 0) { alert("짝수입니다."); } else { alert("홀수입니다."); } const num = Number(prompt("숫자를 입력하세요")); 이렇게 줄여서 해도 된다. 주석 건 곳은 내가 한 곳 10월 30일날 했던 숫자 입력받는 alert를 사..