inblog logo
|
{CODE-RYU};
    Javascript

    자바스크립트 문법

    Feb 26, 2024
    자바스크립트 문법
    Contents
    1. JavaScript Variables (변수 선언)2. JavaScript Operators (연산)3. JavaScript Arithmetic (산술)4. JavaScript Functions (함수 호출)5. JavaScript Objects6. JavaScript Events7. JavaScript Strings8. JavaScript Template(Back-tics, ` )9. JavaScript Arrays (자바스크립트 배열)10. JavaScript Date Formats12. JavaScript Comparison13. JavaScript if, else, and else if14. JavaScript For Of15. JavaScript While Loop16. JavaScript Break and Continue
     

    1. JavaScript Variables (변수 선언)

     
    자동으로 변수 선언
    x = 5;
y = 6;
    var 사용
     var x = 5;
 var y = 6;
     
    let 사용
    let x = 5;
let y = 6;
     
    const 사용
    const x = 5;
const y = 6;

    2. JavaScript Operators (연산)

     
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p id="demo"></p>
// id 는 식별자
    <script>
        let x = 5;
        let y = 2;
        let z = x + y;
        document.getElementById("demo").innerHTML = "x + y =" + z;
				//식별자 demo의 데이터를 불러옴
    </script>

</body>

</html>
    notion image
    <script>
        let x = 5;
        let y = 2;
        let w = 10;
        let z = (x + y) * w;
        document.getElementById("demo").innerHTML = "result =" + z;
    </script>
     
    notion image
    notion image
     

    3. JavaScript Arithmetic (산술)

     

    증감

    <body>
    <p id="demo"></p>
    <script>
        let x = 5;
        x++;
        let z = x;
        document.getElementById("demo").innerHTML = "result=" + z;
    </script>
</body>
    notion image
     

    지수화

    <body>
    <p id="demo"></p>
    <script>
        let x = 5;
        let z = x ** 2;
        document.getElementById("demo").innerHTML = "result=" + z;

    </script>
</body>
    notion image

    4. JavaScript Functions (함수 호출)

     
     
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        function myFunction(p1, p2) {
            return p1 * p2;
        }

        let result = myFunction(4, 3);
        document.getElementById("demo").innerHTML = "result=" + result;

    </script>
</body>

</html>
    notion image
     

    5. JavaScript Objects

     

    객체 정의

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
        document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old.";

    </script>

</body>

</html>
     
    notion image
     

    6. JavaScript Events

     
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
    <p id="demo"></p>
</body>

</html>
     
    notion image
     
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="displayDate()">The time is?</button>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>

    <p id="demo"></p>
</body>

</html>
     

    7. JavaScript Strings

     

    쌍따옴표 온따옴표 둘 다 사용 가능

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        let carName1 = "Volvo XC60";
        let carName2 = 'Volvo XC60';

    </script>
</body>
</html>
     

    문자열 길이 확인

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        let text = "ABCDEFGHIJK";
        document.getElementById("demo").innerHTML = text.length;

    </script>
</body>

</html>
     

    문자열 내부의 문자열

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        let text = "We are the so-calles \"Vikings\" from the north";
        document.getElementById("demo").innerHTML = text;

    </script>
</body>

</html>
    notion image
     

    8. JavaScript Template(Back-tics, ` )

     
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        let text = `He's often called "Johonny"`;
        document.getElementById("demo").innerHTML = text;
    </script>
</body>

</html>
    notion image
     

    문자열을 변수로 사용

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        let firstName = "John";
        let lastName = "Doe";
        let text = `Welcome ${firstName},${lastName}!`;
        document.getElementById("demo").innerHTML = text;
    </script>
</body>

</html>
     

    HTML에 탬플릿 문자열 사용

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        let header = "Template Strings";
        let tags = ["template strings", "javascript", "es6"];
        let html = `<h2>${header}</h2><ul>`

        for (const x of tags) {
            html += `<li>${x}</li>`;
        }
        html += `</ul>`;
        document.getElementById("demo").innerHTML = html;

    </script>
</body>

</html>
     
    notion image

    9. JavaScript Arrays (자바스크립트 배열)

     

    자바스크립트 배열에 넣기

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        const cars = ["Saab", "Volvo", "BMW"];
        document.getElementById("demo").innerHTML = cars;

    </script>

</body>

</html>
    notion image

    이렇게도 가능

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        const cars = [];
        cars[0]="Saab";
        cars[1]="Volvo";
        cars[2]="BMW";
        document.getElementById("demo").innerHTML = cars[1];

    </script>

</body>

</html>
    notion image
     

    배열 추가

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="myFunction()">클릭</button>
    <p id="demo"></p>
    <script>
        const fruits = ["Banana", "Orange", "Apple"];
        document.getElementById("demo").innerHTML = fruits;

        function myFunction() {
            fruits.push("Lemon");
            document.getElementById("demo").innerHTML = fruits;
        }

    </script>

</body>

</html>
     
    notion image
    클릭 버튼을 누르면 동적으로 값이 추가된다.
     
    💡
    배열과 객체의 차이점
    JavaScript에서 배열은 번호가 매겨진 인덱스를 사용한다 .
    JavaScript에서 객체는 명명된 인덱스를 사용한다 .

    10. JavaScript Date Formats

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        const d = new Date("2024-02-19");
        document.getElementById("demo").innerHTML = d;

    </script>

</body>

</html>
    notion image

    new Date() 메서드 호출

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo"></p>
    <script>
        const d = new Date();
        document.getElementById("demo").innerHTML = d;
    </script>

</body>

</html>
    notion image

    12. JavaScript Comparison

     

    13. JavaScript if, else, and else if

     

    14. JavaScript For Of

     

    15. JavaScript While Loop

     

    16. JavaScript Break and Continue

     
     
     
     
    Share article
    Contents
    1. JavaScript Variables (변수 선언)2. JavaScript Operators (연산)3. JavaScript Arithmetic (산술)4. JavaScript Functions (함수 호출)5. JavaScript Objects6. JavaScript Events7. JavaScript Strings8. JavaScript Template(Back-tics, ` )9. JavaScript Arrays (자바스크립트 배열)10. JavaScript Date Formats12. JavaScript Comparison13. JavaScript if, else, and else if14. JavaScript For Of15. JavaScript While Loop16. JavaScript Break and Continue

    {CODE-RYU};

    RSS·Powered by Inblog