728x90
JavaScript
- 웹브라우저에서 실행되는 프로그램이다
- HTML문서내에서 실행(html에 종속적이다,브라우저에서 실행된다!!)
- HTML문서(정적페이지) → JavaScript적용 (동적페이지)
- HTML문서를 통해 입력된 데이터를 얻어오고 데이터에 대한 유효성 검사를 할 때 사용.
- HTML문서에 대한 조작(태그,속성,스타일)
- 자바스크립트를 왜(어디서) 사용하는가?
- 문서 조작(태그와 속성)
=> 조작에 필요한 데이터가 외부에 존재한다면(현재HTML없을시) Ajax를 사용!! - 유효성 검사(서버에게 데이터를 보내기 전에 검사)
자바의 경우
- 서버 스크립트
- JVM에서 실행
자바스크립트의 경우
- 클라이언트(사용자, 브라우저) 스크립트
- 브라우저에서 실행
JavaScript 문법
자바스크립트 선언 위치
HTML문서내에 포함되어서 실행. (HTML문서내의 어떤 위치라도 정의 가능)
<head>
<script>
변수선언, 함수정의
</script>
</head>
<body>
<script>함수호출</script>
<script src="자바스크립트 파일"></script>
</body>
자료형을 선언, 정의하지 않는다
var su; //변수선언
su=2000; //number
su="strin"; //String타입
su=true; //boolean 타입
su = new Date(); //Date 타입
자바스크립트에서의 문자열(text) 표현
:작은 따옴표와 큰 따옴표를 구분 없이 사용. 전혀 차이가 없음
name1= "홍길동"; (O)
name2= '길라임'; (O)
name3= "김주원'; (X)
세미콜론 생략가능
: 자바스크립트는 구분자, 종결자 역할을 하는 ';'을 생략하는 것이 가능.
⇒이유: 라인(줄바꿈)을 통해 서로 다른 문장을 구분하기 때문
name='길동'
age=13
==> (O)
name="라임" age=15
==> (X)
name="주원"; age=17
==> (O)
문자열 비교
자바의 경우
"java".equals("JAVA") ==> (O) 문자열 내용 비교
"java" == "JAVA" ==> (O) 메모리 주소 비교
자바스크립트의 경우
"javascript".equals("JAVASCRIPT") ==> (X) 에러발생
"javascript" == "JAVASCRIPT" ==> (O) 문자열 내용 비교
'==' 연산자 와 '==='연산자
'=='연산자: 데이터 내용만 비교
'==='연산자: 자료형 비교, 내용비교를 같이하는 엄격한 연산자
100 == '100' --->true //내용만 같다면 자동형변환 해서 비교
100 === '100' --->false //내용,자료형 비교 (자료형이 다르면 false)
조건문
if(조건식){
조건식의 결과가 참일 때 실행할 문장;
}
--->실행할 문장이 한개였을때 영역괄호{}는 생략가능
if(조건식){
조건식의 결과가 참일 때 실행할 문장;
}else{
조건식의 결과가 거짓일 때 실행할 문장;
}
if(조건식1){
조건식1의 결과가 참일 때 실행할 문장;
}else if(조건식2){
조건식1의 결과가 거짓이고!!
조건식2의 결과가 참일 때 실행할 문장;
}else{
조건식1,2의 결과가 거짓일 때 실행할 문장;
}
if문에서 자바와 차이점
if(조건식 ==> boolean, 숫자, 객체){ //자바는 boolean값만 조건식
}
-
숫자: 0인 수(false), 0아닌 수(true)로 구분
-
객체: 브라우저에서 지원되는 객체인지 아닌지 판별.
-
---> 변수에 값이 존재하는지 판단.
-
존재하는 객체(문자열, 브라우저가 지원하는 객체) ---> true
null, undefined(초기화되지 않은변수) ---> false
if(0){ //0은 false. 0이 아닌 수는 true
document.write("if");
else{
document.write("else");
}
빈문자열 체크
str.length == 0 //str.length() X
str == '' // 더 많이사용함
- str.length() : 에러발생
알림창
alert("time");//메세지창 출력
confirm("this");//확인대화상자: 삭제전 '확인'에서 많이 사용
prompt("whit"); //입력창
함수(메소드) 정의
자바의 경우
void hello(String name, int age){}
int hello(String name, int age){return 100;}
자바스크립트의 경우
function hello(name, age){}
function hello(name, age){return 100;}
자바스크립트 함수형식
function 함수명(){
} -----> return; 생략가능
function 함수명(변수명1, 변수명2){
return "리턴데이터";
}
※주의: 자바스크립트의 함수는 오버로딩을 제공하지 않음
function hello(){
안녕
}
hello(); 호출 ----> 안녕
function hello(){
씬짜오
}
==> 에러가 발생하지 않는다
hello(); 호출 ----> 씬짜오
function hello(name){
봉쥬르
}
==> 에러가 발생하지 않는다
hello(); 호출 ----> 봉쥬르
hello('나길동'); ----> 봉쥬르
hello('나길동',13); ----> 봉쥬르
- 함수호출시 매개변수(인자)의 갯수와 상관없이 함수명만 일치하면 호출 가능
- 같은 영역(파일)에 동일한 이름의 함수가 여러개 존재한다면(인자의 갯수는 상관없이) 제일 아래에 있는 함수로 overwrite됨
'Web develop > Javascript' 카테고리의 다른 글
[JavaScript] 내장함수 , 배열, JSON (0) | 2019.06.22 |
---|