변수범위
var 있으면 지역변수.
없으면 다 전역변수
Core DOM / HTML DOM
Core DOM 은 document. ~~ 이런 형식으로 대부분 브라우저에서 동작함.
HTML DOM 은 id 이름을 객체 명처럼 사용해 직관적이나 표준적이지 않음.
1 2 3 4 5 6 7 8 9 10 11 | <div id="idb" dd="attribute">버튼</div> <script> // Core Dom document.getElementById('idb'); document.getElementsByTagName("div")[0]; alert(document.getElementsByTagName("div")[0].getAttribute("dd")); alert(document.getElementsByTagName("div")[0].hasAttribute("dd")); document.getElementsByTagName("div")[0].setAttribute("dd", 1024); document.getElementsByTagName("div")[0].removeAttribute("width"); document.all["idName"].width = 100; </script> | cs |
1 2 3 4 5 | <script> // HTML DOM function func_1() { img1.width = 1000; }; func_1(); </script> | cs |
Document.Write
출력된 값이 html 로 나옴
1 | document.write("daf"); | cs |
Window
window란?
js 최상위 객체이고 웹 브라우저의 상태를 조절함.
모든 작업이 window 객체에 적용됨.
Alert
1 | alert("sadf"); | cs |
1 | window.alert("sadf"); | cs |
1 2 | window.confirm("헤헤"); confirm("헤벌쭉"); | cs |
Open / Close
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <input type="button" onclick="func_2()" value="새창열기" /> <input type="button" onclick="func_3()" value="새창닫기" /> <script> //var rmsg = window.promt("입력해주세요"); //alert(rmsg); var wobj; function func_2() { if (window.confirm("열까여")) { //window.open("https://www.youtube.com/watch?v=79OpS8OVlM8"); // 창 띄우기 //window.open("https://www.youtube.com/watch?v=79OpS8OVlM8", "_self"); // 현재 창에서 이동 wobj = window.open("https://www.youtube.com/watch?v=79OpS8OVlM8", "_black"); // 새창 띄우기 } } function func_3() { if (window.confirm("끌까여")) wobj.close(); // } </script> | cs |
Timer
1 2 3 4 5 6 7 8 9 | <script> var winset = window.setInterval("func_1()", 1000); window.clearInterval(winset); function func_4() { //재귀적 호출 window.setTimeout("func_4()", 1000); } </script> | cs |
Location
현재 위치에 대한 정보로 수정 시 사이트 이동 등 직접적으로 영향을 줌.
1 2 3 4 5 6 7 8 9 10 11 | <script> alert( "host : " + window.location.host + "\n" + "hostName : " + window.location.hostname + "\n" + "href : " + window.location.href + "\n" + "pathName : " + window.location.pathname + "\n" + "port : " + window.location.port + "\n" + "protocol : " + window.location.protocol + "\n" + "search : " + window.location.search + "\n" ) </script> | cs |
1 | <input type="button" value="구글 사이트" onclick="location.href='http://www.google.com'"/> | cs |
navigator
현재 브라우저의 정보를 담음.
다양한 브라우저를 지원하기 위해 if 문 써서 브라우저별로 제공할 수 도 있음.
Listory
앞으로 가기. 뒤로가기 등이 해당됨.
1 | <input type="button" value="앞으로 가기" onclick="history.go(1)"/> | cs |
for in 구문
1 2 3 | a = [100, 200, 300, 400, 500]; for (b in a) document.write(b); | cs |
기타 객체
문자열 객체
1 2 3 | var str = new String("safd"); str = "safds"; str.length; | cs |
문자열 자료형이랑 다른건 없고, 메소드 사용할 수 있으니 객체라고도 보는 것 뿐.
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 52 53 54 55 56 57 58 59 60 61 62 63 64 | var str = new String("safd"); str.length; var str = new String("safd"); str.charAt(1); //1번 인덱스의 문자 반환 var str = new String("safd"); str.charCodeAt(1); //10진수 유니코드인 정수 반환 var str = new String("safd"); String.fromCharCode(65, 66, 67, 68, 69); //유니코드에서 string 으로 var str = new String("asdfasd"); alert(str.indexOf("asd")); //하나의 문자열 뿐만 아니라 여러 문자열 가능 //처음 검색된 인덱스 반환 //없으면 -1 var str = new String("asdfasd"); alert(str.indexOf("asd", 3)); //3번 인덱스부터 검색 var str = new String("asd f asd f asd f"); alert(str.lastIndexOf("asd", 3)); // 역순 검색 var str = new String("asdfasd"); str.search("5"); //indexOf 와 똑같고 위치기능 없는 대신 정규식 가능함 var str = new String("하늘천따지"); alert(str.substr(1, 3)); //1번부터 3개 들고오기 - 늘천따 var str = new String("하늘천따지"); alert(str.substring(1, 3)); //1번부터 3번 인덱스까지 - 늘천 var str = new String("하늘천따지"); str = str.replace("따지", "지따"); alert(str); str.toUpperCase(); str.toLowerCase(); // 대소문자 바꾸기 var str = new String("하늘천따지거믈현누를황"); alert(str.slice(6)); alert(str.slice(-6)); alert(str.slice(1, 3)); //6번부터~ - 눌현누를황 //-6하면 뒤에서 6번째부터~ - 거물현누를황 //인자 1, 3 면 substring 이랑 똑같음. 1번에서 3번 인덱스 까지. var str = new String("미쿠 루카 린 렌") for (b in str.split(" ")) alert(new String(b)); alert(str.split(" ")[1]); alert(str.split(" ", 2)[1]); //내부를 기준으로 문자 객체들로 리턴 //두번째 인자는 나올 갯수를 지정. -> 미쿠, 루카 | cs |
숫자 객체
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 num = new Number(2012); // ok var num = new Number("2012"); // ok var str = new String("2012"); alert(num + str); alert(num + parseInt(str)); var f = parseFloat("3.14"); alert(f); alert(num.toString() + str); var a = "java"; var b = "10"; alert(isFinite(a)); alert(isFinite(b)); // NaN 확인용 Number.MAX_SAFE_INTEGER; Number.MIN_VALUE; var num = 3.14159215; alert(num.toFixed(2)); alert(num.toPrecision(2)); alert(num.toExponential(2)); // toFixed 는 소숫점 자릿수가 2개 => 3.14 // toPrecision 은 전체 자릿수가 2개 => 3.1 // toExponential 은 지수로 표기 => 3.14e+0 | cs |
함수 객체
1 2 3 4 5 | function func() { return 1; } f = new Function('a', 'b', 'return a+b;'); alert(f(10, 20)); // 함수는 자바스크립트에선 객체임 // 정의하는 방식으로 해도 되고, 위처럼 진짜 객체처럼 생성도 가능 | cs |
수학 함수
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 | Math.e; //자연상수 e Math.LN2; //log Math.LN10; //log10 Math.LOG10E //log10e Math.PI //Pi Math.SQRT2 // root2 Math.SQRT1_2 // root(1/2) Math.random(); // 0 ~ 1 Math.abs(-1); Math.ceil (3.14); Math.floor(3.14); Math.round(3.14); Math.max(10, 20); Math.min(10, 20); Math.pow(2, 3); Math.sqrt(2); Math.log(2); Math.exp(2); Math.sin(2); Math.cos(2); Math.tan(2); Math.asin(1 / 2); Math.acos(1 / 2); Math.atan(1 / 2); | cs |
배열
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var a = [1, 2]; var b = new Array(a, b); var c = new Array(); // 넣는 대로 동적으로 할당됨 var d = new Array(10); // 10만큼 메모리가 예약되어 있을 뿐임 a.length; var a = new Array("사과", "배"); var b = new Array("바나나", "딸기"); c = a.concat(b); // 배열 합치기 a.splice(1, 0, "바나나"); // 1번 뒤에 0 개의 아이템을 지우고 "바나나" 를 추가 a.push("바나나"); // 뒤에 추가 a.unshift("바나나"); // 앞에 추가 a.shift(); // 앞의 값을 삭제하고 리턴 a.pop(); // 뒤의 값을 삭제하고 리턴 a.slice(2, 3); // 2번부터 3번까지 복사 => 2번 인덱스만 있음 a.reverse(); // 거꾸로 된 값을 복사 a.toString(); // 값들이 ','로 연결된 string a.join(); // toString 이랑 같음 a.join("d"); // 값들이 'd' 로 연결된 string | cs |
댓글 없음:
댓글 쓰기