JS_01_자바스크립트 기초
1. JavaScript: 웹페이지를 동적으로 프로그래밍적으로 제어하기 위해 만들어진 언어
- 활용분야: 웹프로그래밍(Back-End, Front-End) APP, DB, 머신러닝/딥러닝, AR/VR
2. JavaScript의 특징
- 모든 웹브라우저에서 동작함
- 웹브라우저에서 실행결과를 즉시 확인 가능
- 다양한 용도의 프로그램 개발
- 다양한 자바스크립트 공개 API
- 다양한 라이브러리와 프레임워크
3. JavaScript 사용하기: </body> 태그 위에 <script> 태그 만들기
[실습1]<script> 태그 사용하여 스타일 적용하기
- <script> 태그 안에 <function> 태그로 함수 만들기
-html 태그에 style 적용하는 방법: document.querySelector(‘태그명’).style.
-배경색, 글자색 변경하는 함수
-원래대로 되돌리는 함수
- 함수 실행하기: 적용할 태그에 onclick="함수이름"
4. JavaScript 출력하기: <script> 태그 내에 작성
- 웹페이지에 출력: document.write(“출력할 내용”)
- console창에 출력: console.log(“출력할 내용”)
-경고: console.warn(“경고할 내용”)
-오류: console.error(“오류 내용”)
- 알림창으로 출력: alert(“알림창 내용”)
5. JavaScript 입력하기: <script> 태그 내에 작성
- 입력창을 통한 입력(String 반환): prompt(“출력내용”, “입력할 내용 기본값”)
- 확인 및 취소를 통한 입력(boolean 반환): confirm(“출력문”)
6. JavaScript 변수: 저장하는 데이터에 따라 자료형 결정하므로 자료형 필요없음
- var: 재선언, 재할당 가능 예)var num=3;
- let: 재선언 불가, 재할당 가능 예)let age=10;
- const: 재선언, 재할당 불가 예)const maxlevel=200;
[오류 1]let 재선언 오류
[오류 2]const 재선언, 재할당 오류
[실습2]입력창을 통해 입력받고, 입력받은 값을 console창에 출력하기
7. JavaScript 자료형
8. JavaScript 연산자
- 동등연산자: 자동으로 형변환하여 값만 일치하는지 비교
- 일치연산자: 값과 자료형이 일치하는지 비교
9. JavaScript 형변환
[실습3] 백의 자리 이하 버리기
10. JS 작성위치
1)내부
① <head> 태그에 작성
-문서를 초기화하거나 가벼운 script를 작성할 때 사용
-무거운 script가 있을 경우 렌더링에 방해되어 화면 로딩시간이 오래 걸림
※렌더링: html, css, js 등 개발자가 작성한 문서가 브라우저에 출력되는 과정
②끝나는 <body> 태그 위에 작성
-무거운 script 작성할 때 사용
-일반적으로 추천되는 script 위치
2)외부
- 일반적으로 사용되는 형태, 별도의 js 파일을 만들어 html 파일과 연결
- 코드가 재사용되어 유지보수하기 편리함
- 코드가 외부에 공개되지 않아 보안에 강함
3)인라인
- 태그 내에 직접 js 명령어 작성
- html 태그와 분리하는 것을 권장
- 조건문 : 단순 if문, if-else문, 다중 if문, switch문
[실습5]배경색 바꾸기
[실습6]범위 합 구하기
[실습 7]업다운
'JavaScript' 카테고리의 다른 글
| [JS]5. JQuery 실습 (0) | 2023.08.08 |
|---|---|
| [JS]4. JQuery (0) | 2023.08.07 |
| [JS]3. 함수&객체 (0) | 2023.08.04 |
| [JS]2. 배열 (1) | 2023.07.14 |