JavaScript
-동적인 웹페이지를 제작할수있습니다.
-서버를 구성하고 서버용 프로그램을 만들수 있습니다.
자바 스크립트 시작할려고하는데
편집기는 vscode를 사용합니다. 자바스크립트 파일 만들기는 vscode 파일+ 클릭후 이름.js 파일을 만들염 이름이라는 자바스크립트 파일이 생성됩니다. 생성된 파일을 HTML파일에 연결시켜서 사용합니다.
자바스크립트 소스를 작성할 때 지켜야 할 규치
- 대소문자를 구별하여 소스를 작성한다.
- 읽기 쉽게 들여쓰는 습관을 들인다.
- 세미콜론으로 문장을 구분한다.
- 소스에 메모하려면 주석을 사용한다.
- 식별자는 정해진 규칙을 지켜 작선한다.
- 예약어는 식별자로 사용할 수 없다.
<script>태그 안에 자바스크립트 작성
- <script>태그는 HTML문서 어디에든 사용 가능합니다.
- <script>태그는 한 문서 안에서 여러 개를 사용해도 됩니다.
- <script>태그가 삽입된 위치에서 소스가 실행됩니다.
외부 스크립트 파일 연결하기.(나중에 사진올리겠습니다.)
vs코드 기준 작업중인 폴더가 있을겁니다 폴더안에 자바스크립트 파일만 넣어둘 폴더를 만듭니다.
보통 js로 만들면 됩니다. 그안에 자바스크립트 파일을 만들어 저장하고 적용할 HTML 파일로 돌아와서
밑에 처럼 작성해주면 됩니다.
<script src="js(폴더)/change-result.js(자바스크립트파일명.js)"></script>
Document 객체
Document 객체는 웹 페이지 그 자체입니다.
HTML쇼오세 접근시 반드시 Document 객체부터 시작해야합니다.
메소드설명
HTML 요소를 선택하기 위한 메서드 입니다.
| document.getElementsByTagName(태그이름) | 해당 태그 이름의 요소를 모두 선택함. |
| document.getElementById(아이디) | 해당 아이디의 요소를 선택함. |
| document.getElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택함. |
| document.getElementsByName(name속성값) | 해당 name 속성값을 가지는 요소를 모두 선택함. |
| document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함. |
HTML 요소 생성 메서드
| document.createElement(HTML요소) | 지정된 HTML 요소를 생성함. |
| document.write(텍스트) | HTML 출력 스트림을 통해 텍스트를 출력함. |
HTML 이벤트 핸들러
| document.getElementById(아이디).onclick = function(){ 실행할 코드 } | 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함. |
ex) 클릭하였을때 클릭한 부분 색의 변화
| document.anchors | name 속성을 가지는 <a>요소를 모두 반환함. | 1 |
| document.applets | applet 요소를 모두 반환함. (HTML5에서 제외됨) | 1 |
| document.body | <body>요소를 반환함. | 1 |
| document.cookie | HTML 문서의 쿠키(cookie)를 반환함. | 1 |
| document.domain | HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함. | 1 |
| document.forms | <form>요소를 모두 반환함. | 1 |
| document.images | <img>요소를 모두 반환함. | 1 |
| document.links | href 속성을 가지는 <area>요소와 <a>요소를 모두 반환함. | 1 |
| document.referrer | 링크(linking)되어 있는 문서의 URI를 반환함. | 1 |
| document.title | <title>요소를 반환함. | 1 |
| document.URL | HTML 문서의 완전한 URL 주소를 반환함. | 1 |
| document.baseURI | HTML 문서의 절대 URI(absolute base URI)를 반환함. | 3 |
| document.doctype | HTML 문서의 문서 타입(doctype)을 반환함. | 3 |
| document.documentElement | <html>요소를 반환함. | 3 |
| document.documentMode | 웹 브라우저가 사용하고 있는 모드를 반환함. | 3 |
| document.documentURI | HTML 문서의 URI를 반환함. | 3 |
| document.domConfig | HTML DOM 설정을 반환함. (더는 사용하지 않음) | 3 |
| document.embeds | <embed>요소를 모두 반환함. | 3 |
| document.head | <head>요소를 반환함. | 3 |
| document.implementation | HTML DOM 구현(implementation)을 반환함. | 3 |
| document.inputEncoding | HTML 문서의 문자 인코딩(character set) 형식을 반환함. | 3 |
| document.lastModified | HTML 문서의 마지막 갱신 날짜 및 시간을 반환함 | 3 |
| document.readyState | HTML 문서의 로딩 상태(loading status)를 반환함. | 3 |
| document.scripts | <script>요소를 모두 반환함. | 3 |
| document.strictErrorChecking | 오류의 강제 검사 여부를 반환함. | 3 |
'JavaScript' 카테고리의 다른 글
| (Javascript) : 새 창(window) 열기/닫기 (0) | 2022.07.11 |
|---|---|
| JavaScript Ex01 (0) | 2022.07.06 |
| JavaScript 함수와 이벤트 (0) | 2022.07.05 |
| JavaScript 제어문 (0) | 2022.07.04 |
| JavaScript 변수 (0) | 2022.07.04 |
