# 개요
프로토타입 기반 객체지향 언어.
스크립트 언어(실행되는 동안 라인단위로 인터프리트 되어 실행되는 언어로 컴파일x).
플랫폼 독립적, 모든 웹브라우저에서 동일한 실행결과.
코드가 직접 html 문서에 삽입되어, 같이 해석되고 실행됨.
클라이언트에서만 실행되어 정보를 서버에 보낼 필요x.
타입체크가 철저하지 않음. 변수들 타입에 차이x.
데이터, 연산자, 제어문, 함수, document object, browser object, oop
# 기본구조
<script>태그를 사용하여 html 문서에 코드 작성.
<body>
<script type ="text/javascript">
document.write("<h2>hi</h2>");
</script>
</body>
# 사용방법
외부파일로 사용하는 경우, css 사용방법과 동일.
<body> 태그 부분, 기능 구현할 곳에 삽입.
외부파일 자바스크립트의 확장자는 js.
script element의 src 속성값이 호출할 자바스크립트의 파일명.
<script type="text/javascript" src="호출할 자바스크립트 파일명.js"></script>
자바스크립트 파일 안에 <script> 태그 포함 할 수 없음.
# 변수
1. 구문
문장 끝에 ; 입력.
구문 사이를 구분하기 위함이고 생략해도 무관하나 오류방지를 위해 권장됨.
2. 주석
한 줄 주석 //
한 줄 이상의 주석 /* */
3. 변수선언
var 키워드 사용.
변수의 scope은 코드 블록{ }이 아닌 함수단위**
let 키워드 사용.
var는 동일변수의 중복을 허용하지만 let은 중복 변수의 선언을 허용하지 않음.
var num = 10; var num = 20; 가능
let num = 10; let num = 20; 에러. 중복 변수의 선언 불허.
# 출력
document.write("브라우저 출력");
alert("경고장 출력");
console.log("콘솔장 출력");
comfirm("확인창 출력");
문법이 틀리면 화면상에 표시 안됨.
개발자 도구 F12에서 확인. 콘솔 결과도 확인.
# 데이터 타입
1. 숫자 number
정수, 실수의 구분 없음.
1. 문자열 string
문자, 문자열 구분이 없음. "", '' 둘 다 가능
1. boolean
비교결과가 0, null, ""(빈문자열), false, undefined, NaN으로 판단되면 false.
나머지는 true.
동등비교를 할 경우 타입도 같이 비교해주는 === 사용권장.
1. undefined
변수는 선언했으나 초기화 하지 않은 경우에 자동 저장 됨.
불린형은 false로 반환, 숫자는 NaN, 문자열은 "undefined"로 반환 됨.
1. null
값은 저장 했으나 존재하지 않을 때.
1. 배열
[]
2. 객체
{}로 생성
# 연산자
1. 산술 연산자
+ - * % ++ --
1. 비교 연산자
< > <= >= == != === !== (===와 !==은 타입도 비교함)
1. 대입 연산자
= += -= *= %= /=
1. 논리 연산자
! && || & |
1. 삼항 연산자
조건식? 실행문1 : 실행문2
# 배열
[]로 묶어줌.
타입과 상관 없음.
1. 배열의 선언과 생성
var arr1 = [];
var arr2 = [1, 2, 3];
var arr3 = [1, 2, 3, "가", "나"];
var arr4 = new Array();
1. 배열의 사용
var arr1 = [];
arr1[0] = 1;
arr1[1] = 2;
document.write(arr1[0]); // 결과 1
document.write(arr1[1]); // 결과 2
1. 배열의 길이, 문자열로 출력
var arr2 = [1, 2, "가"];
document.write(arr2); //결과 1, 2, 가
document.write(arr2.length); //결과 3
document.write(arr2.toString()); //결과 1, 2, 가
# 조건문
조건문 if else, switch
반복문 while, do while, for, for in
탈출문 break, continue
if(조건식) {
}else {
}
switch(값???) {
case 값 :
//실행문;
break;
case 값 :
//실행문;
break;
default :
//실행문;
}
# 반복문 while
1. while문
var i=1;
while(i<=10) {
i++;
}
i변수는 전역변수
2. for, for/in 문
for(var i = 1; i <= 10; i++) {
}
for(변수 in 객체) {
}
var myObj = { p1:'a', p2:'b'}; //객체정의
var result = '';
for(var prop in myObj) {
result += '속성명:' + prop + ', 값:' + myObj[prop] + '\n';
}
document.write(result + "<br>"); //결과 속성명:p1, 값:a 속성명:p2, 값:b
//주의 i 요소에 변수 담음.
var arr = ['가', '나', '다'];
var result = '';
for(var i in arr) {
result += '속성명:' + i + ', 값:' + arr[i] + '\n';
}
document.write(result + "<br>"); //결과 속성명:0, 값:가 속성명:1, 값:나 속성명:2 값:다
//주의 i 요소에 인덱스 번호를 담음
# 선언적 함수
1. 함수는 1급 최상위 함수.
oop 프로그래밍 언어에서 메서드 보다 더 많은 기능을 함.
사용자 정의 함수. 선언적 함수와 익명함수가 있음.
1. 선언적 함수
function name(매개변수) {
//return true;
}
반환유형은 적지 않으며, 매개변수도 안 적을 수 있음.
매개변수는 데이터 타입을 적지 않음.
리턴은 적어도 되며, 안 적을 수 있음.
1. 선언적 함수는 함수 선언 이전에 호출해도 에러발생 x
compute();
function compute() {
var x = 100;
var y = 10;
var result = x/y;
console.log(result);
}
//compute();
compute(100, 10) {
function compute(a, b) {
var result = a / b;
cosole.log(result);
}
//compute(100, 10);
1. 선언적 함수는 함수를 변수에 저장할 수도 있음.
function method3() {
alert("method3실행");
}
var a = method3;
a();
//함수를 a에 저장할 때 변수 선언 이후에 호출 해야 함.
# 익명함수**
익명함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용하게 해 줌.
var compute = function() {
}
//compute(); //에러. 익명함수는 변수 선언 이후에 호출해야
var compute = function() {
console.log('익명함수');
}
compute();
# 매개변수와 리턴
1. 매개변수
함수가 필요한 값을 전달하는 매개체
아무 것도 적지 않을 수 있고, 여러 개를 받을 수도 있고, ','로 연결하면 됨.
자바스크립트의 매개변수는 함수를 호출하는 데 영향을 끼치지 않음.
1. 리턴
메서드가 실행결과를 돌려주는 반환 값.
자바스크립트의 return 뒤에 함수 실행 후 돌려줄 값을 적음.
return false를 만나면 함수는 강제 종료 됨.
function method(a, b) {
return a + b ;
}
# 함수의 가변인자 argument
자바스크립트에서 매개변수는 큰 의미가 없음.
단순히 인자 값에 들어오는 것에 이름을 붙이는 형태.
method(1,2,3,4,5,6,7);
function method(a, b) {
return a + b;
} //에러 발생하지 않음.
# 화살표 함수
var compute = function(a, b) {
return a + b;
}
➡
var compute = (a, b) => a + b;
var compute = function(a, b) {
var avg = (a + b)/2;
return avg;
}
➡
var compute = (a, b) => {
var avg = (a + b)/2;
return avg;
}
단일 명령문일 경우 {} 생략 가능.
# 즉시실행 함수
(function() {
})();
function expression은 함수를 정의 하고 or 변수에 함수를 저장하고 실행 하지만,
즉시실행 함수는 함수를 정의하고 바로 실행함.
함수를 정의하자마자 바로 호출 하는 것.
페이지 시작시 호출할 함수를 기술 할 때 사용함.
# 전역변수, 지역변수
var : 함수레벨 스코프 : 변수의 중복선언 가능. 유일하게 함수블록 { } 내부에서 지역변수가 존재.
let : 블록레벨 스코프 : 같은 블록 { }에서 이미 선언한 변수를 중복선언 불가. 블록 { }, 제어문 블록 { }에서도 지역변수 존재.
var num1 = 50;
if(num1 === 50) {
var num1 = 60;
}
alert("num1은 ?"+num1); // 60
var num2 = 50;
function add() {
var num2 = 60;
var num2 = 70;// 가능
}
add();
alert("num2는? "+num2);// 50. 함수레벨 스코프니까.
let num3 = 100;
if(num1 === 100) { //??
let num3 = 200;
}
alert("num3는? "+ num3); //100
let num4 = 100;
function add2() {
let num4 = 200;
//let num4 = 300; 불가
}
add2();
alert("num4는? "+num4); // 100
** 이해 불충분
# 객체 JSON
자바스크립트의 객체는 { }로 표기함. 함수로도 표기 함.
class person {
String name = '홍길자';
int age = 20;
int[] arr = {1,2,3};
} //자바의 클래스
➡
var person = {
name : '홍길자',
age : 20,
arr : [1,2,3]
} // 자바스크립트의 객체
생성자 함수로 객체 선언 가능
function People(name, age) {
this.name = name;
this.age = age;
this.info = function() {
return "이름:" + name +", 나이"+ age;
}
}
var people = new People('홍길순',50);
console.log(people.name);
console.log(people.age);
console.log(people.info() );
var data = [
{id:1, title:"hi", content:"하이"},
{id:2, title:"hello", content:"헬로우"},
{id:3, title:"bye", content:"바이"}
]
JSON을 문자열로
JSON.stringify(data);
문자열을 JSON으로
JSON.parse(문자열);
이 경우는 키, 값이 모두 " "로 묶여야 하는 엄격한 형식을 지킴.
출처 : 학원자료
'JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 제어문-조건문 javascript conditional statement (**) (0) | 2022.05.04 |
|---|---|
| 자바스크립트 기초 문법 javascript basic grammar (0) | 2022.05.03 |
| 자바스크립트 내부 스크립트 분리하기 javascript detaching internal script (0) | 2022.05.03 |
| 자바스크립트 연습 코드 나이로 성년여부 판단 javascript asking age to determine whether adult or minor (0) | 2022.05.03 |
| 자바스크립트 연습코드1 (0) | 2022.04.30 |