✅오늘의 과제 ➰챗봇에 타이핑 애니메이션 추가하기 ➰코드 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..
✅mongoDB 연결하기 이제 기존의 파일들을 mongoDB와 연결해보자. 먼저 mongoDB 사이트(https://www.mongodb.com/)에 들어가서 회원가입 후 로그인한다. The most popular database for modern apps We're the creators of MongoDB, the most popular database for modern apps, and MongoDB Atlas, the global cloud database on AWS, Azure, and GCP. Easily organize, use, and enrich data — in real time, anywhere. www.mongodb.com organization에서 설정한 후 왼쪽 projec..
✅node js란 ? 자바스크립트를 서버사이드에서도 쓸 수 있게 해주는 언어이다. ✅express.js란 ? node.js를 이용하여 웹사이트나 어플리케이션을 쉽게만들 수 있도록 도와주는 프레임워크이다. ✅node.js와 express.js 다운받고 사용하기 터미널에 node -v 쳤을 때 버전 나오면 설치된 것이다. 설치되지 않았다면 node.js사이트(https://nodejs.org/ko/)에 들어가서 다운로드를 받아준다. 이제 파일을 만들어보자. 터미널에서 npm init 명령어를 입력하고 계속 enter 누른다. package.json이 자동생성된다. 디렉토리 안에 앱의 시작점인 index.js 파일을 만든다. 터미널에서 npm install express --save 명령어를 입력한다. 💨"-..
✅오늘의 과제 ➰나만의 챗봇 만들기 ➰코드 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..
