취업 준비 시절/Javascript 56

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

- 5번째는 문제가 60개 있는 사이트를 만들어 보았습니다. - 정답확인을 눌렀을 때 틀렸는지 맞았는지와 함께 점수를 알려주는 버튼도 만들었습니다. - 바로 스크립트 코드로 넘어가 보도록하죠 const quizInfo = [ { infoType : "정보처리 기능사" , infoTime : "2011년 4회" , infoNumber : "20110401", infoQuestion : "일반적으로 명령어의 패치 사이클 중에는 현재 수행하고 있는 명령어의 위치를 가리키고, 실행 사이클 중에는 바로 다음에 실행할 명령어의 위치를 가리키는 Register는?", infoChoice : { 1: "누산기(accumulator)", 2: "프로그램 카운터(program counter)", 3: "명령어 레지스터(i..

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

- 자 오늘도 자바스크립트 쪽지 시험보는 날이 다가왔습니다. - 오늘은 문제를 많이 틀렸으니 문제를 한번 01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } - 정답은 1, 3, true 입니다. 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document..

기초부터 시작하는 Javascript 공부 - 검색 이펙트 사이트 만들기01

- 검색 이펙트(Search Effect)란 검색 엔진에서 사용자가 검색어를 입력하고 결과를 검색하는 과정에서 일어나는 효과를 말합니다. - 검색어의 입력 방식, 검색 결과의 정확도와 다양성, 검색 결과의 순서 등이 검색 이펙트에 영향을 미칩니다. 1 2 3 4 5 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속생 갯수 : 0 개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을..

Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기03

- 자 오늘도 마우스 효과를 사용해서 페이지를 만들어 보겠습니다. - 동그라미를 통해서 선명한 사진을 보게 하는 사이트 입니다. - 코드를 보시죠 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 "The only way to do great work is to love what you do." 큰 일을 해내는 유일한 방법은 자신이 하는 일을 사랑하는 것이다. - HTML태그는 별로 특별할 게 없습니다. - 커서를 대신할 div태그 하나와 문자가 들어가는 태그가 끝입니다. const cursor = document.querySelector(".mouse__cursor"); const circle = cursor.getBoundingClientRect();..

Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기02

- 자 오늘도 마우스 효과를 사용해서 페이지를 만들어 보겠습니다. - 오늘 할 것은 마우스 포인터를 동그라미 2개로 만들고 하나는 천천히 따라오게 해주는 것입니다. - 코드를 먼저 보겠습니다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Insanity is doing the same thing over and over again and expecting different results. 늘 같은 길을 가면서 다른 결과를 바라는 것은 어리석은 짓이다. im.kebab00@gmail.com - 일단 HTML의 구조를 보면 마우스 커서를 대신할 2개의 div태그가 보입니다. - 그 두개의 div태그에 mouse__cursor, mouse__cursor2..

Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기01

- 자 오늘은 마우스 효과를 사용해서 페이지를 만들어 보겠습니다. - 동그란 원이 마우스 커서를 대신하는 효과인 것이죠~ Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Traveling is making new memories . 여행은 새로운 추억을 쌓는 것이다. clientX : px clientY : px offsetX : px offsetY : px pageX : px pageY : px screenX : px screenY : px im.kebab00@gmail.com - 자 이것이 위에 있는 페이지의 코드입니다. - 눈에 띄는 것은 마우스를 움직일 때마다 마우스의 좌표를 알려주는 것이고 커서를 특정 단어 위에 올려두었을 때 커서에 효과가 있..