JavaScript 기초 1탄

💎WEB/Web 개념정리

˚₊✩‧₊ JavaScript 기초 1탄 ˚₊✩‧₊

HYEJU01 2024. 4. 27. 02:33

getElementById()

HTML 요소(id="demo" 포함한) 찾아서, 요소 콘텐츠(innerHTML) 를 변경함
큰 따옴표, 작은 따옴표 모두 허용

<p id="demo">반갑습니다!</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "자바스크립트!"'>
Click Me!
</button>

JavaScript Can Change HTML Attribute Values

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

html - src 속성을 변경할 수 있다.

JavaScript Can Change HTML Styles (CSS)

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
Click Me!</button>

css - style 값을 변경할 수 있다.

JavaScript Can Show & Hide HTML Elements

<button type="button" onclick="document.getElementById('demo').style.display='none'">
Click Me!</button>

<button type="button" onclick="document.getElementById('demo').style.display='block'">
Click Me!</button>

html 요소를 숨기거나 보이게 할 수 있다.

The <script> Tag

JavaScript Functions and Events

JavaScript function 는 호출될 때 실행될 수 있는 자바스크립트 코드블록이다.

이벤트가 발생할 때 함수가 호출된다.

JavaScript in <head>

헤더 안에 배치됨

JavaScript in <body>

바디 태그 끝부분 위에 배치됨

(+) 일반적으로 <body> 요소의 맨 아래에 스크립트를 배치하는 것이 페이지의 초기 렌더링 속도를 향상시킬 수 있습니다. 이렇게 하면 브라우저가 스크립트를 실행하기 전에 페이지의 나머지 콘텐츠를 먼저 렌더링하므로 사용자는 페이지를 더 빨리 볼 수 있습니다. 스크립트가 페이지 로드를 차단하지 않고 비동기적으로 로드되는 경우에도 이점을 볼 수 있습니다. 그러나 모든 스크립트가 맨 아래에 위치할 필요는 없으며, 페이지의 특정 요구사항에 따라 스크립트를 적절한 위치에 배치하는 것이 중요합니다.

External JavaScript

외부 파일에 위치함

바디 태그 끝부분에 배치됨

External JavaScript Advantages

HTML과 코드를 분리합니다.
HTML과 JavaScript를 읽고 유지하기 쉽게 만듭니다.
캐시된 JavaScript 파일은 페이지 로드를 가속화할 수 있습니다.
한 페이지에 여러 스크립트 파일을 추가하려면 여러 개의 스크립트 태그를 사용하십시오.

External References

링크

<script src="https://www.w3schools.com/js/myScript.js"></script>

파일경로

<script src="/js/myScript.js"></script>

경로 없이
```
<script src="myScript.js"></script>
```

저작자표시 비영리 변경금지

현재글JavaScript 기초 1탄

개발일지📝