본문 바로가기

자바스크립트18

[EFFCET] 이미지 : 슬라이드 유형03 이미지 슬라이드 : 연속적으로 움직이기 지난 시간에는 슬라이드가 좌측으로 이동하는 타입으로 마지막에서 슈루룩~ 첫번째로 돌아갔다면 이번 시간에는 이미지가 자연스럽게 넘어가도록 2초 지날 때마다 이미지가 연속적으로 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. 2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지를 6번째에 추가로 넣습니다. (애니메이.. 2022. 9. 2.

[JAVASCRIPT] 요소의 크기 및 위치를 표현하는 속성, 메서드 자바스크립트 : 요소 크기 및 위치 속성과 메서드 이번 시간에는 자바스크립트의 요소의 위치 및 크기를 표현하는 속성과 메서드들을 알아보겠습니다.😇 다음의 표를 통해 알아봅시다. #01. 요소의 속성 및 메서드 요소 크기 속성 설명 element.clientWidth 요소의 가로 값 (패딩 / 보더 / 마진 미포함) element.clientHeight 요소의 세로 값 (패딩 / 보더 / 마진 미포함) element.clientTop 요소의 Y축 값 (부모기준) element.clientLeft 요소의 X축 값 (부모 기준) element.offsetWidth 요소의 가로 값 (보더 / 패딩 포함) element.offsetTop 요소의 Y축 값 (문서 기준) element.offsetLeft 요소의 X축.. 2022. 9. 1.

[JQUERY] jQuery 속성 선택자 Jquery : 속성 선택자 이번 시간에는 자바스크립트의 jquery 속성 선택자에 대해 알아보겠습니다.😆 #1. jquery 속성 선택자 다음은 속성 선택자의 종류 입니다. 표와 예제를 보고 이해해봅시다! 선택자 종류 설명 요소[속성] $("p[class]") p 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("p[class='abc']") p 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("p[class!='abc']") p 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성='값'] $("p[class~='abc']") p 요소 중 class가 'abc'인 요소를 선택합니다. 그러나 'abc' 앞 뒤로 연결된 문자.. 2022. 8. 30.

[JQUERY] jQuery 기본 선택자 jQuery : 기본 선택자 이번 시간에는 자바스크립트의 jQuery 기본 선택자에 대해 알아보겠습니다.😆 #1. jQuery 기본 선택자 jquery에서는 html요소와 관련된 기능 구현이 많기 떄문에 CSS와 밀접한 관계가 있습니다. 다음의 표와 함께 기본 선택자의 종류를 알아봅시다! 😇 선택자 종류 설명 태그 선택자 $("p") p 태그를 선택합니다. id 선택자 $("#section") id가 section인 요소를 선택합니다. class 선택자 $(".section") class가 section인 요소를 선택합니다. 자식 선택자 $("#section > ul > li") #section의 자식 요소 중 li를 선택합니다. 인접 선택자 $("#section + #content") #section의.. 2022. 8. 30.

[JAVASCRIPT] JQUERY 라이브러리란? 자바스크립트 : Jquery 라이브러리 이번 시간에는 자바스크립트의 라이브러리인 jquery에 대해 알아보겠습니다.😆 #1. Jquery란? JQuery로 HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 Javascript를 미리 작성해둔 것입니다. Javascript로 길고 복잡하게 써야 하는 것을 JQuery로 보다 짧고 직관적으로 쓸 수 있습니다. $ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. ✏️ jquery 활용 예시 💡 $(선택자).동작함수(); )//Javascript document.querySelector(".sl.. 2022. 8. 30.

[QUIZ] 퀴즈 만들기06 : 슬라이드 형식 퀴즈 객관식 유형 : 슬라이드 형식 이번 시간에는 퀴즈를 슬라이드 형식으로 제작해봅시다! 그 뒤 정답 갯수와 문제의 총 갯수, 총 점수를 구하는 식을 만들어 봅시다. ! 미리 보기 ! #1. 퀴즈 인포 (문제 모음) 만들기 데이터 저장 타입인 배열안 객체를 통해 각각의 퀴즈 문제를 키와 값으로 데이터화 시켜 저장해줍니다. 지난 퀴즈와 달리 객체안에 또 배열을 만들어서 저장해줍니다. const quizInfo = [ { answerType : "웹디자인기능사 2015년 01회", answerNum : "1", answerAsk : "웹 디자인에 대한 설명으로 거리가 먼 것은?", answerChoice : [ "웹 페이지를 디자인하고 제작하는 것을 의미한다.", "웹 디자인은 개인용 홈페이지 이외에 기업용.. 2022. 8. 25.

[JAVASCRIPT] 문자열 메서드 : includes( ) 자바스크립트 : 문자열 메서드 : includes() 이번 시간에는 문자열 메서드인 includes()에 대해 알아보겠습니다! 😁 #1. includes( ) includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. 즉 문자열이 특정 문자열을 포함하는지 확인하는 메서드라 볼 수 있습니다! ! includes( ) 사용 방법 ! string.includes( searchString, length ) "문자열".includes(검색할 문자열); "문자열".includes(검색할 문자열, 검색을 시작할 위치); == indexOF()와 거의 같다. const str1 = "javascript reference"; const currentStr1 = str1.incl.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : replace( ) / replaceAll( ) 자바스크립트 : 문자열 메서드 : replace() 이번 시간에는 문자열 메서드인 replace()에 대해 알아보겠습니다! 😁 #1. replace( ) replace() 메서드는 String.prototype.replace()의 약자로 문자열을 치환하거나 변환 할 때 사용하는 메서드입니다. 즉 문자열을 부분 문자열로 구분하고 변환하여 새로운 배열로 반환해줍니다. ! replace( ) 사용 방법 ! "문자열"replace("찾을 문자열", "변경할 문자열"); "문자열"replace("찾을 문자열", "변경할 문자열"); "문자열"replace(정규식); "문자열"replace(정규식, "변경할 문자열"); const str1 = "javascript reference"; const cirrentStr.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : split( ) 자바스크립트 : 문자열 메서드 : split() 이번 시간에는 문자열 메서드인 split()에 대해 알아보겠습니다! 😁 #1. split( ) slice() 메서드는 문자열에서 원하는 값을 추출한 뒤 새로운 문자열로 반환합니다. 즉 문자열을 분할하여 부분 문자열 배열을 만듭니다 📖 아래의 코드 예제와 주석을 통해 더 자세히 알아봅시다! 📖 ! split( ) 사용 방법 ! "문자열".split(구분자(separator)); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); //갯수를 설정할 수 있다. const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j','a','v','a','s','c',.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : 대소문자 변경과 공백 제거 자바스크립트 : 문자열 메서드 : 대소문자/공백 지금부터 자바스크립트의 대소문자 변경, 공백 제거 문자열 메소드에 대해 알아봅시다! #1. toUpperCase(), toLowerCase() toUpperCase()는 문자열을 대문자로 변경해주며 toLowerCase()는 소문자로 변경해줍니다. 변경 후에는 새로운 문자열로 반환해줍니다. //01. 대문자 변경 const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); //02. 소문자 변경 const str2 = "JAVASCRIPT"; const currentStr2 = str1.toLowerCase(); 표로 확인해보자! 번호 기본값 메서드 리턴값 1 javascript toUpperCas.. 2022. 8. 18.

[JAVASCRIPT] 템플릿 문자열 자바스크립트 : 문자열 결합 : 템플릿 문자열 지금부터 자바스크립트의 문자열 결합과 문자열 메소드인 템플릿 문자열에 대해 알아봅시다! 1. 템플릿 문자열 템플릿 문자열( )은 문자열 결합 메서드로 내장된 표현식을 허용하는 문자열 리터럴입니다. 문자열을 결합할 때 따옴표 대신 ` ` (backtick_백틱)을 사용하며 변수를 넣고자 하는 부분에 ${}를 사용하여 넣어주면 됩니다. 또한 간단한 자바스크립트 문법을 문자열 안에 사용할 수 있습니다. //01. 문자열(string) 결합 const str1 = "자바스크립트"; const str2 = "제이퀘리"; document.querySelector(".sample01_P1").innerHTML = str1 + str2; //02. 숫자(number) 결합.. 2022. 8. 18.

[Search] 검색 유형 사이트 만들기02 includes()를 통해 검색 사이트 제작하기 이번 시간에는 문자열 메서드 중 하나인 includes() 메서드를 통해 검색 사이트를 제작해보겠습니다! 먼저 includes() 메서드에 대해 짧게 알아보고 사이트 실습에 들어가보겠습니다! #1. includes() includes() 메서드는 대소문자를 구분하며 문자열 내에서 검색할 문자의 포함 여부에 따라 불린(true, false)을 반환합니다. ✏️예제 코드 const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); // true const currentStr2= str1.includes("j"); // true const currentStr3= str1.. 2022. 8. 17.

[Search] 검색 유형 사이트 만들기01 indexOf()를 통해 검색 사이트 제작하기 지난 시간에는 indexOf()에 대해 알아보았습니다. 이번 시간에는 심화과정으로 문자열 메서드 중 하나인 indexOf() 메서드를 통해 검색 사이트를 제작해볼까요?! 먼저 indexOf() 메서드에 대해 짧게 알아보고 사이트 실습에 들어가보겠습니다! #1. indexOf() indexOf() 메서드는 문자열에서 특정 문자의 위치(index)를 찾은 후 숫자로 반환합니다. ✏️코드 보기 const str1 = "javascript reference" const currentStr1 = str1.indexOf("javascript"); // 0 const currentStr2 = str1.indexOf("reference"); // 11 (11번째 자리 : .. 2022. 8. 17.

[JAVASCRIPT] 문자열 메서드 : indexOf( ) 자바스크립트 : indexOf() 메서드 이번 시간에는 문자열 메서드 중 하나인 indexOf() 메서드에 대해 알아보겠습니다.😆 #1. indexOf( ) indexOf() 메서드는 문자열에서 추출하고 싶은 문자의 위치를 찾은 후 숫자로 해당 문자열을 반환합니다. 즉 특정 문자가 문자열의 어느 index에 위치하는지 찾는 메서드라고 볼 수 있습니다. ! indexOf() 사용법 ! "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) : 처음 값은 추출하고 싶은 문자열을 작성하고 마지막 값을 그 문자열을 찾기 시작 할 위치로 적으면 된다. ✏️예제 코드 const str1 = "javascript reference" const currentStr1 = str1.indexOf("j.. 2022. 8. 17.

[JAVASCRIPT] 정규 표현식 자바스크립트 : 정규 표현식(패턴) 정규 표현식이란? 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이며 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다! 즉 쉽게 말해서 문자열에서 특정 문자를 찾아내는 도구라고도 볼 수 있습니다! #1. 정규 표현식 객체 주요 패턴 정규 표현식에서 사용하는 기호를 메타(meta) 문자라고 합니다. 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [^abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [A-Z] 알파벳 대문자를 검색합니다. [a-z] 알파벳 소문자를 검색합니다. [.. 2022. 8. 17.

[JAVASCRIPT] 문자열 메서드 : Slice(), substring(), substr() 자바스크립트 : 문자열 메서드 slice(), substring(), substr() slice(), substring(), substr()는 문자열 메서드의 변경 타입으로 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다. #1. slice( ) slice() 메서드는 문자열에서 원하는 값을 추출하여 문자열을 반환합니다. ! slice( ) 사용 방법 ! "문자열"slice(시작 위치) "문자열"slice(시작 위치, 끝나는 위치) const str1 = "javascript reference" const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript refer.. 2022. 8. 17.

퀴즈 문제 만들기04 퀴즈 객관식 유형 자바스크립트를 이용하여 웹디자인기능사 필기문제를 객관식 유형 퀴즈로 여러개 제작해보기 하나의 객관식 문제를 자바스크립트를 이용하여 만들어보자! #1. 선택자 자바스크립트 소스 상수에게 해당명칭(ex: quizType)을 선언해주고 쿼리셀랙터(태그, 아이디, 클래스를 선택할 수 있는 것)로 선택한 요소를 찾아서 넣어보자! //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask".. 2022. 8. 8.

기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부하세요! 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, JavaScript는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 .. 2022. 7. 20.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바