자바스크립트(JavaScript)는 객체 기반의 스크립트 언어입니다.
HTML로는 웹의 내용을 작성하면 CSS는 웹을 디자인 할 수 있고 자바스크립트를 이용해 웹의 동작을 구현 할 수 있습니다.
내부 스크립트
자바스크립트 코드는 <script>태그를 HTML문서안에 멓어서 사용한다.
주로 HTML코드를 작성하고 그 아래에 (<body>)안에 사용한다.
<script>JavaScript</script>
외부 스크립트
.js확장자로 파일을 따로 저장한 후에 불러올 수 있다.
<body>
</body>
<script src ="./index.js"></script>
</html>
JavaScript 선택자
셀렉터(선택자)
자바스크립트에서는 셀렉터를 생성하고 이벤트를 붙이는 방식으로 진행합니다.
document.getElementsByClassName( )
document.getElementsByTagName( )
document.getEementsById( )
document.querySelector( )
document.querySelectorAll( )
class selector(클래스 선택자)
document.getElementsByClassName(클래스명)[순서];
클래스는 같은 이름으로 여러개를 생성 할 수 있기 때문에 복수s를 붙여서 elements를 사용합니다.
또 여러개를 생성할 수 있기 때문에 뒤에 [순서]를 써줍니다.
순서는 0부터 시작되기 때문에 두번째 태그를 선택한다면 1을 적어주면 됩니다.
document.getElementsByClassName('hello world')[1]
아이디 선택자
document.getElementById(아이디명);
아이디는 한번만 사용할 수 있고 여러개의 같은 아이디를 사용할 수 없습니다
따라서 getElement에 s를 붙이지 않습니다
또 하나만 존재하기 때문에 순서도 작성할 필요가 없습니다
출처
https://www.tcpschool.com/javascript/js_intro_basic
https://velog.io/@chyori/JavaScript-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95-%EC%B4%9D-%EC%A0%95%EB%A6%AC
https://www.everdevel.com/JavaScript/selector/
'JavaScript' 카테고리의 다른 글
| var, let const 차이점 (0) | 2023.09.07 |
|---|---|
| 배열 (6) | 2023.04.05 |
댓글