자바스크립트(java script)는 HTML 언어에 추가되서 웹페이지를 동적으로 다양하게 제작할 수 있게 도와주는 스크립트 언어이다. 스크립트 언어는 혼자 실행될 수 없어서 다른 언어에 포함되어 실행되고, 문법이 복잡하지 않은 특징을 가지고 있다. 즉, 자바스크립트는 HTML 안에서만 구현된다. 공식 명칭은 [ECMAScript]
<html 문서 내의 언어들>
| 이름 | 특징 | 태그 |
| 태그 | 컨텐츠 출력 | <hr>, <font> 등 |
| CSS | 디자인 담당 | <style="color: blue">~</style> |
| java script | 동적인 조작 기법 | <script> ~ </script> |
자바 스크립트 기능
1. 유효성 체크 : 데이터가 DB에 저장될 수 있는지, 부족한 것은 없는지 검사
2. 태그 속성값 또는 태그 자체의 입력/수정/삭제 : html의 태그 컨트롤
3. AJAX를 통한 웹서버와의 데이터 통신
4. 동적인 메뉴 제작, 이미지 효과 등
AJAX: 비동기 방식으로 웹서버와 통신한 후에 통신 결과물을 화면에 반영하는 기술들의 총칭.
비동기 방식: 페이지 이동 없이 웹서버와 통신하는 방식 (예 : ID 중복 검사, 연관검색어 등)
자바 스크립트 특징
- HTML 소스 코드 안에 삽입되어 웹브라우저에 결과 출력 -> 소스가 클라이언트에게 노출. 보안성이 낮다.
- AJAX를 사용하여 간접 DB연동 가능(자바는 직접 DB 연동)
- 문법이 자바나 C보다 쉽다. 모든 변수의 형식을 검사하지 않기 때문. 때문에 에러 발생 시 찾기가 힘들다.
- 화면 출력이 목적!
자바스크립트 형식
<script> ~ </script> 안에 삽입되어 사용된다.
함수인 경우 관용적으로 head 안에 있는 편.
스크립트가 너무 길면 확장자를 js로 설정하여 독립된 파일을 만든다.
필요 시에 html 파일에 수입해서 삽입할 수 있다.
<자바스크립트 자료형>
| 자료형 종류 | 설명 |
| 숫자형 | 정수, 실수 데이터. |
| 문자형 | 문자데이터. "로 감싼다. ""는 길이 없는 문자데이터. |
| boolean 형 | true / false 데이터. |
| 함수형 | function(){실행구문;} 형태의 데이터. 1. 함수 전체를 데이터의 한 종류로 취급 (변수에 저장 가능) 2. 이름이 없을 수 있음.(=익명함수) |
| 객체형 | 속성변수와 메소드로 구성된 단위 프로그램을 객체화했을 때 객체가 차지하는 메모리 공간의 위치 주소값. ex) var aaa = new nnn(); |
| undefined 형 | 알수없는 데이터. 프로그램에서 사용할 수 없는 데이터. 위의 5가지가 아닌 모든 것의 자료형을 말한다.(null이 아님) |
자바스크립트 변수
var 변수명 = 데이터;
변수는 세 종류가 있다.
1. 전역변수 : var가 있거나 없거나. 모든 자바스크립트에서 공유 가능한 변수
2. 지역변수 : 함수 안에서 var로 선언되어 함수 안에서만 사용되는 함수. 전역변수랑 헷갈릴 수 있음.
3. 매개변수 : 함수 호출 시 전달되는 데이터를 저장하는 변수다. 함수 안에서만 사용 가능(함수 오른쪽에 위치). 앞에 var 없음.
변수 선언 형식
var aaa; //undefined
var aaa = 5; //변수 선언
var aaa; //선언 후 데이터 넣기
aaa = 5;데이터 자료형
var aaa = "123"; //문자형
var aaa = "123"; //숫자형
var aaa = boolean("n"); //논리형논리형의 경우, 하단 "자바스크립트 조건문" 참고.
<참고> 자료형을 출력해보려면 typeOf를 사용한다. ex) document.write( typeOf aaa );
자바스크립트 연산자
1. ===연산자
자바와 동일.
단, 비교 연산자에서 ===의 경우 좌우가 같으면 true를 리턴한다. (자바에 없는 연산자)
true가 리턴되려면 자료형이 같아야한다. 자료형이 다르면 다른 유형의 데이터를 비교하는 것으로, 무조건 false가 리턴된다.
<주의> 자바는 [숫자]와 [숫자문자] 간의 비교가 불가능했으나, 자바스크립트는 [숫자문자]가 [숫자]로 변환되어 비교된다.
"10" == 10 //true, 자료형상관x
"10" === 10 //false, 자료형 일치해야함.
2. 문자 결합 연산자
"문자" + "문자" = "문자문자"; //문자끼리 더하면 문자
"문자" + 123 = "문자123"; //문자+숫자는 문자화
3. 삼항조건연산자
var aaa = a>b ? "맞아" : "아냐";a가 b보다 클 때(조건식), 삼항조건연산자 ? 의 출력값 리턴. true일 경우 "맞아", false일 경우 "아냐" 출력.
자바스크립트 조건문
if(조건식1){ 실행구문; }
조건식 자리에는 boolean 형으로 true, false가 온다.(비교 연산식 또는 논리연산식이 나옴)
조건식 자리에 boolean 형이 아닌 데이터가 올 수 있다.
비어있거나(null), "",'' 등 길이가 없는 문자데이터 또는 0이 나오면 false로 형변환이 되고, 그 이외의 데이터는 true로 변환된다.
예)if(5){ 실행구문; } -> true일 때 실행구문을 실행하는 것.
자바스크립트 객체
ex) TV
기능(메소드) : 켜다(), 끄다() -> 호출 : 객체.메소드(~);
속성 : 높이, 색상, 무게 등 -> 호출 : 객체.속성; 또는 객체.속성 = 값;
종류
1. 내장 객체 : 엔진에 이미 만들어져 저장.
ex) 문자, 날짜, 배열, 수학 등
생성 방법
var 변수명 = new Object(); //기본
var 변수명 = new Date(); //날짜
var 변수명 = new Math(); //수학
var 변수명 = new Array(); //배열
var 변수명 = new String(); //문자열
변수가 기본객체생성함수( Object(); )메소드를 참조중.
2. 브라우저 객체(BOM) : 브라우저에 계층구조로 내장되어 있음.
ex) Window(document, location) , Screen, Location, History, Navigator, Event
3. 문서객체(DOM) : html 문서 구조.
ex) <html>, <head>, <body> 등의 태그
-> 이러한 구조를 파악해야 원하는 곳에 원하는 기능을 넣을 수 있음.
-> 문서객체 대신에 jQuery 문서 객체 모델 사용이 많다.
자바스크립트 함수
자바의 메소드와 유사하다.
[실행구문]에 이름을 붙여 선언한 후 필요시점에 이름을 호출하여 실행구문을 실행하는 일종의 단위 프로그램.
-> 반복 사용하는 실행구문을 함수로 만들어 놓으면 보관이 용이하고 언제든지 쉽게 호출 가능하다.
함수는 반복 호출이 가능하고, 함수명을 호출해야 함수 내용이 실행된다. 호출 전에는 실행되지 않는다.
<자바스크립트 함수 종류>
| 함수 종류 | 설명 |
| 정적함수 | 함수명을 붙여 선언하는 함수 -> 웹브라우저는 정적함수를 먼저 골라 읽어드린 후 나머지 코딩을 실행하기 때문에 관용적으로 위쪽에 써준다. <주의> 동일한 이름의 정적함수가 2개면, 마지막 정적함수가 진짜 정적함수다. |
| 익명함수 | 함수명 없이 선언하는 함수로 주로 변수에 저장한다.(=데이터의 한 종류) 매개변수는 0개 이상 나올 수 있으며, 함수 호출 시 return 반환값;이 나오면 함수 중단 후 반환값을 호출한 곳으로 리턴한다. 그냥 return;만 나오면 함수 중단. |
| 내장함수 | 자바스크립트에 이미 만들어져 제공하는 함수 |
| 내부함수 | 함수 내부에 선언된 또다른 함수 <주의> 내부함수와 외부함수의 이름이 같을 경우 [부모함수] 안에서 [내부함수]를 호출할 때 [내부함수]가우선적으로 호출된다. |
| 사용자 정의 함수 | 개발자가 만들어서 사용하는 함수 |
| 콜백함수 | 직접 호출하지 않고 나중에 필요시에 호출해서 사용하라고 전달해주는 함수. 예) setTimeout( function(~){실행구문;}, 초숫자 ); |
객체 생성자 함수
function 함수명( 매개변수1, 매개변수2, ... , 매개변수n){
this.속성명 = 새 값;
this.함수명 = function(){실행구문;}
}
var 참조변수(인스턴스 네임) = new 함수명();
var 참조변수 = { 속성 : 새값, 함수명 : function(){~} }
'[ javascript ]' 카테고리의 다른 글
| [JavaScript] 생활코딩 자바스크립트 문법 한번에 훑기 (0) | 2021.03.16 |
|---|---|
| [java script 개념] html 기초 개념 정리 (0) | 2020.08.17 |
| [Event 객체] 웹에서 발생하는 모든 움직임 : event 객체 종류 정리, 클릭, 키보드 번호 (0) | 2020.08.15 |
| [생성자 함수] 사용자 정의 객체를 이용해 테이블 출력, 데이터 내림차순 정열 예제 (0) | 2020.08.14 |
| [DOM 객체] 유효성체크 : 회원가입창에 입력된 데이터 관리하기 (0) | 2020.08.13 |
댓글