티스토리 뷰

수업/└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 문서 기준(이 문서에 파일을 링크할거니까)

한 단계 상위 폴더 현재 위치 하위 폴더
../ ./ /

 

 

 

 

저작자표시 (새창열림)

'수업 > └JavaScript' 카테고리의 다른 글

연산자_비교, 논리, 조건, 대입  (0) 2022.01.05
연산자_문자열, 산술  (0) 2022.01.04
변수 선언, 초기화, typeof  (0) 2022.01.04
데이터타입  (0) 2022.01.04
함수 호출  (0) 2022.01.04
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함