728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>이벤트</title>
            <meta charset="UTF-8">
            <meta http-equiv="x-uv-compatible">
    </head>
    <body>
        <div id="button">Click!</div>
        <script>
            // 선택된 요소 .addEventListener(이벤트 종료, 함수)
            let buttonElement = window.document.getElementById('button');
            buttonElement.addEventListener('click', () => {
                alert('hello');
                // alert('hello');
                // alert(x); x라는 내용을 가지는 메세지 출력
                if (confirm('Really?')) {
                    alert('yes');
                    // confirm(x) x라는 내용을 가지는 메세지를 출력하나 [확인]클릭시 true, [취소]클릭시 false를 반환한다.
                     }
                else{
                    alert('no');
                }
            });


        </script>
    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

함수(let)  (1) 2022.12.25
조건문  (0) 2022.12.25
요소선택  (1) 2022.12.25
오브젝트(키-값)  (0) 2022.12.25
연산자  (0) 2022.12.25
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>요소선택</title>
            <meta charset="UTF-8">
    </head>
            <body>
        <!--
            id 속성 값은 스타일링 목적을 사용 x (참고로 css선택자는#)
            주로 javascript에서 요소를 선택하기 위해 사용
            한 문서 내에 같은 이름을 가지는 id가 중복되면 안된다.
        -->
        <a id="message">Hi!</a>
        <br>
        <a>hello?</a>
        <br>
        <a>Bye</a>
        <script>
            // window : 브라우저 그 자체
            // document(혹은 window.docurment) : html 태그
            // id로 요소 선택
            // window.document.getelementById(id값)
            // id값을 id 속성 값을 가지는 요소를 변수로 반환한다.
            window.document.getElementById('message').innerText = 'Changed';
            message.style.color = 'red;'
            message.style.background

            // null의 속성을 지정할 수 없다.('innertText'지정 중)
            // something.some();// some 이라는 메서드 함수
            // something.some; //some 이라는 속성
            // innerText 속성: 선택된 요소의 내부 텍스트 내용을 지정한다.
            // innerHTML 속성: 선택된 요소의 내부 HTML 내용을 지정한다.
            // style 속성 선택된 요소의 css 속성을 변경한다. 단, 케밥 케이싱되어 있는 css 속성이름을 카멜케이싱해야한다.
            // message.remove();
            //remove 메서드 : 선택된 요소를 제거한다.

            // css 선택자로 요소를 선택
            // 어떠한 부모/선조 요소.querySelector(css선택자)
            // css 선택자에 부합하는 요소를 한 개만 선택한다. 단 이때 이는 반드시 앞서 나온요소의 자식이거나 자손이다.
            let second = window.document.body.querySelector('a:nth-of-type(2)');
            second.innerText = 'i am second element'
       
            // css 선택자로 요소들을 선택
            // 어떠한 부모/선조 요소.querySelectorAll(css선택자)
            // 이떄 반환되는 타입은 Array 아니고 NodeList임.(비슷함)
            // NodeList를 Array로 바꾸기 위해서는 Array.from()를 사용한다.
            let anchors = window.document.body.querySelectorAll('a');
            console.log(anchors.length);
            // anchors.forEach(x => {
            //     x.innerText = 'changed!'
            // })


       
       
        </script>
    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

조건문  (0) 2022.12.25
이벤트(addEventListener)  (0) 2022.12.25
오브젝트(키-값)  (0) 2022.12.25
연산자  (0) 2022.12.25
변수  (0) 2022.12.25
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>오브젝트</title>
            <meta charset="UTF-8">
            <script>
                // 오브젝트 : 키-값 쌍으로 이루어진 것(HashMap 이랑 비슷)
                // 키는 항상 문자열! 숫자 불가, 쌍/홑따옴표 생략 가능  
                // 키와 값은(:)으로 구분한다.
                let students = {
                    김학생:'kim',
                    이학생:'Lee',
                    박학생:'Park'
                };
                console.log(students['김학생']); //kim
                console.log(students.이학생); //Lee
               
                //쌍 추가
                students.최학생 = 'Choi';
                //students['최학생'] = 'Choi';
               
                //쌍 수정
                students.박학생 = 'Bak';
               
                // 쌍 삭제
                delete students.최학생;

                // 키 배열
                let keys = Object.keys(students); //['김학생', '이학생', '박학생']
                console.log(keys);
                console.log('------');

                keys.forEach(key => {
                    console.log(students[key]);
                });

               
               
               
                Object.keys(students).forEach(key => {
                    console.log(students[key]);
                })


                //값 배열
                Object.values(students); //[ 'Kim', 'Lee', 'Bak']

            </script>
    </head>
    <body>

    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

이벤트(addEventListener)  (0) 2022.12.25
요소선택  (1) 2022.12.25
연산자  (0) 2022.12.25
변수  (0) 2022.12.25
배열  (0) 2022.12.25
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>JS : 연산자</title>
            <meta charset="UTF-8">
            <script>
                // 할당 연산자
                let a;
                a = 5; // 할당 연산자. a = b 꼴에서 b값을 a에 대입(할당)한다.

                // 더하기 연산자
               
                a = 5 + 5; // 할당 연사자의 우선순위는 최하위로 우측 피연산자의 연산이 모두 완료된 뒤 좌측 피연산자에 할당한다. 즉, a = b 꼴에서 b에 해당하는 연산을 모두 끝낸 뒤 a에 대입한다는 뜻.

                // 더하기 할당 연산자(복합대입연산)
                a += 5; // a = a + 5 와 동일한 결과를 가짐.


                // 뺴기 연산자
                a = 5 - 5;
                a -= 5; // a = a - 5;

                //나누기 연산자
                a = 5 / 5;
                a /= 5; // a = a / 5;

                //나머지 연산자
                a = 5 % 5;
                a %= 5; // a = a % 5;

                // 비교 연산자
                // 동등 (비교) 연산자
                //  a == b 꼴은 a와 b가 같은가에 대한 여부를 반환하며 형이 다르더라도 형변환을 통해 비교할 수 있을 경우 형변환 후 비교한다. 이는 부등(비교) 연사자에도 동일하게 적용된다.
                console.log(5==5); // true : 참
                console.log(5==5); // false : 거짓
                console.log(5=="5"); // true : 참
                console.log(5=="3"); // false : 거짓
                console.log(5=="3"); // true : 참. JS

                // 부등(비교) 연산자
                // a != b
                console.log('----');
                console.log(5 != 5); // false : 거짓
                console.log(5 != '5'); // flase : 거짓


                // 일치(비교) 연산자
                // a === b
                console.log('-----');
                console.log(5 === 5); // true : 참
                console.log(5 === '5'); // flase : 거짓

                // 불일치 (비교) 연산자
                //  a !== b
                console.log(5 !== '5'); // true : 참
                console.log(5 !== 5); // flase : 거짓


                // 초과 (비교) 연산자
                //  a > b 꼴에서 a가 b보다 큰가에 대한 여부를 반환한다. 이 때 초과/이상/미만/이하 연산자 모두각 피연산자의 타입이 동일해야 한다.
                console.log(5>3); // true
                //  이상(>=), 미만(<), 이하(<=) 생략


                // 증가 연산자
                // a++ 혹은 ++a 꼴로 이용.
                // a++는 외부 구문을 실행 한 뒤 증가시킨다
                // ++a 는 외부 구문을 실행하기 전 증가시킨다.
                let pp = 5;
                console.log(pp++);//5 출력
                console.log(++pp);//7 출력

                // 감소 연산자
                // a-- 혹은 --a 꼴로 이용.
                let mm = 5;
                console.log(pp--);//5 출력
                console.log(--pp);//3 출력

                // 거듭제곱 연산자
                // a ** b 꼴에서 a의 b승을 반환다.
                console.log('-----');
                console.log(2 ** 3);

                //and 연산
                // a && b 꼴에서 a조건과 b조건 모두 참일 때 참을, 아니라면 거짓을 반환한다.
                console.log(5 == 5 && 3 > 1); //true
                console.log(5 > 1 && 1 > 5); //false

                //or 연산
                // a || b 꼴에서 a조건과 b조건 중 하나 이상이 참일 때 참을, 아니라면 거짓을 반환한다.
                console.log(5 == 5 && 3 > 1); //true
                console.log(5 > 1 && 1 > 5); //false
                console.log(1 > 100 || 5 < 5); //false

                // 부정
                // !a 꼴에서 a조건의 결과를 부정(true 를 false로 , false를 true로)한다.
                console.log('-----');
                console.log(!true);
                console.log(!true);

            </script>
    </head>
    <body>

    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

요소선택  (1) 2022.12.25
오브젝트(키-값)  (0) 2022.12.25
변수  (0) 2022.12.25
배열  (0) 2022.12.25
for(반복문)  (0) 2022.12.25
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>변수</title>
            <meta charset="UTF-8">
            <script>
                // 실행점 :
                // int main(void); public static void main(String[] args) {}
                // Javascript : 실행점을 위한 메서드가 없음
                // let 번수이름;
                // let 변수1 = '문자열';
                // let 변수2 = "문자열";
                // let 변수3 = `문자열`; //백틱(`)
                // let 변수4 = 5;
                // let 변수5 = true;
                console.log('Hello');

                let messagr = 'Hello World';
                console.log(messagr);

                messagr = 'Another value';
                console.log(messagr);

                // let massage; // 오류 발생. 동일한 이름의 변수 선언 불가.


                const pi = 3.141592;
                console.log(pi);

                // pi =123; // 오류 발생. 상수에 값을 제할당 할 수 없다.
                // const let = 5; //오류 발생. 약속된 키워드를 변수/상수 이름으로 사용할 수 없다.
            </script>
    </head>
    <body>

    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

오브젝트(키-값)  (0) 2022.12.25
연산자  (0) 2022.12.25
배열  (0) 2022.12.25
for(반복문)  (0) 2022.12.25
transition(CSS속성 변환 시간제어)  (0) 2022.12.24
728x90
반응형
// 배열(Array) : 하나의 변수에 여러개의 값을 넣기 위해 사용
                let emptyArr = [];
                // int[] aa = new int[] {};
                let arr = [1, 2, 3, 4, 5];
                // arr.length; : 배열의 길이(개수)를 반환한다.
               
                // arr.at(1); //2반환. 주어진 인덱스에 해당하는 아이템을 반환한다.
                // arr[1] : 위와 동일
                // arr.indexOf(3); // 2 . 주어진 값과 같은 아이템의 인덱스를 반환한다. 일치하는 아이템이 없다면 -1을 반환한다.

                // arr.pop(); //5. 배열의 마지막 값을 반환하고 배열에서는 삭제한다.
                // arr.push(6); // 배열의 마지막 자리에 주어진 값을 추가한다.
                // arr.slice(a, b); // 배열의 a번 인덱스 부터 b번 인덱스 까지의 값들을 가지는 새로운 배열을 반환한다.
                // arr.splice(a, b, c,....); //배열의 a번 인덱스 자리에 b 개에 해당하는 아이템을 c... 값으로 치환한다. 이때 b가 0이면 치환하지 않고 추가한다. 가령 [1, 2, 5].splice(1, 0, 2, 3)은 [1, 2, 3, 4, 5] 추가로, c...를 전달하지 않는다면 a자리 부터 b개에 해당하는 아이템을 삭제한다.


                // arr.every(f); // 메서드가 호출되는 대상 배열의 아이템을 순차적으로 전달된 함수 f의 전달 인자로 활용하여 모든 아이템이 함수 f에 대해 참을 반환하는 가에 대한 여부를 반환
                                      // 익명함수(Anonymous Function) : 이름없는 함수
                                      // 판별함수
                console.log( arr.every(x => x > 0)); //true
                console.log( arr.every(x => x > 0)); //true

                console.log(arr.every((x) => {
                    return x > 0;
                }));

           
                // arr.filter(f); // arr 배열의 각 아이템을 매개변수로 받는 함수 f에 대해 참을 반환하는 아이템만 가지는 새로운 배열을 반환한다.
                console.log(arr.filter(x => x > 3)); //[4, 5]
                console.log(arr.filter(x => x < 0)); //[]
               
               
                // arr.forRach(f); // arr 배열의 각 아이템을 반복한다. 반환값 없음.
                arr.forEach(x => console.log(x)); // 1, 2, 3, 4, 5
                // for (let i =0; i < arr.length; i++)[
                // console.log(arr[i]);
                // }

                // arr.map(f); // 함수 f에 대해 arr 아이템을 전달하여 반환되는 새로운 값을 가지는 새로운 배열을 반환한다. 이 떄 arr과 새로 반환된 배열의 길이는 항상 같다

                console.log(arr.map(x => x * 2)); //[2, 4, 6, 8, 10]
                console.log(arr.map(x => x**2)); //[1, 4, 9, 16, 25]
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

연산자  (0) 2022.12.25
변수  (0) 2022.12.25
for(반복문)  (0) 2022.12.25
transition(CSS속성 변환 시간제어)  (0) 2022.12.24
transform(요소의 형태나 위치를 변환)  (1) 2022.12.24
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>반복</title>
            <meta charset="UTF-8">
            <script>
                for (let i = 0; i < 10; i++) {
                   
                    console.log(i);
                }
            </script>
    </head>
    <body>

    </body>
</html>

 

728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

변수  (0) 2022.12.25
배열  (0) 2022.12.25
transition(CSS속성 변환 시간제어)  (0) 2022.12.24
transform(요소의 형태나 위치를 변환)  (1) 2022.12.24
padding(외부 여백)  (0) 2022.12.24
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>transition</title>
            <meta charset="UTF-8">
            <style>
                img {
                    width: 500px;
                    /* transition : 요소가 영향을 받는 선택자가 변경될 때 변경되는 CSS 속성에 대해 변화가 완료되기 까지 걸리는 시간과 방법에 대해 정의한다.*/
                    transition-duration: 5000ms;
                    /* transition-duration : transition이 완료되기 까지 걸리는 시간 지정. ms 혹은 s단위 사용.*/
                    transition-timing-function: ease;
                    /* transition-timing-function: 변화가 생긴 속성이 적용되는데 사용될 함수 지정.
                    ease-in : 시작은 느리게 끝은 빠르게
                    ease-out : 시작은 빠르게 끝은 느리게
                    ease-in-out : 시작과 끝은 느리게 중간이 빠르게
                    ease : ease-in-out이랑 비슷한데 시작이 좀 더 빠름
                    linear : 선형
                    cubic-bezier : 사용자 지정 입방체 베지어곡선에 따름 모든 함수는 시간대비(0~tran'-dur') 속성 변환 완료율(%)에 따른 2~3차 방정식을 풀이 될 수 있다.
                    */
                    transition-property: ;
                    /* transition-property : 변화하는 속성을 제한한다. 속성을 콤마로 구분하여 여러개를 사용할 수 있음*/
                    /* transition 을 적용하는 모든 속성은 중간값이 있어야 한다.
                    가령, display나 position은 적용되지 않으며 width 나 height 같은 경우 또한 auto에서 리터럴로 적용할 수 없다.*/
                }

                img:hover {
                    filter: blur(10px) grayscale(100%);
                }
            </style>
    </head>
    <body>
        <img src="data:image/jpeg;base64,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">
    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

배열  (0) 2022.12.25
for(반복문)  (0) 2022.12.25
transform(요소의 형태나 위치를 변환)  (1) 2022.12.24
padding(외부 여백)  (0) 2022.12.24
position  (0) 2022.12.24

+ Recent posts

728x90
반응형
">

티스토리툴바