Front-End/3. JavaScript 실전

좋아요 기능을 만들어 보다. 👍0 좋아요 싫어요 좋아요 +1, 싫어요 -1 (음수가 될 순 없음) 함수 만들기 👍0 좋아요 싫어요 const like = () => { // 좋아요를 눌렀을 때 작동되는 함수 let num = document.getElementById("number") // HTML의 number아이디를 가진 요소 가져오기 number = parseInt(num.innerText) // 가져온 요소의 텍스트를 정수화 console.log(num) // 제대로 가져왔는지 확인 코드 console.log(number) number++ // 누를 때마다 +1 num.innerText = number // HTML의 요소의 텍스트만 수정하기 } const hate = () => { // 싫어요를..

특정 요소에 원하는 이벤트를 적용하는 방법을 배우다. h1태그 컨텐츠 직접 작성 핸들러용 버튼 리스너용 버튼 이벤트 객체용 버튼 Case 1) HTML태그에 직접 함수의 이름을 명시 직접 작성 // 단점 : 하나의 요소 당, 하나의 이벤트만 처리 가능, 함수명이 노출 전 글에서 사용했던 방식. Case 2) 이벤트 핸들러 eventHandler // Case 2. 이벤트 핸들러 // "핸들러용 버튼"을 클릭했을 때, popUp 함수를 호출 // 단점: 하나의 이벤트만 처리 가능하다. 2개를 해도 하나만 뜸, 1:1 이벤트 처리 let btn1 = document.getElementById("btn_han") console.log("btn1 : ", btn1) // 잘 가져왔나 확인 btn1.onclick..

DOM을 활용한 예제 클릭 한번 해볼까요? h1 태그 생성 a 태그 생성 ul 태그 생성 /* 누른 버튼에 따라 각각 다른 값들이 id가 box인 div안에 누적되도록 만약 => h1Btn => h1입니다. => aBtn => Google로 이동 => ulBtn => 마라탕 */ let box = document.getElementById("box") 버튼을 누를 때마다 div 태그 안에 각 태그를 넣으려고 한다. 그렇다면 일단 HTML의 div 요소를 가져와야 한다. 앞에서 배웠듯이 document.getElementById("box")를 box 변수에 넣어준다. const ckh1Btn = () => { console.log("h1 btn"); box.innerHTML += "h1입니다." } con..

자바스크립트의 꽃, DOM을 배우다. 안녕하세요 p태그1 p태그2 새로운 정보인 DOM을 배우다. 내가 이해하기 위해 생각한 DOM을 사용하는 이유는 바로 이거다. 우리는 지금 HTML과 JS를 함께 사용하고 있다. 그 두 개는 어딘가 연관되어야 하는데 그 둘의 다리 역할을 해주는 게 바로 DOM이다. 솔직히 프리트레이닝 기간에 DOM을 배울 때는 이해가 1도 안 됐는데, 왜 쓰는지를 생각하고 실습도 해 보고 이해하려고 노력해서 이해했다. HTML에 접근하기 위해서 노드의 개념도 이해해야한다. 최상위 노드인 문서노드에 접근하기 위해 // 1 - 1) id가 text인 요소를 가져오기 // - document. // - getElementById let h1Tag = document.getElementBy..

배운 객체를 가지고 좋아하는 포켓몬 3마리 소개하다. 새롭게 배운 점 객체의 속성값으로 이미지 주소를 넣으면 이미지를 띄울 수 있다. -> 배열의 요소로 객체를 사용해서 인덱스 번호로 반복문을 사용해서 이미지도 반복문에 추가할 수 있다.

새로운 자료형, 객체를 배우다. 내 주관적인 생각에 객체에서 기억해야 될 것은 2가지다. 객체의 요소에 접근하는 방법과 신문법. 객체의 요소에 접근하는 방법은 2가지가 있는데 ( .key이름 )을 사용하거나 [ key이름]를 사용하거나. 객체이름.key이름 객체이름[key이름] 객체와 배열은 서로가 서로의 요소가 될 수 있다. 그때 요소에 접근하는 방법도 하던대로 해주면 된다. 바깥에서부터 안으로 하나씩 접근.. 신문법은 알고있으면 안좋을 거 없는 방법이다. 코드가 직관성있기 때문에 보기 편하다.

가짜 햄버거를 만들어보다. 🍔 1. 햄버거 만드는 기본 함수 /* Step 1. 1 - 1. 햄버거를 제작하는 함수. makeBurger 화살표 함수 이용하기 1 - 2. 햄버거 함수 호출하면 문서에 빵 깔기, 토마토 올리기, 패티 올리기, 빵 닫기 1 - 3 햄버거의 가격 5000원 반환 */ const makeBurger = (burger) => { document.write("빵 깔기 " + "토마토 올리기 " + `${burger}패티 올리기 ` + "빵 닫기 " + `${burger}버거 완성 `) return 5000 } 함수 선언문을 function을 사용해서 선언할 수도 있지만 지금부터는 const를 사용해서 함수 선언을 해야 한다. 왜냐하면 const를 쓰지 않으면 함수이름을 사용해서 변..

소수를 구별하고 범위 내의 소수를 출력하는 함수를 만들다. 1. 소수 판별 함수 function primeNumber(num) { let count = 0; for (i = 1; i