1. 데이터 타입(문자열과 숫자)
[Javascript의 데이터 타입]
Javascript에는 6가지 데이터타입이 존재합니다.
2. 변수와 대입연산자
변수
변수란 말 그대로 바뀔 수 있는 수를 말합니다. 예를 들어서 다음 코드를 실행한다고 해 봅시다.
;
var
: 자바스크립트에서는 변수 이름 앞에 특정 데이터 타입을 명시해 줄 필요없이 'var' 를 붙이면 됩니다.
이 때 var은 변수의 영어 단어인 variable의 약자입니다.
(파이썬과 비슷한 느낌)
3. 웹브라우저 제어(Js, CSS)
[Js에서 CSS를 다룬는 법]
1. div 태그와 span 태그
- div 태그는 화면 전체를 사용 [ 부분화면 - 따라서 줄바꿈]
- span 태그는 문장만 감싼다. [ 줄바꿈 x]
2. Class
span으로 감싼 여러 단어들의 css를 바꾸고 싶다면 <span> 태그안에 Class를 지정해주어 <head> 태그 안에 <style>이라는 새로운 태그를 만들어 줍니다.
이 style 태그 안에는 CSS 코드가 들어가게 됩니다. 그리고 js라는 class를 생성해 봅시다. 아래 코드와 같이 말이죠
<head>
<style>
.js {
font-weight: bold;
}
</style>
</head>
3. 선택자
선택자에는 저번 강의에서 배운 class 외에도 id가 존재합니다. 저번 강의에서 class에 대한 스타일을 지정할 때 다음과 같은 코드를 <head> 태그 안에 넣어주었죠.
id는 class와는 달리 .대신 #을 붙여야 한다는 차이점이 있습니다. 예를 들어서 first라는 id를 만들 때 다음과 같이 나타내는 것이죠.
<style>
#first {
color: green;
}
</style>
<body>
<span id="first" class="js">Javascript</span>
</body>
[Class와 id의 차이점]
- class : 일종의 그룹핑 (전공, 학과)
- id : 하나를 특정하여 식별하는 것 (학번)
클래스 위에 Id를 올려서 작성하는 것이 유용하다.
[CSS에서 우선순위]
1. id 선택자
ex) #first
2. 클래스 선택자
ex) .js
3. 태그 선택자
ex) span
<style>
span {
color: blue;
}
.hello {
font-size: 12px;
color: red;
}
#bye {
font-size: 13px;
}
</style>4. 제어할 태그 선택하기
1. 제어할 태그 선택하기
- 이벤트가 일어났을 때, 어떤 태그에 스타일이 지정될지 선택하는 작업이 필요합니다.
2. querySelector
- querySelector라는 함수를 사용하면 이러한 선택자를 이용해서 원하는 태그를 선택할 수 있습니다. 다음과 같이 사용할 수 있습니다.
documnet.querySelector("body")
3. 고른 태그에 스타일을 적용
documnet.querySelector("body").style.backgroundColor = 'black';
4. Javascript 코드를 이벤트가 일어날 때마다 실행
<input type="button" value="night" onclick="documnet.querySelector('body').style.backgroundColor = 'black';">
'JavaScript' 카테고리의 다른 글
| [부스트코스] 6. 자바스크립트 기초 (자바스크립트 객체 'JavaScript Object' ) (0) | 2021.07.21 |
|---|---|
| [부스트코스] 5. 자바스크립트 기초 (자바스크립트 함수 'Function' ) (0) | 2021.07.21 |
| [부스트코스] 4. 자바스크립트 기초 (자바스크립트 제어문 part 2. " 배여열과 반복문" ) (0) | 2021.07.20 |
| [부스트코스] 3. 자바스크립트 기초 (자바스크립트 제어문 part 1. " 비교연산자, 조건문" ) (0) | 2021.07.20 |
| [부스트코스] 1. 자바스크립트 기초 (웹과 자바스크립트 part 1. '자바스크립트 사용법') (0) | 2021.07.18 |