4. 1-1
자바스크립트 1. 노드를 다루지 않을 시.
사용방법. <script>
소스입력
</script>
2. 노드를 사용할 경우
<script>
window.onload = function(){
소스입력
}
</script>
3. 외부 자바스크립트를 사용할 경우
<script src=‚자바스크립트 파일이름.js‛></script>
5. 1-1
변수 1. 변수란?
- 데이터를 저장하는 장소
- 데이터를 읽고 쓰고 할 수 있는 장소
- 저장 할 수 있는 데이터는?
- 숫자 (정수형, 실수형)
- 문자열
- 함수
- 객체(인스턴스)
2. 변수 선언 방법.
- var 변수이름 = 값
- var 변수이름
변수이름 = 값
-변수이름 = 값 (비추!)
3. 변수 값 변경하기.
- var 변수이름 = 값;
- 변수이름 = 싞규 값;
6. 1-1
디버깅 1. alert()
- 브라우저의 경고창에 출력된다.
- 예) var name = ‚정짂수‛; // 변수 name에 ‚정짂수‛ 라고 문자열
을 저장.
- alert(name);
2. console.log() - 추천
- 브라우저의 콘솔창에 출력된다.
- 예) var age = 28; // 변수 age에 숫자 28을 저장
- console.log(age);
3. document.write() - 비추
- 브라우저의 화면에 출력된다.
- 예) var address = ‚서울 서초구 잠원동‛ // 변수 address에
문자열 ‚서울 서초구 잠원동‛을 저장
- document.write(address)
7. 1-1
자바스크립트 1. 기본형
자료형 - 숫자형(Number)
- 문자형(String) : ‚정짂수‛ , ‘정짂수’
- 논리형(Boolean) : true(참), false(거짓) 중 하나
- undefined = 미정된 값
- null = 미정된 값.
2. 참조형
- 배열(Array) – 데이터 집합
- 함수(Function) – 구문의 집합
- 객체(Object) – 데이터 + 함수 집합
8. 1-1
변수종류 1. 지역변수(= Local Variable)
- 함수 또는 메소드안에서만 쓰이는 변수.
- 함수 안에서 만들어지고 함수 안에서만 사용.
- 함수가 끝나면 변수도 소멸.
2. 전역변수(= Global Variable)
- 함수 외부에서 선언됨.
- 어디서나 쓸 수 있는 변수.
3. 매개변수(= Parameter)
- 선언된 함수 내부로 값을 젂달시켜주는 변수.
- 매개변수 또한 지역변수라 함수가 종료됨에 따라 소멸.
4. 멤버변수(= Member Variable)
- 클래스 내부에 선언된 변수.
- 클래스가 인스턴스화 되어야 접근 가능.
9. 1-1
예시.
변수종류 var global1 = "전역변수1"; // 전역변수 지정
global2 = "전역변수2"; // 전역변수 지정
function test1() {
var local1 = "지역변수"; //지역변수 지정
global3 = "전역변수3"; // var를 넣지 않았으므로 전역변수
console.log(global1); // “전역변수1” 출력
console.log(global2); // “전역변수2” 출력
(function inner_test() { //함수안에 함수
console.log(local1); // “지역변수” 출력
console.log(global3); // “전역변수3” 출력
})();
}
function test2(para1, para2) { // 다른 함수. 파라메터(para1,para2)
console.log(global3); // “전역변수3”출력
console.log(para1); // 1 출력
console.log(para2); // 2 출력
console.log(local1); // undefined (local1은 test1에 대한 지역함수이기때문에 출력되지 않음)
}
console.log(global1); // “전역변수1” 출력
console.log(global2); // “전역변수2” 출력
test1();
test2(1, 2);
// 멤버변수 예)
function Myname(){ // 생성자 함수. 각 인스턴스의 프로퍼티가 다른 값이 되도록 초기화
this.name = "정진수“ // 멤버변수. 이 변수는 각 인스턴스들에게 공유 된다.
}
Myname.prototype.inputName = function(){
console.log("name = ", this.name);
}
myName = new Myname();
myName.inputName();
10. 1-1
변수 선언시 1. 숫자로 시작하면 안된다.
주의사항 - 구문에러가 뜬다.
- 알파벳또는 언더바(_)로 시작해야한다.
2. 대,소문자를 구분한다.
- var myName = ‚정짂수‛;
- var myname = ‚Jung JinSoo‛;
3. 예약어는 사용할 수 없다.
- 예약어들은 자바스크립트 프로그램 내에서 식
별자로(변수 이름, 함수 이름, 루프 레이블) 사
용 할 수 없는 단어들이다.
4. 공백이 포함 될 수는 없다.
- 뛰어쓰기를 하면 에러가 납니다!
11. 1-1
기본연산자 - 1. +(더하기)
숫자 - var result1 = 10+10;
- console.log(result1); // 20이 출력
2. –(빼기)
- var result2 = 10-5;
- console.log(result2); // 5가 출력
3. *(곱하기)
- var result3 = 10*2;
- console.log(result3) // 20이 출력
4. /(나누기)
- var result4 = 10/2;
- console.log(result4) // 5가 출력
5. %(나머지)
- var result5 = 10%2;
- console.log(result5) // 0이 출력
12. 1-1
기본연산자 - 1. +(더하기)
문자열 - var name1 = ‚정‛;
- var name2 = ‚짂‛;
- var name3 = ‚수‛;
- var name = name1 + name2 + name3;
- console.log(name); // ‛정짂수‛출력
13. 1-1
복합연산자 1. +=
- var a = 10;
- a += 10;
- console.log(a) // 20이 출력
- a += 10 은 a = a + 10과 동일한 표현이다.
2. –=
- var a = 10;
- a -= 10;
- console.log(a) // 0이 출력
- a -= 10은 a = a -10과 동일한 표현이다.
3. *=
- var a = 10;
- a *= 10;
- console.log(a) // 100이 출력
- a *= 10은 a = a * 10과 동일한 표현이다.
4. /=
- var a = 10;
- a /= 10;
- console.log(a) // 1이 출력
- a /= 10은 a = a / 10과 동일한 표현이다.
5. %=
- var a = 10;
- a %= 10;
- console.log(a) // 0이 출력
- a %= 10은 a = a % 10과 동일한 표현이다.
14. 1-1
증감 연산자 1.전위 연산자(전치 연산자)
- ++(또는 --)변수(피연산자) = 젂위 연산자(또는 젂치 연산자)
- 먺저 변수(피연산자)를 증감 시킨 다음 증가된 값을 결과로 내놓는다.
- var i = 1;
- j = ++i;
- console.log(" i = " + i , " j = " + j); // i와 j의 값은 2
2. 후위 연산자(후치 연산자)
- 변수(피연산자)++(또는 --) = 후위 연산자(또는 후치 연산자)
- 변수(피연산자)를 증가 시키지만 결과로는 원래의 증가되지 않는 값을 내놓는다.
- var i = 1;
- j = i++;
- console.log(" i = " + i , " j = " + j); // i는 1, j의 값은 2
16. 1-1
형변환 1.형변환이란?
(타입 변환) - 숫자 → 문자, 문자 → 숫자로 변환
2. 형변환의 종류는?
- 암시적 형변환
- 명시적 형변환
17. 1-1
암시적변환. 1.암시적 변환이란?
- 자바스크립트 컴파일러에 의해서 자동으로 형변환이 일어난다.
2. 암시적변환의 예
- var result1 = 1+"2"; // 숫자 + 문자 = 문자로 변환
- var result2 = "2"+true; // 문자 + Boolean = 문자로 변환
- var result3 = "15" - 5; // 문자 - 숫자 = 숫자로 변환
18. 1-1
명시적변환. 1.명시적 변환이란?
- '난 이렇게 바뀔꺼야!' 라고 지정해주는 것.
2. 명시적변환의 예
- // 숫자를 문자로
- var numType = 15;
- console.log(numType,typeof(numType));
- var nToString = String(numType);
- console.log(nToString,typeof(nToString));
- // 문자를 숫자로
- var strType = "300";
- console.log(strType,typeof(strType));
- var sToNum = parseInt(strType);
- console.log(sToNum,typeof(sToNum));
19. 1-1
형변환 - 1.암시적 변환 방법
숫자에서 문자로 - var result1 = 1+"2";
- var result2 = "2"+true; // Boolean값을 문자로
2. 명시적 변환 방법
2-1. String()을 이용하는 방법
- var numType = 15;
- var nToString = String(numType);
- // 또는 var test1 = String(15); console.log(test1,typeof(test1))
- console.log(nToString,typeof(nToString));
2-2. .toString(진수)를 이용하는 방법
- var numType = 15;
- console.log(numType.toString()) // 문자열로 변환.
- console.log(numType.toString(8)) // 8짂수 문자열로 변환.
- console.log(numType.toString(10)) // 10짂수 문자열로 변환.
- console.log(numType.toString(16)) // 16짂수 문자열로 변환.
2-3. 이외 방법
- toFixed(); //소수점 이하의 숫자를 지정된 개수만큼 출력
- toExponential(); //소수점 앞의 숫자 하나와 지정된 개수의 소수점 이후 숫자로 구성되는 지수 표기법을
사용하여 숫자를 문자열로 변환... 배우지 않음...
- toPrecision(); // 지정된 수의 유효 숫자 개수만큼 숫자를 출력... 역시 배우지 않음.
20. 1-1
형변환 - 1.암시적 변환 방법
문자에서 숫자로 - var result1 = "2"-2;
Boolean값에서
true는 1
false는 0
- var result2 = 2+true; // Boolean값을 숫자로 의 값을 가지고 있다.
2. 명시적 변환 방법
2-1. Number()을 이용하는 방법
- var test1 = "15";
만약 Number("15abc") 라고 한다면?
- Number(test1);
NaN(Not a Number)라고 뜸!
- Number("15");
- Number(true) 또는 Number(false) // Boolean값 변환
2-2. parseInt()을 이용하는 방법
- var test2 = "30";
- parseInt(test2);
parseInt(true) 혹은 parInt(false)라
- parseInt("30"); 고 한다면?
- parseInt("30abc"); 역시 NaN!
- parseInt("0xFF"); //255를 반환
- parseInt("30.111"); //30을 반환
2-3. parseFloat()을 이용하는 방법 parseFloat("100.50")은?
NaN!
- var test3 = "30.111"; .말고 다른 문자가 나오면 NaN
- parseFloat(test3); .이 중복되서 나오면 뒤에 나오는것은
무시된다.
- parseFloat("30.111");
21. 1-1
if문. 1.if문이란?
- 예시) 만약 연봉협상이 성공한다면 - 연봉상승 , 실패한다면 -밥대싞 라면먹기
- if(연봉협상 == 성공){
- 기본연봉 += 99999999;
- }
- else{
- 밥대싞 라면;
- }
- 조건에 맞는 구문을 실행할때 사용하는 조건 제어문.
2. if문 구조
- 1단 : if문
- 2단 : if ~ else문
- 3단 이상 : if ~ else if ~ else . . . 문
22. 1-1
논리연산자와 1.용도
비교연산자 - 주로 조건식에 사용된다. 연산자 수행되는 연산
== 동등한지 테스트
- 예)
- if(조건식) != 동등하지 않는지 테스트
- for(초기값;조건식;증감)
- while(조건식) === 일치하는지 테스트
!== 일치하지 않는지 테스트
2. 주의할점
<,<= 작다, 작거나 같다
- 조건식의 결과는 항상 true 또는 false >,>= 크다, 크거나 같다
|| OR
3. 예시
&& AND
- var a = true;
- var b = false;
- var c = 10;
- var d = 20;
- var result1 = ( a == true); // a는 true이므로 true
- var result2 = ( c > 10); // c는 10이므로 false
- var result3 = ( c < 10); // c는 10이므로 false
- var result4 = ( c <= 10); // c는 10이므로 true
- var result5 = ( a != true); // a는 true이므로 false
- var result6 = ( a == true || b == true); // a가 맞았으므로 true
- var result7 = (a == true && b == true); // a는 맞았지만 b는 틀렀으므로 false
23. 1-1
if문과 1.예시
비교,논리연산자 - var a = 10;
사용하기. - if ( a < 10 ){
- alert("Warning < 10");
- }
- else if ( a > 10 ){ ===와 ==의 차이점
- alert("Warning > 10");
- }
==는 값만 같으면 되지만
- else {
===는 type도 같아야 한다.
- alert ("a는 10이므로 10보다
- 크거나 작지 않습니다")
예시)
- }
var a = 5;
----------------------------------------------
a == "5" //문자열이지만 5라는 같으므로 true
- if ( a == 10 ){
a === "5" // a는 숫자타입이지만 비교값은 문자이므로
- alert("Warning == 10");
false
- }
- if ( a === "10" ){
- alert("Warning === 문자10");
- }
- if ( a === 10 ){
- alert("Warning === 10");
- }
- if ( a <= 10 ){
- alert("Warning <= 10");
- }
- if ( a >= 10 ){
- alert("Warning >= 10");
- }
24. 1-1
switch문. 1.if문과의 차이점
- 여러개의 조건을 처리해야 할때 if문이라면
- if(조건1)
- else if(조건2)
- else if(조건3)
- ...
- 이렇게 조건이 여러개 있때 젂문적으로 처리하는 구문! switch문 입니다.
- 즉 switch문이란 여러개의 조건에 맞는 구문을 실행할 때 사용하는 제어문(조건문) 입니다.
2. switch문 문법
- switch(식){
- case "값" :
- 구문들;
- break;
- case "값" :
- 구문들;
- break;
- ........
- default :
- // 모든 조건이 맞지 않을 경우 이곳에 있는 구문이 실행됩니다.
- }
25. 1-1
switch문. break 를 넣지 않는다면?
- 예시)
- var inputNumber = window.prompt("1~3까지의 숫자를 넣어주세요");
- switch(inputNumber){
- case "3" :
- alert("3번을 선택했습니다.");
- case "2" :
- alert("2번을 선택했습니다.");
- case "1" :
- alert("1번을 선택했습니다.");
- break;
- default :
- alert("1~3까지의 숫자를 넣어달라니깐....-_-");
- }
- break없는 switch문은 브레이크가 고장난
- 자동차와 똑같습니다. 사고납니다. 넣으라면 넣으세요.
26. 1-1
반복문 1.반복문이란?
-for문 - 말 그대로 뭔가를 여러번 반복하고 싶을때 사용하는 구문.
2. for문 구조
- 반복구문이 한문장일때는 { }를 생략할 수 있다.
- for(초기값; 조건식; 증감)
- 실행구문;
- 반복구문이 여러문장일때는 { }로 감싸야 한다.
- for(초기값; 조건식; 증감){
- 실행구문1;
- 실행구문2;
- ......
- }
3.for문 예시
- for(var i =0; i<10;i++){
- console.log(" i = " + i);
- }
- console.log("최종 i = " + i);
- // for문이 처음 실행되면 초기값,조건식 실행. i 는 0이고 i는 10보다 작으므로 참(true) → 실
행구문 실행(console.log에 i 출력) → 증감 실행된후 조건 실행. 즉 i 는 1이고 i는 10보다 작
으므로 참(true), 조건식이 거짓(false)가 될 때까지 반복.
- .......
- i가 10일때 i 는 10보다 작지 않으므로 거짓(false), 실행구문이 실행되지 않고 for문을 빠져
나옴. 그후 i값 출력
- 그래서 for문 안에 있는 i는 0~9의 숫자가 출력되고 최종 i에는 10이 출력된다.
27. 1-1
반복문 1.continue란?
-continue, - 반복문에서 continue문을 만나면 continue 이후의 구문을 실행하지 않고 바로 for로 이동.
-break
1-1. continue 예시.
- for( var i = 1; i <=10; i ++){
- if(i%2 == 1){ // 만약 i의 나머지 값이 1이라면 (즉 홀수라면)
- continue; // for문으로 이동
- }
- console.log(i); //위의 if문에서 홀수는 걸러지게 되므로 i에는 짝수값만 출력된다.
- }
2.break란?
- 실행구문 중 break문을 만나면 for문은 그대로 정지되며 for루프를 빠져나옴.
- 즉, for문을 강제로 빠져나오고 싶을때 사용하면 됩니다.
2-1. break 예시.
- for( var i = 1; i <=10; i ++){
- if(i == 5){ // 만약 i가 5이라면
- break; // for문을 빠져나온다
- }
- console.log(i); // i가 5이면 위의 break문이 실행되므로 1~4까지의 숫자만 출력된다.
- }
28. 1-1
반복문 1.while문이란?
-while문 - for문과 같은 반복문
- 차이점은 초기값, 증감값 없이 오직 조건식만 있음.
- 즉, while문은 for문보다 좀더 심플한 반복문이라고 볼 수 있다.
2. while문 구조
- while(조건식){
- 실행구문1;
- 실행구문2;
- }
3.while문 사용용도
- for문과 같다.
- 다만, 무한반복문에 더 잘 어울린다.
- 또한, 주로 파일을 읽어들일때 주로 많이 사용된다.(파일 끝에 도달할때까지 반복문 실행되는 원리로)
29. 1-1
반복문 1.while문 예시
-while문 예제 - var i = 1; // 초기값
- while ( i < 10){ //while문 조건식 i가 < 10이 될때까지 반복
- console.log("정짂수"+i); // 콘솔창에 "정짂수" + i값을 출력
- i++; // i값을 증가
- }
2. while문 + continue 예시
- var i = 1; // 초기값
- while ( i <= 10){ // i가 10보다 작거나 같을때까지 반복
- i++; // i값을 증가
- continue; // continue에 걸려서 다시 while문 실행
- console.log( i ); // continue 때문에 구문 실행 안됨
- }
- console.log( "최종 i = " + i ); // 최종적으로 이 값만 출력 ( i = 11)
3.while문 + break 예시
- var i = 1; // 초기값
- while ( i <= 10){ // i의 값이 10보다 작거나 같을때 까지 반복
- if ( i == 5){ // 만약 i의 값이 5와 같다면
- break; // break문에 의해 while문을 빠져나오게 된다.
- }
- console.log( i ); // i 의 값이 5가 될때까지 i값 출력 (1~4까지)
- i++; // i값 증가
- }
30. 1-1
함수 1.함수란?
(function) - 특정 기능을 하는 변수와 구문들의 집합
- 일종의 포장 기술
- 중복 구문을 함수로 묶어서 재사용 가능
2. 기본 함수 구조
- // 파라메터와 반환(return)값이 없는 함수.
- function 함수이름( ){
- }
- // 파라메터만 있고 반환값이 없는 함수.
- function 함수이름(파라메터이름1, 파라메터이름2...){
- }
- // 파라메터와 반환값이 있는 함수.
- function 함수이름(파라메터이름1, 파라메터이름2...){
- ......
- return 반환값;
- }
3.함수종류
- 일반 함수
- 콜백 함수
- 중첩 함수
- 클로저
31. 1-1
함수 생성방법 1.function 키워드로 함수 만들기 - 必
function hello(){
console.log("hello World");
- 가장 일반적인 방식 }
- function 함수이름(파라메터1...){ hello();
- return 반환값;
- }
2. 리터럴 방식으로 함수 만들기 - 必
var hello = function (){
console.log("hello World");
- 이 방식도 많이 사용됨. }
- 함수이름 = function(파라메터1...){ hello();
- return 반환값;
- }
3.이름 없는 함수 만들기
(function(){
- 주로 어떤 내용을 외부와 완젂히 분리 시키고자 할 때 사용 console.log("hello World");
- (function(파라메터1...){})( })();
- return 반환값
- );
4.Function 객체 가지고 만들기
var hello = new Function(undefined,
- 거의 사용 안함 'console.log("hello World")');
- var funcName = new Function(인수... , 함수본체); hello();
32. 1-1
함수 생성방법 1.function 키워드로 함수 만들기 - 必
function hello(){
console.log("hello World");
- 가장 일반적인 방식 }
- function 함수이름(파라메터1...){ hello();
- return 반환값;
- }
2. 리터럴 방식으로 함수 만들기 - 必
var hello = function (){
console.log("hello World");
- 이 방식도 많이 사용됨. }
- 함수이름 = function(파라메터1...){ hello();
- return 반환값;
- }
3.이름 없는 함수 만들기
(function(){
- 주로 어떤 내용을 외부와 완젂히 분리 시키고자 할 때 사용 console.log("hello World");
- (function(파라메터1...){})( })();
- return 반환값
- );
4.Function 객체 가지고 만들기
var hello = new Function(undefined,
- 거의 사용 안함 'console.log("hello World")');
- var funcName = new Function(인수... , 함수본체); hello();
33. 1-1
함수- 1.파라메터란?
파라메터 - 함수 내부는 무작정 접근 불가!
- 접근 하는 방법은 파라메터를 이용해서 값을 넘겨주는 방법.
- 즉! 파라메터의 용도는 외부 데이터를 함수 내부로 받아 올 수 있는 역활.
- 파라메터는 지역 변수로서 함수 내부에서만 사용 가능.
2. 파라메터 예제.
- // 파라메터에 문자를 넘긴 경우
- function showName(name){
- console.log("안녕하세요. 저는" + name + "입니다");
- }
- showNmae("정짂수");
- // 파라메터에 숫자를 넘긴 경우
- function showAge(age){
- console.log("저의 나이는" + age + "입니다");
- }
- showAge(19);
- //함수를 넘긴 경우
- function hello(){
- alert("Hello World");
- }
- function world(func){
- func();
- }
- world(hello);
34. 1-1
함수- 3. arguments란?
arguments와 - 파라메터의 정보가 담겨 있는 객체.
return - 배열은 아니지만 배열처럼 사용하면 된다.
4. return란?
- 함수를 실행한 곳에 실행한 결과물을 알려줘야 할때 사용
- 굳이 돌려줄 값이 없다면 쓸 필요 없다.
5. 예시
- function add(v1,v2){
- var result = v1+v2; //result에 v1과 v2의 더한값을 담는다.
- console.log(arguments); // 파라메터의 정보가 나온다.
- console.log("v1 = " + arguments[0]); // 첫번째 파라메터의 정보(v1)
- console.log("v2 = " + arguments[1]); // 두번째 파라메터의 정보(v2)
- console.log("파라메터의 갯수 = " + arguments.length); // 파라메터의 갯수
- return result; // 변수 result의 값 반환.
- }
- console.log(add(10,20)); // 30이 출력, 만약 return이 없다면 여기엔 undefined이 출력 된다.