JAVA SCRIPT!
HTML : Hyper Text Markup Language
웹 문서의 내용 구성 / 구조 설정
건물의 콘크리트 구조물
인체의 뼈
CSS
웹 문서의 레이아웃이나 색상, 스타일 등을 지정(웹 문서의 디자인 지정)
건물의 인테리어
인체의 근육
JS : Programming Language
웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음
건물의 수도, 전기, 엘리베이터 등....
인체의 뇌
JS 로 할 수 있는 것!!
1. 웹의 요소 제어
웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음
고정적인 html 구조와 CSS로 디자인한 웹 문서의 디자인 혹은 기능적으로 구현된 것을 변경가능
-> 이를 위해 개발된 프로그래밍 언어
-> JAVA 와는 다른 언어이므로 헷갈리지 말자!!
2. 웹 애플리케이션 제작
웹브라우저에서 문서 작성 가능, 그림 그리기 가능, 게임 가능!!!!
3. 다양한 라이브러리 사용 가능
프레임워크 - 앵귤러(Angular), 뷰(vue.js)
라이브러리 - 제이쿼리(jQuery), 리액트(React)
4. 서버 개발 가능
Node.js 사용
JS코드의 사용법
1. 인터널 방식
웹 문서안에 <script> 태그로 자바스크립트 작성
<body>
<h1>메롱</h1>
<script>
alert("메롱!")
</script>
</body>2. 익스터널 방식
외부 스크립트 파일로 연결해서 자바스크립트 작성
<script src="외부 스크립트 파일 경로></script>3. 이벤트 속성의 인라인(inline) 코딩
<h1 onclick="JS코드">코드</h1>JS 화면 출력
1. 알림창 출력
alert(메시지) -> 팝업 형식의 경고창으로 출력
alert("메롱!")2. 웹 문서(document)에 화면 출력
documemt.write(내용) -> html 화면에 내용 출력
document.write("안뇽!!")3. 콘솔 창에 출력
console.log(내용) -> console 창에 출력
개발자모드(F12) 의 콘솔(console)탭에서 확인 가능
console.log("메메롱!!")JS코드의 특징
JS 명령어 실행코드는 만나는 즉시 실행되므로
내가 원하는 시점에 실행시키려면 함수를 사용한다!
JS의 코드 실행 순서
1. 위에서 아래로
2. 이퀄(=) 오른쪽에서 왼쪽으로
3. 소괄호안에서 바깥으로
4. 함수 바깥부터 실행, 함수는 호출 시 실행
'Study > Javascript' 카테고리의 다른 글
| 조건문 - switch 문 (0) | 2023.02.12 |
|---|---|
| 조건문 - if문 (0) | 2023.02.12 |
| 연산자(Operator) (0) | 2023.02.07 |
| 자료형(data type) (0) | 2023.02.05 |
| 변수(Variable) (0) | 2023.02.05 |