Bomb Kirby Running

JavaScript 3

자바스크립트 이벤트 문제연습

문제 연습 1 이미지가 마우스 오버를 했을 때 첫번째 이미지에서 두번째 이미지가 나오는 소스를 작성해보세요. 마우스를 이미지 위에 올리면 이미지가 바뀝니다! HTML코드 마우스 오버 이미지 변경 script 먼저 선택자로 이미지 두 개를 각각 선택합니다. 그리고 처음에 두번째 이미지가 나타나지 않도록 스타일에 display = "none";을 주었습니다. 선택자로 이미지를 모두 선택하고 forEach문을 통해 마우스를 오버했을때 두번째 이미지가 나타나도록 첫번째 이미지를 display ="none"으로 가리고 두번째 이미지는 display = "block"을 주었습니다. 그리고 마우스가 빠졌을때 효과가 없는 원래의 이미지로 돌아가야 하므로 반대로 주었습니다 이렇게 하면 위와 같은 페이지가 완성됩니다. 문..

JAVASCRIPT 2023.03.30

자바스크립트 문자열 알아보기

문자열이란? 간단한 텍스트를 처리하기 위한 유형입니다. 에크마스크립트2015부터 문자열과 관련된 다양한 함수가 생겼습니다. 원시 유형과 객체 단순히 값만 가지고 있을 경우 '원시 유형'이고, 프로퍼티와 메서드를 가지고 있을 경우 '객체'입니다. 자바스크립트에서는 원시 유형이여도 프로퍼티와 메서드를 사용할 수 있습니다. let str = "hello" str.length//5 위와 같이 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용하면 str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. 문자열의 길이 length 프로퍼티 문자열의 길이를 찾을 때는 배열에서처럼 length 프로퍼티를 사용합니다. //기본형 문자열.length 문자열에서 문자..

JAVASCRIPT 2023.03.29

자바스크립트 퀴즈 이펙트 5

오늘은 저번에 만든 퀴즈 이펙트 4번처럼 객관식 유형을 선택할 수 있는 퀴즈 유형을 만들겁니다. 4번을 이용해서 오늘은 더 많은 문제를 선택할 수 있는 유형을 만들어보도록 하겠습니다. 코드 Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 5 1346zany@gmail.com 4번에 있는 코드 구성과 똑같으므로 4번을 그대로 가져왔습니다. 다만, 이번엔 여러 개의 퀴즈를 만들것이므로 main부분이 아닌 script에 퀴즈 정보들을 넣을 것 입니다. 그래서 quiz__wrap안에 있는 부분들은 모두 주석처리 해주었습니다. CSS 각각의 CSS를 참고해주세요. reset.css @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'..

JAVASCRIPT 2023.03.25