반응형
1. 자바 스크립트(JavaScript)
- 정의
- 웹의 동작을 구현하기 위한 언어
- 웹 브라우저에 자바스크립트 인터프리터(JS 코드를 해석)가 내장되어 있음
- 객체 기반 스크립트 언어 - 특징
- 자바 스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
- 객체 지향형 프로그래밍과 함수형 프로그래밍 모두 표현 가능, 그래서 객체 지향이 아닌 객체 기반
- HTML의 내용, 속성, 스타일 등 변경 가능 - 주의사항
- ; (세미클론) 생략 가능
- 스크립트 태그 위치는 어디든 상관없음
- 대소문자 구분
2. 자바 스크립트의 선언
- 과거
<script language="javascript">
// 자바 스크립트 문법으로 해석
</script> - 현재
<script>
// 자바 스크립트 문법으로 해석
</script>
- 과거에는 다양한 스크립트 언어가 있었기 때문에 language로 자바 스크립트라는 것을 명시해줬지만 현재는 표준이 자바 스크립트가 되었기 때문에 따로 명시해 줄 필요가 없다. - 외부 자바 스크립트 사용
<script src="경로/파일명.js"></script>
3. 자바 스크립트의 출력
- document.write()
- <body>에 내용을 출력
- <body>에다가 똑같이 출력을 하기 때문에 <body>에다가 쓰는 것처럼 태그들을 적어줘야 함
- 엔터를 나타내기 위해서는 <br>로 적어줘야 함
- window.alert()
- 대화 상자에 내용을 출력
- 확인을 누르면 undefined를 반환
- 확인을 누르게 되면 <body>에 적혀있는 화면을 보여줌
- window를 생략하고 alert()만 사용 가능
- alert창을 이쁘게 꾸미기 위해서는 라이브러리를 이용하는 것이 더 나음
- HTML DOM요소를 이용한 innerHTML 프로퍼티
- 대상 태그에 내용을 출력
- 밑에 예시처럼 <p>라는 태그가 사용해지면 p라는 객체가 만들어지고 그 객체 안에 있는 innerHTML 필드 안에 내용이 적여 지게 되는 것이다.
- document.getElementById("아이디명"); 을 이용해서 아이디명인 태그(객체)를 변수에 담아준다.
- 이 객체의 innerHTML을 다른 내용을 채워주거나 덮어 씌어 주거나 하면 태그 안에 내용이 바뀌게 되거나 새로 쓰이게 되는 것이다.
- 태그객체.innerHTML = "바꿀문자열" --> 내용 바꾸기
- 태그객체.style.background = "값" --> 배경색 바꾸기
- console.log()
- console 창에 내용을 출력
- 브라우저에서 F12를 눌러 개발자 도구에 들어가 console을 확인할 수 있음
반응형
'웹개발 > JavaScript' 카테고리의 다른 글
| [JavaScript] 함수(function) (0) | 2022.05.13 |
|---|---|
| [JavaScript] 배열(Array), 빠른 for문 (0) | 2022.05.13 |
| [JavaScript] 대화상자(dialog), 제어문(조건문, 반복문), 간단한 예제 (0) | 2022.05.12 |
| [JavaScript] 자료형, 형변환, 연산자, NaN (0) | 2022.05.12 |
| [JavaScript] 스코프, 호이스팅, 변수의 선언 방식 (0) | 2022.05.12 |