2022/3/3
객체 기반의 스크립트 프로그래밍 언어.
웹 브라우저 내에서 많이 사용, 다른 응용 프로그램의 내장 객체에도 접근 가능한 기능 있음. 자바랑 자바스크립트랑 전혀 상관없지만 c언어 파생이라서 문법은 비슷함.
js붙어 있는 건 자바스크립트 기반이라는 의미.
ex) node.js 자바스크립트 엔진에 기반해 만들어진 서버 사이트 플랫폼
기본사항
*자바 스크립트 작성 위치
1. HTML 문서의 <head> 태그 안-> <script> 자바 스크립트 작성 </script> (로딩하기 전에 세팅 값 등등 먼저 필요하면 위에다가.. 남이 쓴 건 위에다가 달기)
2. HTML 문서의 </body> 태그가 닫히기 전에 <script> 자바 스크립트 작성 </script> (추천) (내가 쓴건 밑에)
3. 확장자 .js 페이지로 분리해서 만들고 <head>에 <script src =”js파일 경로”> 태그로 링크 걸기 (추천)
*주석
js: // 한 줄 주석 /*여러줄 주석*/
문장의 끝을 알리는 ; 작성 필수
변수
var(전역 변수) let(지역 변수) const(상수)
[변수 선언]
var 변수 명; //js는 데이터 타입 안 적어줌. 초기값으로 입력되는 데이터로 자동으로 지정을 해줌. 동적 언어라서 넣은 면 다 됨. 신기하당
나 지금 변수 만들게 이거 변수야~하는 의미로 var 적어주는 것.
var 변수명, 변수명;
[변수 선언 + 초기화]
var 변수명 = 값;
var 변수명=값, 변수명=값;
var name = "pikachu";
var age = 100;
var height = 234.453;
var play = true;
var str = "";
var num = 0;
var data = false;
var obj = null;
document.write(age ,"<br/>", name);
console.log(age + name);
alert(name); //알림으로 출력
console.log(name); //개발자 도구 콘솔에 출력
document.write(name); //메인 화면에 출력데이터 타입
1. 숫자형: Number
정수 10진수 /16진수, 실수
2. 문자형: String
양 끝을 쌍따옴표로 묶은 형태 (홑 따옴표도 가능)
3. 논리형: Boolean
true / false 값을 갖는 형태
4. undefined
-변수를 선언만 하고, 초기화하지 않은 상태.
-함수 인자 값 없이 호출되는 경우
-존재하지 않는 프로퍼티(속성, 값)를 접근한 경우
연산자
1. 산술 연산자+ - * / %
2. 대입 연산자=
3. 복합 대입 연산자 (산술+대입) += -= *= /= %/
4. 증감 연산자
증가 ++
감소 --
전위형/ 후위형 존재
5. 비교 연산자
> >= < <=
== 데이터 타입 관계없이 같으면 true. ex) “10” == 10 true
=== 데이터 타입도 일치해야 true. ex) “10”===10 false
!= 데이터 타입 관계 없이 다르면 true
!== 데이터 타입도 일치해야 false
var num1 =10; //비교 연산자
var num2 = "10";
console.log(num1==num2); //t
console.log(num1===num2); //f
console.log(num1 != num2); //f
console.log(num1 !== num2); //t6. 논리 연산자 || && !
7. 삼항 연산자 ? :
8. 연산자 우선순위 (위=높)
() []
단항 연산자:! ++ -- (좌 <---우)
산술 연산자: * / % + -
(비트 연산자): >> << >>>
비교 연산자: > >= < <= == != === !==
(비트 논리): & ^ |
논리 연산자: && ||
삼항 연산자:?: (좌 <---우)
대입(복합 대입) 연산자: = += -= *= /= %=
입력문
: 입력창을 통하여 데이터를 입력받는 기능.
변수 = prompt(“메시지”);
변수 = prompt(“메시지”, “default 답변”);
입력받은 데이터는 모두 문자 타입으로 가져옴. 숫자로 가져오려면 형 변환 필요.
01.
var result= prompt("졸린가요?", "아니요.."); //입력문
console.log(result);02.
var age= prompt("나이 입력");
console.log(typeof age) //타입 알아보는 키워드
//console.log(age+1); //받아온게 문자열이라 +1 하면 바로 뒤에 숫자 1이 붙어서 출력됨.
console.log(parseInt(age)+1);
형 변환
1. 자동 형변환
-숫자 + 문자 -> 문자
-boolean + 문자 -> 문자
-boolean + 숫자 -> 숫자 (true = 1, false = 0)
10 + “” -> “10”
2. 강제 형변환 (명시적 형 변환)
-문자 -> 숫자
정수: parseInt() / Number()
실수: parseFloat() / Number()
-숫자 -> 문자
일반 숫자: String()
16진수: toString(진수)
실수 문자:. toFixed(소수점 자릿수)
var a= true;
var result= 10 + a;
console.log(result); //true는 1. 결과는 11.
//문자를 정수로
var numstr = "100";
var numf = "234.234"
var num = parseInt(numstr);
var num2 = Number(numf);
console.log(num, typeof num);
console.log(num2, typeof num2);
//숫자를 문자로
num =15;
var str = String(num);
//str = num+"";
console.log(str, typeof str);
제어문 (자바와 동일)
조건문: if, switch(변수 선언할 때 var 변수 =값인 거만 주의하기)
반복문: while, do while, for
보조 제어문: continue, break
var num = 100;
if(num < 100){
console.log("100보다 작다.");
}else if (num ==100){
console.log("100이다.")
}else{
console.log("100보다 크다.")
}
var i =0;
while(i < 10){
console.log(i);
i++;
}
for(var i=0;i<10;i++){
document.write("<h3>hello" + i+ "</3>");
}
배열
1. 배열 객체 생성
#1. var 참조 변수 = new Array();
참조 변수[0] = 1;
#2. var 참조변수 = new Array(값, 값, 값……);
#3. var 참조변수 = [값, 값, 값……]; //방 크기는 어레이 리스트와 비슷하다. 넣은 만큼 늘어난다. 타입 상관없이 넣고 싶은 거 다 넣기.
var 참조 변수 = []; //비어있는 배열
2. 배열 기본 메서드 (함수)
.length: 배열의 길이
.push(값): 마지막에 데이터 추가
.pop(): 마지막 데이터 꺼내서 리턴, 배열에서 삭제
.shift(값): 배열 첫 번째 데이터 꺼내서 리턴, 배열에서 삭제
.unshift(값): 배열 첫 번째에 데이터 추가
.join(“연결문자”): 배열 오소들을 연결 문자로 연결해서 1개의 문자열로 리턴
.concat(연결요소): 배열과 연결 요소를 결합 (배열 합치기)
.slice (idx1, idx2): 인덱스 1번부터 인덱스 2번 전까지 잘라내서 리턴.
.sort(): 오름차순 정렬
.reverse(): 요소를 반대로 //내림차순으로 정렬할 거면 sort 하고 reverse
var arr = new Array(); //배열
console.log(arr);
arr[0] = 100;
arr[1] = 200;
arr[2] = 300;
console.log(arr);
var arr1 = [10, "와우", true, new Array()];
console.log(arr1);
arr1.push("test");
console.log(arr1);
arr1[3].push(100); //3번 인덱스 안에 있는 배열에 푸쉬.
console.log(arr1);
var result = arr1.pop();
console.log("resultL " + result);
console.log("arr1: ",arr1);
result = arr1.shift(); //맨 앞 요소 떼어 리턴해주고 배열에서 삭제
console.log("result: " +result);
var arr2 = [3,56,6,"ab", "ccc", "한글", [4,5,7,3]];
console.log(arr2);
arr2.sort();
console.log(arr2);함수 function
[구조]
//매개변수 x, 리턴 x
function 함수명() { //메서드 이름 지을 때와 동일.
//실행 코드들……
}
//매개변수 o, 리턴 o
function 함수명(매개변수 명, 매개변수 명, …) { //변수 타입 안 적고 이름만 적으면 됨
//실행 코드들……
return 값;
}
null vs undefined
null= 값이 없음 var test = null; //지금은 값이 없다
undefined 값이 할당되지 않았음 var test; //아예 값을 넣지 않은 것
//함수 정의
function test(){
console.log("test 호출됨!!");
}
//함수정의
function test2(num1, num2){
console.log();
return num1 + num2;
}
//함수호출
test();
var result = test2(10,20);
console.log("Result: " + result);