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

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

- 오늘도 금요일입니다. - 어김없이 있는 오답노트의 날 - 같이 보시죠 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } - 정답 : 함수가 실행되었습니다 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } - 정답 : 함수가 실행되었습니다 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } - 정답 : 73

Javascript를 이용한 사이트 만들기! - 퀴즈 효과 사이트 만들기03

- 자 오늘은 2번에 있는 문제들을 여러 개가 있는 사이트를 만들어 보겠습니다. - 완성본 입니다. - 기본적인 HTML태그들은 문제가 있는 태그인 가 3개로 늘어난 것 말고는 달라진 것이 없습니다. - 그래서 script부분만 보도록 하겠습니다. - 차이점이 보이시나요?? 여러 개를 만들 때 가장 큰 차이점은 바로 선택자를 만들 때 querySelector가 아닌 querySelectorAll을 사용한다는 점입니다. - 그렇기 때문에 선택자를 입력할 때도 몇 번째 선택자인지 "[]"안에 번호를 넣어서 선택을 해주어야 합니다.(가장 많이 한 실수 ㅎㅎ;;) - 선택자의 종류 자체는 2번과 같습니다!! 아!! 종목과 횟수가 나누어져 있던 것을 하나로 합쳐주었어요!! - 문제가 3가지이니까 내용도 3개 여야..

Javascript를 공부해 봅시다! 09. addEventListener()

- addEventListener는 자바스크립트에서 HTML 요소에 이벤트 리스너를 추가하는 메서드입니다. 이벤트 리스너는 특정 이벤트가 요소에서 발생할 때 실행되는 함수입니다. - 다음은 addEventListener를 사용하여 이벤트 리스너를 추가하는 기본 구문입니다. element.addEventListener(event, function, useCapture); - 구성 요소는 다음과 같습니다. element: 이벤트 리스너를 추가할 HTML 요소입니다. event: 이벤트 이름입니다. 예를 들어, "click", "mousemove", "keydown" 등이 될 수 있습니다. function: 이벤트가 발생할 때 실행할 함수입니다. useCapture: 선택적 매개변수로, 이벤트 캡처링을 사용할..

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

- 자 오늘도 금요일이라 시험을 보는 날이 되었습니다!! - 같이 문제를 보시고 제가 틀린문제를 같이 풀어보겠습니다. // 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } // 정답은 false // 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } // 정답은 12456 // 07. 결괏값을 작성하시오. { for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); } // 정답은 함수가 실행되었습니다 // 11. 결괏값을 작성..

Javascript를 이용한 사이트 만들기! - 퀴즈 효과 사이트 만들기02

- 자 오늘은 어제 만든 강아지가 정답을 맞추면 웃고 정답을 틀리면 우는 것을 만들어 보겠습니다. - 일단 완성본입니다!! - 이제 코드를 뜯어보도록하죠 - 사실 html과 CSS는 크게 달라진 점이 없기 때문에 오늘도 자바스크립트에 집중하도록 하겠습니다. - 설명부분과 우측상단에 문제번호가 추가된 것 말고는 내용 상에는 변한게 없습니다. - 일단 기본적인 부분은(번호를 넣거나 문제를 넣는 내용적인 부분들) 어제 것과 같기 때문에 설명을 생략하겠습니다. - 이게 사소해 보이지만 중요한 것인데 html를 짤 때 규격에(?) 맞춰서 짠다면 코드의 재활용이 가능하다는 점입니다. - 덕분에 저희는 달라지는 요소들만 바꾸면 된다는 것이죠!! - 출력과 숨기기는 어제 했으니 오늘은 사용자의 정답을 받아와서 정답을 ..

Javascript를 이용한 사이트 만들기! - 퀴즈 효과 사이트 만들기01

- 위의 사이트처럼 정답확인을 누르면 답이 나오는 사이트를 만들어 봅시다.!! - 그 후 나중에 정답을 맞추었을 땐 강아지가 웃고, 틀렸을 땐 지금 처럼 울게 만들어 보는 것도 해보겠습니다. Quiz 정답 확인하기 유형 . 정답 확인하기 imkebab00@gmail.com - Javascript 포스팅 이니 중요한건 script부분이죠! - 사실 body부분이나 css같은 이미지는 다른 곳에서 쉽게 가져올 수 있습니다. - 스크립트 부분 입니다! 처음보는 것들도 있고 눈에 익은 것들도 조금 있네요!! - 일단 querySelector 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. - 예를들어 document.qu..