취업 준비 시절/Javascript 56

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

- 자 오늘도 어제하던 것을 마저 해봅시다. - 오늘은 추가한 것들은 바로 omr과 문제보기의 value값을 통일시켜서 하나를 눌러도 양쪽에서 표시가나게 해주었고, 문제를 하나씩 풀 때마다 남은 문제의 수가 하나씩 줄어들게 해주었습니다. 그리고 창이 켜졌을 때 문제풀기 버튼을 띄워주는 것등을 하였습니다. - 추가된 코드를 같이 보시죠 기능사 시험 시작하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 200..

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

- 오늘도 퀴즈에 효과를 주는 사이트를 만들어 보았습니다. - 이번에 만든 퀴즈효과는 cbt 같은 느낌으로 만들었습니다. - 일단 html부분을 먼저 보겠습니다. 2020년 1회 정보처리기능사 기출문제 59분 10초 제출하기 수험자 : - 주석처리가 되어 있는 부분은 반복되는 부분들로 스크립트부분에서 반복문을 통해서 문제의 갯수만큼 반복시켜 줄 부분 이거나 계속 바뀌는 데이터로 스크립트를 통해 처리할 부분 입니다. - 크게 특별한 부분은 없습니다 스크립트를 보시죠 - push로 html를 넣어주고 정답을 가렸다가 나왔다가 하는 부분은 자주했던 부분이니 json파일을 불러오는 부분을 보겠습니다. let questionAll = []; const dataQuestion = () => { fetch("json..

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

- 오늘도 즐거운 금요일 쪽지시험의 날이 왔습니다. - 같이 보시죵 01. 결괏값을 작성하시오 { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } - 정답은 0 입니다. 02. 결괏값을 작성하시오 { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } - 전치연산자와 후치연산자를 계산하는 문제입니다. - 전치연산자(++a,++c)는 = 보다 먼저 계산이 되어 result값에 포함이 되지만 후치연산자(b++)는 나중에 계산되어 res..

Javascript를 공부해 봅시다! - 번외편. 예제를 풀어봅시다.3

오랜만에 하는 예제입니다!! 문제는 모던 자바스크립트 프로그래밍의 정석 고경희님의 책에서 가져왔습니다. 1번 문제 : 마우스를 사진 위에 올렸을 때 다른사진이 나오게 하는 문제입니다. - document.querySelector으로 img요소를 선택해 주었습니다. - 그 후 addEventListener에 mouseenter를 사용하여 마우스를 가져다 놓았을 때 함수가 실행되도록 하였습니다. - setAttribute를 사용하여 src라는 속성의 값을 원하는 속성값으로 바꾸어 주었습니다. - 원하는 속성 값을 바꾸고 싶은 이미지 파일의 경로로 설정해주면 됩니다. - 반대로 마우스가 사진을 벗어났을 때 는 mouseout를 사용해서 똑같이 만들어 주면 됩니다. 2번 문제 : 클릭하였을 때 nav가 나타나게..

JavascriptJavascript를 공부해 봅시다! 10. 문자열과 배열()

- 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열 유형을 자주 사용합니다. 원시 유형과 객체 앞에서 단순히 값만 가지고 있을 경우에는 '원시 유형'이고 프로퍼티와 메서드를 가지고 있을 때는 '객체' 라고 설명했습니다. 그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 이것이 어떻게 가능할까요? 문자열을 예로 들어 보겠습니다. 문자열을 만들 때 간단히 변수에 문자열을 할당한 후 Length라는 프로퍼티를 사용해보면 str 변수에 Length라는 프로퍼티를 정의하지 않았는데도 Iength 프로퍼티 를 사용할 수 있습니다. let str = "hello" str.length // 5 - 자바스크립트에서 number와 boolean, string 유형은 별도로 프로..

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

- 오늘은 퀴즈효과 6번째 입니다. - 문제를 풀 때 마다 정답과 해설이 나오며 다음문제로 넘어가기를 누르면 다음문제가 나오는 형식입니다. - 전체코드를 먼저 보고 스크립트 부분을 보겠습니다. Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 im.kebab00@gmail.com - 크게 달라진 부분은 많이 없습니다. 정답확인 부분이 다음문제 버튼으로 바뀐 정도가 있겠네요 - 큰 틀은 main안에 넣어두고 그외 안에 들어가는 부분은 innnerHTML를 통해서 넣어주었습니다. - 스크립트를 보시죠 - 저번처럼 배열안에 객체를 넣어 문제 정보를 저장하였습니다. - 그건 쉬운니까 생략하겠습니다. - 문제를 출력하는데 저번과 차이가 있습니다. - 저번에는 모든 ..