본문 바로가기
반응형

전체 글166

자바스크립트 쪽지 시험(6) 자바스크립트 쪽지 시험(6) 길라잡이 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 복습 느낌의 시험입니다!! 1. 다음의 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 답 확인하기 0 2. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } 답 확인하기 20, 21 3. 다음의 결괏값을 작성하시오. { function func.. 2023. 3. 31.
자바스크립트 이벤트 마무리 문제(2) 자바스크립트 이벤트 마무리 문제(2) 책 : 모던 자바스크립트 프로그래밍의 정석 221페이지 참고 마무리 문제 2 이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어 보겠습니다. 메뉴 아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제를 만들 것입니다. 버튼을 클릭할 때마다 변수와 메뉴에 .active 스타일을 토글하는 소스를 작성해 보세요. 길라잡이 버튼과 메뉴를 가져와서 각각 변수로 저장합니다. 버튼에 click 이벤트가 발생했을 때 실행할 함수를 연결하는데, 이 함수에서는 버튼과 메뉴에 active 클래스 스타일을 토글합니다. 코드 보기 / 완성화면 코드 블럭 📋 Javascript Typerscript Node.js 구성 body 태그에 button 태그와 nav 태그.. 2023. 3. 30.
자바스크립트 이벤트 마무리 문제(1) 자바스크립트 이벤트 마무리 문제(1) 책 : 모던 자바스크립트 프로그래밍의 정석 220페이지 참고 마무리 문제 1 문서에는 하나의 이미지가 삽입되어 있습니다. 이 이미지의 위에 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌었다가 이미지에서 마우스 포인터를 다른 곳으로 이동하면 다시 원래의 이미지로 바뀌는 소스를 작석해 보세요. 길라잡이 문서에서 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결한 후 이미지를 가져와서 변수에 저장합니다. 마우스 포인터를 이미지의 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다. 이벤트가 발생했을 때 이미지의 src 속성값을 바꿉니다. 코드 보기 / 완성화.. 2023. 3. 30.
자바스크립트 문자열 자바스크립트 문자열 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열 유형을 자주 사용합니다. 원시 유형과 객체 단순히 값만 가지고 있을 경우에는 '원시 유형'이고 프로퍼티와 메서드를 가지고 있을 때는 '객체'입니다. 그런데 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 자바스크립트에서 number와 blooean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어져 있습니다. 이를 '래퍼 객체'라고 합니다. number나 boolean, string과 같은 원시 유형에서 프로퍼티나 메서드를사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 .. 2023. 3. 29.
사이트 만들기(미디어 쿼리) 사이트 만들기(미디어 쿼리) 이미지 유형 : https://dongjin6539.tistory.com/28 카드 유형 : https://dongjin6539.tistory.com/31 텍스트 유형 : https://dongjin6539.tistory.com/35 이미지/텍스트 유형 : https://dongjin6539.tistory.com/39 슬라이드 유형 : https://dongjin6539.tistory.com/40 헤더 유형 : https://dongjin6539.tistory.com/44 푸터 유형 : https://dongjin6539.tistory.com/49 각 유형의 HTML코드와 CSS의 코드를 가져와서 한페이지에 만들었습니다. 코드 블럭(HTML) CSS코드(font.css / r.. 2023. 3. 28.
magic circle magic circle See the Pen magic circle by dongjin6539 (@dongjin6539) on CodePen. 2023. 3. 28.
객관식 여러문제 확인하기 유형 : 슬라이드 유형 퀴즈 이펙트 객관식 여러문제 확인하기 유형 : 슬라이드 유형 퀴즈 이펙트 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 W 정답입니다! 틀렸습니다! 다음 문제입니다. ??점 정답 : ? 개 dongjin6539@naver.com 코드 블럭 구성 코드 블럭 구성은 저번에 작성했던 객관식 확인하기 유형 퀴즈 이펙트에 있는 구성과 똑같아서 그대로 가져옵니다.(객관식 확인하기 유형 퀴즈 이펙트 : https://dongjin6539.tistory.com/43) 추가로 현재 문제 번호와 총 문제 의 갯수를 알려주기 위해 class "dog__wrap" .. 2023. 3. 27.
자바스크립트 쪽지 시험(5) 자바스크립트 쪽지 시험(5) 길라잡이 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 1. 다음 결괏값 중 -1이 나오는 갯수를 구하시오. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.indexOf("javascript", 0); str.indexOf("ja.. 2023. 3. 26.
객관식 여러문제 확인하기 유형 퀴즈 이펙트 객관식 여러문제 확인하기 유형 퀴즈 이펙트 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 W dongjin6539@naver.com 코드 블럭 구성 코드 블럭 구성은 저번에 작성했던 객관식 확인하기 유형 퀴즈 이펙트에 있는 구성과 똑같아서 그대로 가져옵니다.(객관식 확인하기 유형 퀴즈 이펙트 : https://dongjin6539.tistory.com/43) 다만 body 태그 안에 script 태그를 사용해서 정보를 입력하기 위해 main 태그에 class "quiz" 부분은 주석 처리 해줍니다. 강아지 이미지는 인터넷을 통해 얻어왔습니다. (참조: .. 2023. 3. 25.
반응형

티스토리툴바