JudithHopps JudithHopps

2023.1.19.목 1. html, css 2. javascript 헤매는 과정 1. javascript 문제) a. 버튼을 클릭하면 아이콘이 두개가 뜸 b. 코드 let show_contents = document.querySelectorAll(".show_content"); let hide_contents = document.querySelectorAll(".hide_content"); // console.log(hide_contents) const btns = document.querySelectorAll(".question-btn"); btns.forEach(function(btn) { btn.addEventListener('click',function() { show_contents = doc..

2023.1.18(수) - html - css - javascript - 블로그 - github 코드 GitHub - JudithHopps/Vanilla-JS: 바닐라 자바스크립트로 작성한 토이 프로젝트 모음집입니다. (리뷰) 바닐라 자바스크립트로 작성한 토이 프로젝트 모음집입니다. (리뷰). Contribute to JudithHopps/Vanilla-JS development by creating an account on GitHub. github.com 전체 구조 1. html a. head style,javascript,view타입 설정 b. body title, num, btn 구조로 되어 있음 Counter 0 DECREASE RESET INCREASE 전체 구조 2. css a. 폰트 구글 ..

1. 가위바위보 문제 설명 가위는 2 바위는 0 보는 5로 표현합니다. 가위 바위 보를 내는 순서대로 나타낸 문자열 rsp가 매개변수로 주어질 때, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 return하도록 solution 함수를 완성해보세요. function solution(rsp) { var obj = { "0" : 5, "2" : 0, "5" : 2 } return rsp.split('').map(x => obj[x]).join('') } 객체는 obj[key] = value 라는 것을 이용해서 rsp를 split한 후 map 메소드를 이용하였다. 2. 인덱스 바꾸기 문제 설명 문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_st..

오늘의 목표 왼쪽 / 오른쪽 / 랜덤 버튼 클릭시 컨텐츠 전환 추가 1. html a. fontawesome 폰트에서 icon 추가 b. 버튼 (이전 / 다음 / 랜덤) 추가 random 2. css a. 버튼 (이전 / 다음 / 랜덤) css 추가 /* 버튼 */ .prev-btn, .next-btn { color: var(--color-main); font-size: 1.25rem; background: transparent; border-color: transparent; margin: 0 ; transition: var(--transition); cursor: pointer; } .prev-btn:hover, .next-btn:hover { color: var(--color-author); } ...

17. 생성자 함수에 의한 객체 생성 17.1 Object 생성자 함수 자바스크립트 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다. //RegExp const regExp = new RegExp(/a+b/i) console.log(typeOf regExp) // object 19. 프로토 타입 19.13 프로퍼티 존재 확인 in 연산자 for-in 문을 사용하면 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다. var person = { 'first-name': 'Ung-mo', 'last-name': 'Lee', gender: 'male' };..

2023.1.16 한 것 - html 코드 작성 - css 코드 작성 2023.1.17 - 블로그 수정 더보기 전체 구조 1. html a. 하나의 index.html로 설정한다. b. head 뷰포트 관련 정보를 적어두었다. title은 Book Review style은 외부 스타일 시트를 링크한다. javascript는 defer 명령어를 통해 head 부분에 첨부한다. c. body body는 main과 footer로 구성되어 있다. (header는 제외하였다.) main 태크 안에 section, article로 구성되어 있고 BEM(Block Element Modifier)을 사용하여 가독성 있는 이름을 이용했다. footer 태그 안에는 sr-only 클래스를 이용하여 스크린 리더를 이용하여 ..

[참고] 1.도서 http://www.yes24.com/Product/Goods/92742567 모던 자바스크립트 Deep Dive - YES24 『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드 www.yes24.com 2. 웹사이트 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com 자바스크립트의 특징 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 자바스크립트는 기존의 프로그래밍 언어에서 많은 영향을 받았다. 기본 ..

⭐ addEventListener - EventTarget의 기능 첫 번째 인자로 주어진 이름의 이벤트 발생시 두 번째 인자로 주어진 콜백함수 실행 👉 MDN 문서 보기 👉 이벤트 목록 MDN 문서 보기 click 이벤트 요소가 클릭되었을 때 document.querySelector('#button1') .addEventListener('click', () => { alert('ㅇㅇ 어서오고'); }); alert - 주어진 메시지로 알림 팝업 띄움 이벤트 객체 // ♻️ 새로고침 후 실행 document.querySelector('#button1') .addEventListener('click', (e) => { console.log(e); }); 프로토타입을 따라 올라가 볼 것 💡 이벤트 리스너에서의..