취업 준비 시절/Javascript 56

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

- 오늘은 객관식 문제를 풀 수 있는 사이트를 만들어 보겠습니다. - 바로 코드로 넘어가 보도록하죠 Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 정답입니다! 틀렸습니다! 정답 확인하기 im.kebab00@gmail.com - 먼저 HTML부분에 달라진 부분이 있습니다. 바로 ,,태그들을 이용해서 선택할 상자들을 만들어 주었습니다. - 태그의 type에 button,checkbox등의 속성을 넣으면 원하는 방식으로 데이터를 입력받을 수 있습니다. - 그리고 id는 다르게 했지만 name은 같은 값을 주어 4개 중에 하나만 선택이 가능하도록 만들어 주었습니다. - value는 눌렀을 때 입력되는 데이터를 JavaScript 등의 스크립트에서 수집하거나 서버로 전송하는 등의 작업에 사용됩니다. - ..

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를 짤 때 규격에(?) 맞춰서 짠다면 코드의 재활용이 가능하다는 점입니다. - 덕분에 저희는 달라지는 요소들만 바꾸면 된다는 것이죠!! - 출력과 숨기기는 어제 했으니 오늘은 사용자의 정답을 받아와서 정답을 ..