레이블이 Web인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Web인 게시물을 표시합니다. 모든 게시물 표시

2020년 7월 19일 일요일

JavaScript - 자주쓰는 함수

변수범위

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
= [100200300400500];
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(6566676869); 
//유니코드에서 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(13));
//1번부터 3개 들고오기 - 늘천따
 
var str = new String("하늘천따지");
alert(str.substring(13));
//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(13));
//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; }
= new Function('a''b''return a+b;');
alert(f(1020));
// 함수는 자바스크립트에선 객체임
// 정의하는 방식으로 해도 되고, 위처럼 진짜 객체처럼 생성도 가능
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(1020);
Math.min(1020);
 
Math.pow(23);
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 = [12];
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("바나나""딸기");
 
= a.concat(b); // 배열 합치기
a.splice(10"바나나"); // 1번 뒤에 0 개의 아이템을 지우고 "바나나" 를 추가
a.push("바나나"); // 뒤에 추가
a.unshift("바나나"); // 앞에 추가
 
a.shift(); // 앞의 값을 삭제하고 리턴
a.pop();   // 뒤의 값을 삭제하고 리턴
a.slice(23); // 2번부터 3번까지 복사 => 2번 인덱스만 있음
 
a.reverse(); // 거꾸로 된 값을 복사
a.toString(); // 값들이 ','로 연결된 string
a.join(); // toString 이랑 같음
a.join("d"); // 값들이 'd' 로 연결된 string
cs
















List