[JavaScript] 자바스크립트 기초 문법

1. 자바스크립트 기초 문법


1.1 자바스크립트


- Netscape 사의 브랜든 아이크(Brendan Eich)가 개발

- 동적인 웹 페이지 작성을 위해 사용되는 클라이언트 측 프로그램 언어

'자바스크립트는 사용자 PC에서 돌아간다; 위치를 잘 알아야 함

- 모든 웹 브라우저에 자바스크립트 해석기가 내장되어 있음

- 웹 페이지의 동작을 정의하는 언어

- 인터프리터 언어 (vs. compiled language)

- 클라이언트에서 실행됨

- 자료형이 없음(가변자료형);    '우변의 값에 따라서 자료형이 바뀜

var i = 0;

i = "hello";

i = true;


'2008 Google V8 오픈 소스로 공개해 버림; 자바스크립트는 웹에서 뿐만 아니라 다른 분야에도 사용 가능하게 되었다

'2009 라이언 달 Node.js 프로젝트가 진행됨

- V8 엔진 사용; event-driven programming; non-blocking I/O


1.2 자바스크립트의 활용


- jQuery : 자바스크립트 라이브러리

- JSON(JavaScript Object Notation) : 자바스크립트의 객체 표기법, 서로 다른 기종 간의 데이터 전송용으로서 XML을 대체하여 많이 사용되고 있음


'''note.

xml(eXtensible Markup Language): 확장가능한 마크업 언어


<? xml version="1.0" encoding="utf-8" ?>

<member>

<userid>kim</userid>

<name>김철수</name>

<email>kim@nate.com</email>

</member>

'''


1.3 자바스크립트의 작성 방법


1.3.1 인라인 자바스크립트 : 태그 내부에 직접 작성    '''잘 쓰지 않음

<태그 이벤트="자바스크립트 코드">

<input type="button" onclick="alert('ok')">


1.3.2 내부 자바스크립트

<head> 태그 또는 <body> 태그 내부에 작성    '''기본적으로 <head> 태그에 작성함

<script>

자바 스크립트 코드

</script>


1.3.3 외부 자바스크립트                        ''' 이방법이 제일 많이 사용됨

<script src="자바스크립트파일.js"></script>


1.4 자바스크립트의 대화 상자


- alert("메세지");    단순 메세지 박스

- var 변수 = prompt("메세지", "기본값");    입력받은 값을 변수에 저장할 때    '잘 안씀

- confirm("메세지");    사용자의 확인을 받을 경우


1.5 HTML 요소에 접근하는 방법


1. id로 접근 : document.getElementById("태그의 id")

2. name으로 접근 : document.getElementsByName("태그의 name")


'id는 중복되면 안되고(페이지 안에서 유일해야 함), 태그의 name은 중복이 가능하다.

id - 중복 불가능

name - 중복 가능


1.6 배열


- 배열 선언

var 배열 = ["값", "값", "값"];

var fruits = ["apple", "banana", "peach"];


var fruits = new Array();

fruits[0] = "apple";

fruits[1] = "banana";

fruits[2] = "peach";


1.7 함수


- 함수 이름이 있는 경우

function 함수이름(매개변수) {

함수 몸체;

}


- 함수 이름이 없는 경우(무명함수)

function(매개변수) {

함수 몸체;

}


''' 자료형이 없기 때문에 리턴타입이 없다.


1.8 HTML 문서에 출력


document.write("문장");


1.9 실습예제


1) js.html 05;38

2) js1.html


'''note

클라이언트 스크립트의 종류

javascript

vbscript


html: 정적인 컨텐츠

javascript: 동적인 프로그램


3) include/myscript.js

4) ext.html
5) var_type.html
6) var_str.html
7) op_arith.html     8) parse1.html
9) parse2.html    10) get_elem.html

'''cf. <form> 태그에서 처리하는 값들은 다 string!

'''js는 대소문자를 정확하게 써야 한다!

11) switch.html + image

12) prompt_sum.html (합계 구하기)
13) temp.html (섭씨, 화씨 온도 변환)

14) prompt_dan.html (구구단 계산)
15) gugu1.html
16) gugu2.html (구구단 출력)
17) nested_loop.html

'''js는 실행하다가 중간에 error가 나면 중간에 멈춰버린다. 인터프리터 언어기 때문에.. 그래서 찾기가 어렵다. 크롬인 경우 개발자 도구를 적극 활용하자

18) array.html
19) confirm.html
20) func.html

'''note.
용도가 뭐냐?
id - 중복x, 자바스크립트에서 주로 사용
name - 중복o, 서버에서 사용

'''
button type="submit": 제출버튼(기본옵션)
button type="button": 제출기능이 없는 버튼

'''
submit을 form 안에 들어있는 data들이 서버로 넘어가는데 어디로 가냐면 action에 지정한 주소로 가게 된다. 

21) func_result.jsp


댓글(0)

Designed by JB FACTORY