수업/└JavaScript
기본 문법
onlyun
2022. 1. 4. 14:29
※ 웹 표준
| HTML | CSS | JavaScript |
| 구조 잡는 역할(Modeling) | 배치나 스타일(View) | 동적 제어 담당(Behavior) |
JavaScript : 웹 → 서버 개발까지(원한다면 할 수는 있음)
1. 자바스크립트 역할
요소의 추가 및 삭제 : 실행 중간에
<form>의 유효성 검증 : 사용자가 입력한 값, 선택값들을 서버로 전성하기 전에 검증.
이벤트 : 마우스, 키보드 관련 스크립트 실행
웹 브라우저 제어 및 쿠기 등의 설정과 조회
AJAX 기술을 이용한 웹 서버와 통신 ; 미려한 화면 전환 가능(?)
2. 자바스크립트 작성
(1) 기본
<script>
함수('실행문');
</script>문장은 세미콜론(;)으로 구분
큰따옴표(“ ”)와 작은따옴표(‘ ’)를 구분하여 사용
<script>
alert('Hello world');
</script> // Hello world가 적힌 알림창을 띄우겠다.
(2) 실행 순서
문서를 읽어들이는 흐름에 따라 실행. 위에서부터 아래로.
(*실행 흐름이 걸리는 함수(블로킹) : alert 같은 거)
3. 자바스크립트 포함 방법
(1) 자바스크립트 설정
-태그 안에 속성값으로 정의
<a href="javascript:alert('Hypertext JavaScript');"> LINK </a>
<!-- 자바스크립트 쓰겠다. 알림창 -->
<input type="button" value="버튼" style="background-color:blue;" onclick="alert('버튼 클릭됨');">
<!--클릭했을때 알림창이 뜨도록 자바스크립트 설정 -->
-내부
위치는 어디든 올 수 있음. 보통 <head> 내부에 있거나 <body> 태그 끝나기 직전에 있음.
<head> <!--원하는 만큼 자바스크립트 넣을 수 있음.-->
<script src="파일 경로"></script>
<script>
alert('head javascript');
</script>
</head>↑헤드 영역에 위치 / 바디 영역 끝나기 직전에 위치↓
<body>
<div class="container">
<!-- 본문 영역 -->
</div>
<script>
<!-- 제어 담당, JavaScrpt -->
</script>
</body>**브라우저에서 [ f12 ]를 눌러 요소에서 동적인 변화(실행문 등을) 확인할 수 있음.
근데 <body> 끝나기 직전 부분에 쓰니 출력문이 밑에 나와서...
배울 때 편의상 <head>에 쓴다.
-외부 자바스크립트 파일 링크
하나의 HTML 문서에 여러 개의 자바스크립트 파일 참조 가능
<head>
<script src="파일 경로"></script>
</head>
*경로 찾기_현재 HTML 문서 기준(이 문서에 파일을 링크할거니까)
| 한 단계 상위 폴더 | 현재 위치 | 하위 폴더 |
| ../ | ./ | / |