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

More articles

See more posts

얕은 복사(Shallow Copy) vs 깊은 복사(Deep Copy)

February 26, 2024
얕은 복사(Shallow Copy) vs 깊은 복사(Deep Copy)

자바스크립트 제이슨 변환

February 26, 2024
자바스크립트 제이슨 변환

자바스크립트 기본

February 26, 2024
자바스크립트 기본

JUnit 이란? - 자바 단위 테스트

February 22, 2024
JUnit 이란? - 자바 단위 테스트
RSSPowered by inblog