✅오늘의 과제 ➰챗봇에 유동적인 기능 추가하기 ➰코드 day15.html 오늘 옷 뭐입지 ? 알아보기 day15.js let count= 0; let topText1; let topText2; let default_background = document.getElementById("body"); let context = document.getElementById("context"); let default_text = document.getElementById("cloth"); // let val = document.getElementById("input_text").value; let text_set = ["겨울이에요" + "" + "따뜻하게 입으세요 !", "봄, 가을이에요" + "" + "날씨 좋아요..
✅json이란 ? JSON(JavaScript Object Notation)은 속성-값 쌍 또는 키-값 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 형식이다. 예시는 다음과 같다. [ { topText1 : '오늘의 기온을 적어주세요', topText2 : '기온에 맞는 옷차림을 알려드릴게요' } ] 서버와 웹 클라이언트 사이에서 데이터를 주고 받을 때 주로 사용한다. ✅json 활용법 서버를 직접 구현하지 않을 것이기 때문에 json 형식의 코드를 이용하여 설명할 예정이다. 다음 코드를 보자. let json = [ { topText1 : '오늘의 기온을 적어주세요', topText2 : '기온에 맞는 옷차림을 알려드릴게요' } ]; json이라는 변..
✅오늘의 과제 ➰챗봇에 타이핑 애니메이션 추가하기 ➰코드 day14.html 오늘 옷 뭐입지 ? 알아보기 day14.js let count = 0; function input_check() { let context = document.getElementById("context"); let default_text = document.getElementById("cloth"); let default_background = document.getElementById("body"); let val = document.getElementById("input_text").value; if (val === "나 뭐입지?") { let typewriter = new Typewriter(context, { loop: t..
✅CDN이란 ? Content Delivery Network의 줄임말이며 지리적으로 분산된 여러 개의 서버이다. 이는 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높인다. CDN은 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 서버에 복제해둔다. 이렇게 하면 콘텐츠가 로딩될 때까지 기다릴 필요 없이 영화 감상, 소프트웨어 다운로드, 은행 잔고 확인, 소셜 미디어 포스팅, 구매 등의 작업을 할 수 있다. ➰CDN 사용법 원하는 기능을 검색하면 다양한 웹사이트에서 CDN링크를 제공한다. 아래의 사이트들이 이에 해당된다. https://cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easi..
✅오늘의 과제 ➰나만의 챗봇 만들기 ➰코드 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..
