wp_ch2 복습
elixir.html
<img src="images/green.jpg"> images 폴더에 이미지넣고 이미지 표시 정도
a href 사용해서 페이지 간의 이동보여주기
ex1.html
html, css는 할때 다시 보면서 하는게 좋을듯, 우선순위 둬서 먼저 wp_ch6,7 부터
-------------------------
wp_ch6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> //내장타입 var number = 5; //object타입 var number2 = new Number(5); console.log(number + ":" + typeof number); console.log(number2 + ":" + typeof number2); console.log(number2 + number); number.myVal = 20; //내장 타입 객체는 확장이 되지 않는다. ex)number,boolean,string,function console.log(number.myVal);//number.myVal - 이안된다. //Object 타입의 객체는 확장이 가능하다. - new로 만든건 확장 가능 number2.myVal = 20; console.log(number2.myVal); var pi = 3.14; console.log(pi + ":" + typeof pi); var str = "Hello world"; var str2 = new String("Hello world"); console.log(str + ":" + typeof str); console.log(str2 + ":" + typeof str2); var b = false; var b2 = new Boolean(false); console.log(b + ":" + typeof b); console.log(b2 + ":" + typeof b2); var f = function() { }//함수를 자바처럼 만들수 있지만, 이 방식으로 해야 일관성있다 console.log(f() + ":" + typeof f); var f2 = Function("x", "y", "return x+y"); console.log(f2(10, 20) + ":" + typeof f2); | cs |
내장타입과 object타입 구분
new해서 객체 선언하는것이 object타입이다
내장타입은 위처럼 number.a 로 확장이 불가하다.
new로 만든것은 확장이 가능하다.
메서드 만드는 형식이
var f = function(){
}
방식으로 만드는것이 좋다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* var f2 = function(x,y){ return x+y; } */ var a = []; var a2 = new Array(); console.log(a + ":" + typeof a); console.log(a2 + ":" + typeof a2); //제일 중요 var o = {}; var o2 = new Object(); console.log(o + ":" + typeof o); console.log(o2 + ":" + typeof o2); //consloe 브라우저 내장 객체 - 브라우저 콘솔에서 제공 console.log("로그입니다."); console.warn("경고입니다."); console.error("에러입니다."); console.info("정보입니다."); </script> </head> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: #D94A38; width: 90px; height: 20px; padding: 40px;">클릭하세요!</div> </body> </html> | cs |
var a = [];
var a2 = new Array();
배열은 type이 object이다.
var o = {};
var o2 = new Object();
이 배열도 다 object이다.
그 밑에는 log, warn error 등 찍는법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <script> //null vs undefined var myVar; var myVar2 = null; //변수 생성시 null 잡아주는게 좋다. console.log(myVar + ":" + myVar2); console.log(myVar == myVar2); console.log(myVar === myVar2);//type까지 같이 검사한다. console.log("2" == 2); console.log(parseInt("2") == 2); console.log("2" === 2); console.log(parseInt("2") === 2); // == equality , 값의 등치성 , 형변환o console.log(true == 1); console.log('abc'== new String('abc')); //console.log('false'==false); console.log(0==false); // === !==, identity,객체의 동일성, 형변환x console.log("2" === 2); console.log(true === 1); console.log('abc'=== new String('abc')); // 추천: // == 연산자를 사용할때는 엄격하게 형변환을 해서 // 두 피연산자의 타입을 맞춘다. console.log(parseInt("5")==5); //변수 범위(1.var 사용 유무, 2.var를 사용했을 때, 3.변수의 범위는 함수 안) i=5; console.log(i); f = function(){ //var를 안쓰면 전역변수를 가져다 쓰는것이다. //함수 안에서 var를 사용해서 변수를 정의하면 //지역 변수가 된다. var i=20; console.log(i); i= i-10; } f(); console.log(i); //결론은 무조건 var를 사용해서 변수를 정의한다. | cs |
undefined와 null차이
===은 ==(값)에서 type까지 같이 비교해준다.
함수안에선 var로 잡아준다. 안쓰면 전역변수쓰는거니까 무조건 붙여주는게 좋다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | //statement 구문 //statement JS Engine이 읽어서 실행하는 단위 // \n or ;(세미콜론) 단위로 읽어서 실행 var str = "hello world"; console.log(str); //오류가 안난다 자바스크립트가 개행 단위로 읽어서 실행하기 때문에 그러나 //var str = "hello world" console.log(str) //붙여서는 안되 //동적 타이핑(Dynamical Typing) //실행중에 변수의 타입을 결정한다. var a = 10; console.log(a + ":" + typeof a); a="hello World"; console.log(a+":"+typeof a); //추천 : 엄격하게 하나의 변수 타입은 변경하지 않도록 코딩한다. //전역(global) 객체 window console.log(window.a); var o = {}; o.name = "둘리"; o.age =new Number(20); o.age.man = 19; console.log(window.o); console.log(window.o.name); console.log(window.o.age); console.log(window.o.age.man); console.log(o); console.log(o.name); console.log(o.age); console.log(o.age.man); //변수도 window의 객체이다. 전역변수 = window </script> </head> <body> </body> </html> | cs |
이 뒤로는 그냥 중요한거만 필기
json
//(J)ava(S)cript(O)bject(N)otation
자바 스크립트에서 객체생성을 위한 표기하는 방법
어떤 객체던지 표기할수 있고 바로 생성이 가능하다.
var o3 = {
name : "또치",
age : 20
};
console.log(o3);
6-4 alert로 팝업처럼 하나 띄워줌
728x90
댓글