JavaScipt
HTML : 정적, Javascript: 동적
HTML을 이용해 웹 페이지를 만들고, Javascript를 이용해 사용자와 상호작용할 수 있도록 한다.
1. 자바스크립트는 사용자와의 상호작용 역할을 한다.
2. 웹 브라우저는 한번 화면에 출력되면 자기자신을 바꿀 수 없다.
<script></script> 태그
: HTML에서 Javascript 코드를 사용하기 위해서 script 태그를 사용할 수 있다.
* 참고. HTML로 쓴 코드는 정적이기 때문에 문자 그대로를 출력하지만,
Javascript 코드는 동적으로 이를 계산할 수도 있다.
이벤트
: 웹 브라우저에서 일어나는 유용한 사건
예)
onclick 이벤트: 사용자가 어떤 것을 클릭하는 사건
onchange 이벤트: 입력창에서 사용자가 키보드를 이용해 무언가 입력하면, 그에 따라 내용이 바뀌는 사건
* 이 외에도 총 10~20가지 정도의 이벤트가 존재
onclick 속성
<input type="button" value="hi" onclick="alert('hi')">
콘솔(Console)
: 콘솔을 이용하면 웹사이트에서 간단한 문제를 간편하게 Javascript를 실행시켜서 해결할 수 있다.
alert('Hello, World!'.length) //alert창 띄우기웹 브라우저에서 오른쪽 버튼 > 검사 > Console 탭 ( Elements와 Console을 동시에 띄우려면 ESC 키 누르기 )
변수와 대입연산자
- 변수를 쓸 때는 일반적으로 var 표기
var name='jinju';- 변수의 기능 (좋은 점)
1. 유지보수 편함
2. 간결함
CSS
<div>, <span> 태그
특정 부분에 css로 스타일 속성값을 넣어주고 싶을 때, 이 부분을 감싸주는 기능만 있는 태그들
(예. <h1>은 특정 부분을 감싸주지만, 글자 크기를 지정하는 기능이 있어
딱 css 스타일만 넣어주고 싶을 때 사용할 수는 없다.)
- <div>는 자동 줄바꿈이 되고(화면 전체 사용), <span>은 줄바꿈 되지 않는다.
하지만, 모든 부분을 div나 span 태그로 감싼다면 사용하기도 수정하기도 어렵기에,
이를 위해 CSS에는 선택자라는 기능이 존재한다.
선택자
- class
head 태그 안에 style 태그 생성. 그 안에서 클래스를 생성
<head>
<style>
<!--점 안 찍으면 태그 의미-->
js{
font-weight:bold;
}
<!--점 찍어야 클래스 의미 -->
.js{
font-weight:bold;
}
</style>
</head>- id
id는 class와 달리 . 대신 #을 붙여야 한다.
class는 무언가를 그룹핑한다는 의미이고, id는 어떤 한가지를 식별한다는 의미.
예) class - 반, id - 학번
따라서, class는 중복해서 사용 가능하지만, id는 한 페이지에서는 딱 한 번만 사용 가능하다.
(class 선택자가 더 포괄적, id 선택자가 더 타케팅적)
결과적으로, 우선순위: id>class>태그(<div>, <span> 등)
- 제어할 태그 선택하기
querySelector
: querySelector라는 함수를 이용하면 이러한 선택자를 이용해서 원하는 태그를 선택할 수 있다.
그리고, 고른 태그에 스타일을 적용시킨다. 예를 들어, 다음과 같이 코드를 작성하여
버튼을 클릭할 때마다(이벤트가 발생할 때마다) 이러한 스타일 변화가 나타나도록 한다.
<input type="button" value="night" onclick="
documnet.querySelector('body').style.backgroundColor = 'black';
">
'Web > HTML+CSS+JS' 카테고리의 다른 글
| 웹프로그래밍첫걸음 5장. 폼 활용하기 (0) | 2023.05.01 |
|---|---|
| 웹프로그래밍첫걸음 4장. 링크와 멀티미디어 표현하기 (0) | 2023.05.01 |
| 웹프로그래밍첫걸음 3장. 문서 구조 표현하기 (0) | 2023.05.01 |
| 웹프로그래밍첫걸음 2장. HTML5 문서 기본 이해하기 (0) | 2023.05.01 |
| [자바스크립트의 시작] Javascript 제어문 (0) | 2023.03.29 |