본문 바로가기

728x90
반응형

웹언어/JAVASCRIPT

(31)
[JS강좌] 13.5강 기본내장객체 - Date - 오쌤의 니가스터디 ** 강좌를 쭉 올리고 보니 Date객체를 안해서 13.5강으로 만들어봤습니다. 제 강좌를 쭉 보신분들은 13강까지 보고 보시면 좋을 듯합니다. ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=qggDJk9UHOY * 기본내장객체 종류 설명 String 문자열 객체 Number 숫자 객체 Math 수학 객체 Array 배열 객체 Date 날짜시간객체 - 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙 1. Date 객체 선언 - Date객체는 자바스크립트가 서버의 날짜와 시간을 가져올 수 있도록 하는 객체입니다. - 이 파트는 선언 시 무조건 new 키워드를 써서 생성자 함수 방식으로 사용해야 합니다. 1) 변수식 선언 - 없습니다. ..
[JS강좌] 30강 dataset : 문서객체 사용자정의속성 - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/jclMw7iNvzw 1. HTML data-* 속성 - HTML태그들의 속성명은 전부 지정되어 있습니다. - 하지만 사용하다보면 개발자들이 속성을 만들고 싶을때가 있습니다. - 그때 사용할 수 있는 것이 사용자정의 속성입니다. - 특히 사용자정의 속성에 지정된 값을 javascript가 사용하여 편리하게 사용할 수 있습니다. ## 문법 - data-뒤에 붙는 이름은 대문자를 포함할 수 없습니다. 2. 자바스크립트에서의 data-* 값 가져오기 1) getAttribute( ) - data-* 속성도 결국엔 태그속성이기 때문에 getAttribute( ) 메서드로 값을 가져와서 활용할 수 있습니다. ## 코드 예시 - h1..
[JS강좌] 29강 문서객체 영역 속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/SZZxSyYfnEU 1. 문서객체의 영역속성 - 문서객체의 영역은 순수 가로폭과 세로높이로만 구하지는 않습니다. - padding, border에 의해 영역이 넓어지기 때문입니다. 1) 문서객체 영역 속성의 종류 종류 설명 clientHeight padding을 포함한 높이 clientWidth padding을 포함한 폭 offsetHeight border, padding, 스크롤바를 포함한 높이 offsetWidth border, padding, 스크롤바를 포함한 폭 scrollHeight overflow때문에 볼수 없는 높이까지 padding을 포함한 높이 scrollWidth overflow때문에 볼수 없는 폭..
[JS강좌] 28강 문서객체 class관련 속성 - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. 1. className 속성 - className속성은 문서 객체의 클래스명을 설정하거나 반환합니다. 1) 클래스명 반환 ## 문법 var 변수명 = 객체선택.className; ## 코드 예시 제목태그 - 태그의 클래스명을 경고창에 띄워보겠습니다. ## 코드 결과 - 클래스명이 경고창에 잘 반환되는 것을 확인할 수 있습니다. 2) 클래스명 설정 ## 문법 객체선택.className = '클래스명'; ## 코드 예시 제목태그 - 태그에 클래스명을 추가해보았습니다. ## 코드 결과 - 크롬 개발자모드로 확인해보면 잘 들어가 있는 것을 확인할 수 있습니다. 2. classList 속성 - classList속성의 문서 객체의 클래스명을 DOMTokenList..
[JS강좌] 27강 자바스크립트 에러(Error) - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/w9XHcutSdEU 1. 자바스크립트 에러 구문 1) 에러 구문의 종류 종류 설명 try 코드 블록에서 오류를 테스트할 수 있는 구문 catch 오류를 처리할 수 있는 구문 throw 사용자 지정 오류를 만들 수 있는 구문 finally 결과와 관계없이 try 및 catch 후에 코드를 실행할 수 있는 구문 2) 오류의 발생 - 오류는 보통 철자가 틀리거나 구문을 잘못사용하면 발생됩니다. ## 오류 코드 - alert라고 작성했어야는데 aalert라고 작성했습니다. ## 오류 코드 결과 - 크롬개발자모드로 보면 당연히 오류가 있겠죠? 2. JavaScript try and catch ## 문법 try{ //실제 작성..
[JS강좌] 26강 자바스크립트 정규표현식(RegExp) - 오쌤의 니가스터디 1. 정규표현식(Regular Expresstions)이란? - 정규표현식이란 문자열 검색 패턴을 형성하는 일련의 문자를 의미합니다. - 검색 패턴은 텍스트 검색 및 텍스트 바꾸는 작업에 사용할 수 있습니다. - 간단한 문자 검색부터 이메일, 아이디, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 검색 패턴으로 빠르게 수행할 수 있습니다. 1) 정규표현식의 역할 수행 - 문자 검색(search) - 문자 변경(replace) - 문자 추출(extract) 2) 정규표현식 테스트 사이트 https://regex101.com/ regex101: build, test, and debug regex Regular expression tester with syntax highlighting, explanatio..
[JS강좌] 25강 자바스크립트 Forms - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/OPh124SHs9w 1. form요소의 name속성선택 - 폼 요소는 name속성값을 통해 선택이 가능합니다. ## 문법 document.폼네임.요소네임; //혹은 document.forms['폼네임'].elements['요소네임']; //혹은 document.forms['폼네임']['요소네임']; ## 코드 예시 - input태그에 작성된 값(value)를 p태그에 반환해보도록 하겠습니다. ## 코드 결과 - 잘 작성되는 것을 확인할 수 있습니다. 2. form요소 관련 속성과 메서드 1) form요소의 속성과 메서드 종류 종류 설명 checked input태그의 checkbox나 radio가 체크되어 있으면 tr..
[JS강좌] 24강 HTML DOM Node - 오쌤의 니가스터디 ** 동영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/s_CivK13gn4 1. DOM(document object model)이란? - html문서의 모든 요소를 의미합니다. - 자바스크립트는 HTML DOM을 사용하여 모든 요소에 접근할 수 있습니다. - 위 그림처럼 조직도처럼 연결된 것이 DOM이라고 할 수 있습니다. - HTML DOM을 사용하면 노드 관계를 사용하여 노드 트리를 탐색할 수 있습니다. 2. DOM Node란? - W3C HTML DOM 표준에 따르면 HTML문서의 모든 것은 노드입니다. - document는 문서 노드입니다. - 모든 HTML요소는 요소 노드입니다. - HTML 요소 내부의 텍스트는 텍스트 노드입니다. - 모든 HTML태그의 속성은..

728x90
반응형