개발나라 스용공주

[생활코딩] JavaScript 왕기초 1장 - Visual Studio Code / html과 js 비교하기 본문

WEB/JavaScript

[생활코딩] JavaScript 왕기초 1장 - Visual Studio Code / html과 js 비교하기

스용공주 2024. 8. 9. 15:43
728x90
728x90

이번 강의는 아래 영상을 바탕으로 작성되었습니다.

(생활코딩)

https://www.youtube.com/watch?v=Ru5zGHkOgic&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=3

 

 

 

 

[ JavaScript란? ]

웹이 게임처럼 사람과 상호작용하도록 하는 것

- html : 웹페이지를 만드는 발판으로 '발판'의 역할을 한다. (멈춰있는 정보)

- JavaScript : 사용자와 상호작용하도록 기능을 추가하는 '기능'의 역할을 한다. (이를 움직이도록 만드는 것)

 

웹은 사용자와 상호작용하며 검색도 가능하도록 만든 것.

 

 

 

 

[ html에서 JS 사용하기 ]

html에서 JavaScript를 사용하려면 이것이 JavaScript 문법이라는 것을 알려줘야한다.

그 표시는 <script> 태그를 사용한다.

 

아래 코드를 보면 <script> 코드를 사용하여 현재 문서(document)에 괄호 안에 작성한 문자를 써낸다는 것(write)을 해석할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <script>
        document.write('JavaScript');
    </script>
    <h1>html</h1>
</body>
</html>

 

 

 

 

이렇게 보면 문자를 출력하는 부분에서는 JavaScript와 html이 같아보이지만 이 두가지는 차이점이 있다.

아래 코드를 보면 똑같이 1+1을 하고 있지만 html은 1+1 이라는 글자 그대로를 출력한 것과 달리 JavaScript는 1+1의 계산 결과 값인 2를 써내고 있는 것을 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <h1>JavaScript</h1>
    <script>
        document.write(1+1);
    </script>
    <h1>html</h1>
    1+1
</body>
</html>

 

 

또 만약 이를 문자취급하여 앞에 따옴표를 붙여주었다면 아래와 같이 문자로서 1+1이라는 문자 그대로를 써낸다.

<h1>JavaScript</h1>

    <script>
        document.write('1+1');
    </script>

 

 

 

 

728x90
728x90

'WEB > JavaScript' 카테고리의 다른 글

[생활코딩] JavaScript 왕기초 6장 - Visual Studio Code / 조건문 실습  (0) 2024.08.23
[생활코딩] JavaScript 왕기초 5장 - Visual Studio Code / 조건문  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 4장 - Visual Studio Code / 비교연산자와 불리언(Boolean)  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 3장 - Visual Studio Code / 야간모드 버튼 만들기 실습  (0) 2024.08.14
[생활코딩] JavaScript 왕기초 2장 - Visual Studio Code / 이벤트(event)  (0) 2024.08.09
'WEB/JavaScript' Related Articles more
Comments