[TIL/JavaScript] script 태그, 이벤트, 문자열과 숫자

JavaScript와 html의 차이

- htmld은 영원히 1+1 이라는 문자열이 출력되지만
- JavaScript는 1+1을 계산한 2가 출력됨
- 자바스크립트는 계산기처럼 작동할 수도 있는 다재다능한 녀석

<h1>JavaScript</h1>
<script>
  document.write(1+1); // 1+1을 계산한 2가 출력 됨
</script>
<h1>html</h1>
1+1 // 문자열 그대로 1+1이 출력 됨

IntelliJ에서 ![TAB] 을 하면 HTML 템플릿을 자동으로 완성해준다.

---

이벤트

- 웹 브라우저 위에서 일어나는는 것을 사건, 즉 이벤트라고 함

onclick 속성의 속성값은 브라우저가 기억하고 있다가, onclick의 속성이 위치하고 있는 태그를 사용자가 클릭했을 때, 기억하고 있었던 JS 코드를 JS 문법에 따라 해석해서 거기 적혀있는대로 브라우저가 작동함

<input type="button" value="hi" onclick="alert(`hi`)">

- 위 코드에서는 alert(`hi`) 코드를 브라우저가 기억하고 있다가 실제로 사용자가 클릭했을 때 실행한다는 뜻임

 

<input type="text" onchange="alert(`changed`)">

- 위 코드에서는 텍스트 창에 뭔가를 쓰고 마우스 커서가 창을 이탈하거나 텍스트 창을 제외하고 다른 곳을 클릭하면, changed 라는 경고창이 뜸

 

<input type="text" onkeydown="alert(`key down!`)">

- 위 코드에서는 아무 키를 누르면 key down! 이라는 경고창이 표시 됨

---

문자열과 숫자

.length: 문자열의 길이를 세어줌
.touppercase(): 문자열을 모두 대문자로 바꿈
.indexOf(): 찾고자 하는 문자의 인덱스 위치를 알려줌

---

출처

1. 생활코딩 `WEB2 JavaScript` - https://www.youtube.com/watch?v=q4c69koKcOc&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9