자바스크립트7 [TIL] 호이스팅(hoisting)이란? 변수와 함수 선언이 해당 범위의 최상위로 끌어올려지는 동작을 말한다. 자바스크립트는 실행 전 한번 훑어보기 때문에 변수와 함수 선언이 먼저 처리되는 것이다.이처럼 끌어올려진 것처럼 동작하여 호이스팅이라고 한다. 변수 호이스팅변수 호이스팅은 변수를 선언하는 var 키워드를 사용할 때 발생한다. var로 선언된 변수는 코드의 최상위로 호이스팅되지만, 초기화는 호이스팅되지 않는다. 따라서 변수 선언은 최상위로 올라가지만, 변수 값은 실제 할당 지점에서 초기화된다. console.log(x); // undefinedvar x = 5;console.log(x); // 5 위 코드에서는 var x 선언이 호이스팅되어 최상위로 이동하지만, 초기값 할당(x = 5)은 원래 위치에 남아 있다. 따라서 첫 번째 conso.. 2024. 5. 17. [TIL] 자바스크립트 버튼 클릭 시 이벤트 주기 버튼 클릭 시 텍스트를 바꾸는 코드다.//생략 안녕하세요! 클릭 html문서에는 위에처럼 작성하고 document.querySelector('.btn').addEventListener("click", () => { document.querySelector('.title').textContent = "Hello!";}) js 파일에는 위에처럼 작성한다. 여기서 document.querySelector()는 html문서에 있는 class="btn"를 스크립트로 가져올 수 있다.그래서 addEventListener("click", () => {})로 클릭 이벤트를 넣어주고 document.querySelector()로 다시 html 문서에 class="title"를 불러와서textContent를 붙여.. 2024. 5. 13. [TIL] 내배캠_영화소개페이지(3)_리뷰 수정 기능 구현하기 localStorage.getItem()으로 리뷰 작성했던 key를 가져온다.각 영화마다 리뷰를 달 수 있도록 구별하기 위해 key에 영화 api의 id를 넣어둔 상태이므로해당하는 영화의 id값과 같다면 filter()로 반환한다.그리고 수정하고자 하는 리뷰의 작성시간이 같다면 findIndex()로 반환하고(한 영화에 댓글이 많을 때 비밀번호가 같을 수도 있으므로 수정하고자 하는 댓글의 time값을 비교했다.)조건문으로 비밀번호 일치 여부에 따라 수정 처리 해준다.그후 setItem()으로 저장한 후 다시 loadComments()하여 출력한다. function editComment(index) { const comments = JSON.parse(localStorage.getItem("comment.. 2024. 5. 10. [TIL] 내배캠_영화소개페이지(1)_localStorage 사용하기 localStorage란?데이터를 브라우저에 저장할 수 있는 저장소이다. 저장된 key와 값은 항상 문자당 2바이트를 사용하는 UTF-16 문자열 형식이다. 객체와 마찬가지로 정수 key도 자동으로 문자열로 변환한다.그래서 localStorage에 저장하려면 객체를 문자열화 시키기 위해 JSON.stringify()를 써야하고저장한 값을 사용하기 위해서는 JSON.parse()를 사용하여 객체화시켜서 가져와야 한다.localStorage를 사용하는 이유는 db와 같이 다른 서버 저장소에 이미 저장할 데이터가 많기 때문에비교적 중요도가 낮은 데이터들을 localStorage에 저장하면 기존 데이터 저장소의 공간을 더 확보 할 수 있기 때문이다.[참고 https://developer.mozilla.org/e.. 2024. 5. 8. [TIL] 대소문자 구분없이 검색 기능 구현하기 영화 리스트 중에서 제목을 검색하면해당 영화만 페이지에 나올 수 있도록 구현해봤다. 그런데 영화 제목에 대문자도 들어있다보니똑같이 대소문자를 구별하여 검색해야만 했고이는 사용자들에게 매우 불편함을 줄 것 같았다. 그래서 대소문자를 구별하지 않아도 검색이 가능한 코드를 짜봤다. //html에 들어갈 영화 카드 + 검색 값 세팅 function movieList(val = "") { movieCard.innerHTML = movieData.map((data) => { if(data.title.toLowerCase().includes(val.toLowerCase())) { return` //생략// `; .. 2024. 4. 29. [TIL] 자바스크립트 실수를 정수로 변환하기 위 문제를 풀기 위해 코드를 아래처럼 작성하니 예제 두번째가 틀린 값이 나왔다. 두번째 예제의 결과 값은 3을 원했는데 3.5가 나왔으므로 실수를 정수로 변환해야겠다고 생각했다.실수를 정수로 변환하는 코드인 parseInt();로 바로 적용해주었다. 2024. 4. 25. [TIL] 자바스크립트 버튼 클릭 시 alert창 띄우기 HTML문서 안에 를 넣고 onclick="내가설정한 함수이름"을 넣어준다. 검색 스크립트파일 안에는 아래와 같이 함수를 선언하면 완료! function btn() { alert("안녕하세요"); } 2024. 4. 24. 이전 1 다음
