기초부터 시작하는 코딩/Javascript 55

Javascript를 공부해 봅시다! - 번외편. 오답노트를 해보자(6)

{ function func(begin, diff, n){ cnt = 1; ret = begin; while(0){ cnt += 1; ret *= diff; if(cnt == n) return ret; } return ret } console.log(func(1, 3, 4)); } - while문 안에 0 이 들어가 있어서 false 가 됩니다. - 그래서 실행이 안되는 것이죠 - 그래서 ret가 그냥 바로 출력이 됩니다. - 정답은 1이죠 { let x = 1; console.log( !(x>0) ); console.log( x>0 || x

Javascript를 이용한 사이트 만들기! - 게임 효과 사이트 만들기02

- 오늘은 저번에 했던 게임 이펙트 입니다. - 이번에는 음악 플레이어를 만들어 주었습니다. - 버튼을 누르면 다음곡,이전곡,재생이 되게 해주었고 원하는 시간 대로 이동할 수 있도록 바에 효과를 주었습니다. - 추가된 코드를 보시죠 - 자바 스크립트만 보시죠 const allMusic = [ { name : "1.Deck The Halls - DJ Williams", artist : "몰루", img: "music_view01", audio: "music_audio01" }, { name : "2.Dove Love - Quincas Moreira", artist : "dd", img: "music_view02", audio: "music_audio02" }, { name : "3.Frightmare - ..

Javascript를 이용한 사이트 만들기! - 게임 효과 사이트 만들기01

- 오늘은 게임 이펙트 입니다. - 뭐 특별한게 있다기 보다는 움직이는 이미지(?) 배경에 넣어주고 - 파일들 드래그가 가능하게 해주었습니다. - 배경은 특별한 css파일을 넣었습니다. - 그리고 파일들을 클릭했을 때 헤더부분의 배경이 변하며 어떠한 아이콘을 선택하고 있는지 알려주는 문구를 띄웠고 - 현재시간을 알려주는 시계와 현재 스크린의 크기를 알려주는 문구를 만들어 주었습니다. - 코드를 보시죠 KEBAB's GAME WORLD 2023년 4월 24일 16시 40분 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재---아이콘를선택하였습니다. 현재 맥 를사용하고 있으며, 화면 크기는 1920*1080 입니다. - 막 특별한 것은 없습니다. - jquery와 gsap또한 사용하였기 때문에 링크를 긇어 왔..

Javascript를 공부해 봅시다! 11. 문자열 메서드

- 자 오늘은 수많은 메서드들 중에 문자열과 관련된 문자열들 중에서 10개만!! 골라서 해보겠습니다. - 10개지만 2시간 반이 걸린... 개당 15분 실화냐?? 가슴이 웅장해진다. - 한번 보시죠 01. at() "문자열".at([위치값]) - at()메서드는 위치값(인덱스 값)을 받아 해당되는 자리의 요소를 반환합니다. - 배열과 같이 0부터 첫번째 자리의 요소를 반환하며 -1은 마지막 자리의 요소부터 시작합니다. { "javascript reference".at(0); //j "javascript reference".at(1); //a "javascript reference".at(-1); //e "javascript reference".at(-3); //n } 02. charAt() "문자열".c..

Javascript를 이용한 사이트 만들기! - 패럴랙스 효과사이트 만들기02

- 오늘은 어제 한 패럴랙스효과를 사용해서 저희 반 소개 라고 하기엔 빈약하지만 소개 페이지를 만들었습니다. - 만드는데 하루종일 걸렸습니다... - 코드입니다. Hello World Web's 2023 Class 2023.02.13 Start! Keep up the good work. 2023.03.10 첫 회식 2023.04월 조별과제1 2023.04월 조별과제2 - 패럴랙스 효과는 스크롤링에 따라 배경 이미지를 움직여 깊이감을 연출하는 효과입니다. - 스크룰의 위치에 따라 요소들에게 효과를 주는 것이죠 - 위치를 바꾼다거나 빙글뱅글 돌린다거나 투명도를 조정한다거나 크기를 바꾸는 등의 효과와 스크롤의 위치를 조합해서 에니메이션 같은 효과를 줄 수 있습니다. - "data-" 뒤에 있는 숫자는 스크룰 ..

Javascript를 이용한 사이트 만들기! - 패럴랙스 효과사이트 만들기01

- 오늘 할 것은 패럴랙스 효과입니다. - 패럴랙스 효과란 페이지를 스크롤 했을 때 현재 보여지는 화면에 해당되는 좌표값을 가져온 다음 좌표값에 따라 이미지에 효과를 주는 방식입니다. - 그러려면 가장 중요한 것은 기준에 따른 좌표값을 가져오는 것인데 해당 블로그에서는 현재 Y좌표값과 각 사진의 Y좌표값을 구해보았습니다 - 스크립트를 보시죠 - window.addEventListener에 scroll를 주어 스크롤를 했을 때 함수가 실행되게 해주었습니다. 그리고 가장 먼저한 일은 좌표값을 저장한 것입니다. - 그리고 그걸 .scroll 에 있는 span 태그에 저장해 주었습니다. - document.querySelector(".info .offset1").innerText = document.getEle..