✅오늘의 과제 ➰나만의 챗봇 만들기 ➰코드 day13.html 오늘 옷 뭐입지 ? 알아보기 day13.js let count = 0; function input_check() { let default_text = document.getElementById("cloth"); let default_background = document.getElementById("body"); let val = document.getElementById("input_text").value; console.log(val); if (val
✅오늘의 과제 ➰ style 변경 기능을 통해 다양한 디자인 적용하기 ➰코드 day12.html 오늘 옷 뭐입지 ? 도씨 알아보기 day12.js function input_check() { let default_text = document.getElementById("cloth"); let default_background = document.getElementById("body"); let val = document.getElementById("input_text").value; if (val
✅오늘의 과제 ➰사용자의 입력을 받아 특정 텍스트가 들어왔을 때, 자신이 출력하거나 바꾸고 싶은 요소들을 console.log()로 출력하기 ➰코드 day11.html 오늘 옷 뭐입지 ? 도씨 알아보기 day11.js function input_check() { let val = document.getElementById("input_text").value; if (val
✅오늘의 과제 ➰전화 걸기 버튼을 누르면 2초 뒤에 이름과 전화번호 출력하기 ➰코드 day10.html 📞 김만두 010-1234-5678 day10.js function btnclicked() { document.getElementById('number').style.display = "none"; document.getElementById('btn').style.display = "none"; document.getElementById('name').style.display = "block"; document.getElementById('phoneNum').style.display = "block"; } function call() { setTimeout("btnclicked()", 2000); } ..
✅이벤트란 ? 웹 상에서 일어나는 어떤 사건을 의미한다. 이벤트 핸들러를 원하는 함수에 연결하여 이벤트 발생 시 실행하게 만들 수 있다. 이 과정이 바로 이벤트 생성이다. ➰이벤트 핸들러 (이벤트 리스너) 등록 방법 1 - 인라인 방식 이벤트를 HTML요소의 속성으로 직접 지정하는 방식이다. 예시는 다음과 같다. 클릭해주세요 위 코드는 HTML코드에 자바스크립트(Javascript)를 추가하는 것이기 때문에 유지보수의 관점에서 좋지 않다. ➰이벤트 핸들러 (이벤트 리스너) 등록 방법 2 - 프로퍼티 방식 자바스크립트(Javascript)코드에 프로퍼티로 등록하여 사용하는 방식이다. 예시는 다음과 같다. 클릭해주세요 이 방식을 이용하면 하나의 이벤트 핸들러 프로퍼티에는 하나의 이벤트 핸들러만 바인딩 가능하..
✅오늘의 과제 ➰좋아하는 영화 정리하기 ➰코드 day9.html 인생영화 리스트 추가 삭제 확인 day9.js let movies; let list = []; let movie; let all = document.getElementById('mvlist'); function add() { movies = prompt("영화제목, 개봉연도, 장르를 입력하세요").split(','); list.push({ name: movies[0], year: movies[1], genre: movies[2] }); } function del() { movie = prompt("영화제목을 입력하세요"); for (let i = 0; i < list.length; i++) { if (movie === list[i].name..
✅객체란 ? 자바스크립트(Javascript)내에 존재하는 타입 중에 하나이며 자바스크립트(Javascript)를 이루고 있는 거의 모든 것은 객체이다. 객체는 기본적으로 key과 value의 쌍으로 구성된 여러 프로퍼티를 하나의 변수에 저장할 수 있도록 하는 데이터 타입을 말한다. 예를 들어 "만두"라는 객체가 있다고 가정하고 만두의 프로퍼티 1)mandoooo.name = "만두" 만두의 프로퍼티 2)mandoooo.age = 21 만두의 프로퍼티 3)mandoooo.job = "학생" 이를 코드로 구현하면 다음과 같다. let mandoooo = { name : "만두", age : 21, job : "학생" } 이렇게 객체는 중괄호 안에 key와 value값을 적어 구현할 수 있다. ➰객체의 프로..
✅오늘의 과제 ➰전광판 만들기 - 전광판 글씨 누르면 글자 하나씩 늘어나게 하기 ➰코드 day8.html 전광판 버튼을 클릭하세요! 전광판 버튼 day8.js let name = document.getElementById("nickName"); let mando = ["만", "만두", "만두야 ", "만두야 코", "만두야 코딩", "만두야 코딩하", "만두야 코딩하자"]; let count = 0; function buttonClicked() { name.innerHTML= mando[0]; } function nameClicked() { count++; if (count >= 7) { count %= 7; } name.innerHTML= mando[count]; } 코드 설명 전광판에 뜨는 글씨를 ..
✅함수란 ? 특정 작업을 수행하는 명령어들의 모음을 의미한다. 쉽게 말해서 코드 덩어리이다. 함수는 코드의 재사용성을 높여주기 위해 사용한다. 예를 들어 어떤 기능을 하는 100줄의 코드가 있다고 해보자. 그 코드를 함수로 만들지 않는다면 그 기능을 사용하는 부분마다 100줄의 코드를 작성해야 할 것이다. 그렇게 되면 코드의 가독성이 떨어지고 불필요한 메모리 사용량이 많아진다. 따라서 함수를 사용하는 것이다. Javascript의 함수는 다른 언어에서와는 달리 하나의 타입으로 정의되기 때문에 변수에 대입하는 것이 가능하다. ➰함수의 정의 function키워드를 붙여서 선언한다. 함수는 함수 이름, 매개변수, 실행문을 가지고 있다. 함수 선언 코드는 아래와 같이 작성한다. function 함수 이름(매개변..
✅오늘의 과제 ➰반복문과 조건문을 이용하여 간단한 스톱워치 만들기 ➰코드 day7.html 🕐 00:00:00 🕐 day7.js let times = document.getElementById("timer"); let hour = 0; let min = 0; let sec = 0; let stopWatch; function setting() { hour = parseInt(hour); min = parseInt(min); sec = parseInt(sec); sec += 1; if (sec === 60) { min += 1; sec = 0; } if (min === 60) { hour += 1; min = 0; sec = 0; } if (hour < 10 || hour === 0) { hour = "0"..
