[JS] 로또 추첨

실행결과 미리 보기목표목표1. DOM 요소 개념 복습 DOM 요소 선택 (document.getElementById, document.querySelector) DOM 요소의 내용 변경 (innerHTML, textContent) DOM 요소에 스타일 동적 적용 (classList.add, classList.remove) 새로운 DOM 요소 생성 및 추가 (document.createElement, appendChild) 2. 배열의 순회 및 조작 익히기  추가 목표1. '추첨' 버튼을 클릭 시 1부터 45까지의 숫자가 중복 없이 랜덤 하게 표시됩니다.2. 추첨으로 나온 숫자는 숫자의 구역에 따라 공 색이 다르게 표시됩니다.3. '다시' 버튼으로 로또번호를 새로 reset 합니다.4. '랜덤으로 번호 얻..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 30.
• textsms

[JS] 실습예제

상황 별 Event 실행하기1. 모든 기능은 superEventHandler={} 안에 작성하기2. 구현해야 할 기능: 마우스 우 클릭/ 마우스 떠날 때/ 마우스가 있을 때/ 창 크기 변경할 때  객체 안에 함수 넣기// 1. 이름이 지정된 function 함수const myObj = { myMethod(params) { // ...do something here },}// 2. 익명 함수를 사용함const myObj = { myMethod: (params) => { // ...do something here },}// 3. ES6 이전 스타일const myObj = { myMethod: function myMethod(params) { // ...do something here..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 26.
• textsms

[JS] 데이터 타입

요약모던 자바스크립트 Deep Deive : 6장 데이터 타입자바스크립트는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시타입과 객체타입으로 분류할 수 있다.기본형(원시 타입, Primitive Type)  / 참조형(Reference Type) : 객체(Object) Primitive Type은 값이 담긴 주소값을 바로 복제하는 반면,Reference Type은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제한다.    01. 숫자타입 (Number)자바스크립트는 독특하게 정수, 실수 모두 하나의 숫자타입으로만 존재한다.모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.var integer = 10;..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 24.
• textsms

[JS] 변수

요약모던 자바스크립트 Deep Deive : 4장 변수   변수 (Variable)하나의 값을 저장하기 위해 메모리에서 확보(allocate)한 공간아래의 코드처럼 10+20을 계산한다고 할때 10과 20은 각 메모리셀로 저장됩니다.(메모리를 구성하는 메모리 셀은 1byte의 크기로 2진수로 저장됨)10 + 20; CPU는 10과 20의 메모리 주소를 읽은 후, + 연산을 하여 30 의 값을 도출해내고 그 값을 임의의 메모리 주소에 저장하게 됩니다. 30의 값을 사용할때는 메모리 주소인 0x0669F913에 접근하면 된다But!  자바스크립트는 메모리 주소를 통해 값에 접근하는 기능을 제공 안해준다 => 메모리 주소에 접근하는 것은 치명적 오류를 발생시킬 ..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 24.
• textsms

[JS] 크리스마스 카운트다운

Today's목표1. 실시간으로 날짜, 시간 반영하기2. 현재 시간, 남은 D-day 표기하기추가 목표1. background에 눈내리는 애니메이션 추가2. 크리스마스는 올해 크리스마스를 기준으로 년도 자동으로 받아오기  코드리뷰01. Main Until Christmas Current time Christmas 🎄Christmas D-Day🎄  @import url(https://fonts.googleapis.com/css?family=Press+Start+2P); * { margin: 0; padding: 0; box-sizing: border-box;}html, body { h..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 24.
• textsms

[JS] 간단 회원가입 Form 만들기

실행 결과 미리 보기 Today's목표1. 회원가입 완료시 유저에게 보여줄 환영인사 메시지 구현하기2. input 요소에 입력된 value를 다루기추가  목표1. 모든 항목은 필수 입력 항목이어야 한다2. submit 이벤트가 발생했을 때 새로고침이 일어나지 않아야 한다  코드리뷰01. Main 회원가입 이름* 이메일 *로그인 시 아이디로 사용합니다. 생년월일* 성..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 24.
• textsms

[JS] 몬스터 잡기 게임

실행 결과 미리 보기 Today's목표1. DOM 메서드를 사용하여 새로운 노드를 생성하고 부모 노드에 포함하기2. 사용자에게 데미지값을 prompt로 입력받아 과정/결과 출력3. 데미지를 양의 정수로 입력 안 할 시, 게임 강제종료 추가 목표1. Player 와 Monster 정보는 객체로 넣기 2. Player 와 Monster의 공격에 명중률을 넣어 공격이 실패하는 조건문 넣기  코드리뷰01. Main 몬스터잡기게임⚔  02. Player,Monster 객체 정보//플레이어 정보 const player={ hp: 100, attackDamage: Number(prompt('1회 공격시 데미지는 얼마 인가요?(양의 정수로 입력하세요)')), //..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 23.
• textsms