고정 헤더 영역
상세 컨텐츠
본문
반응형
1. 웹과 Javascript
처음등장한 웹은 HTML만을 사용한 형태 -> 사용자와 상호작용 하기 위해 Javascript를 사용한 웹이 등장
(정적인 웹에서 동적인 웹으로)
📣정리 : Javascript는 사용자와 상호작용하는 언어이다
script 태그
html 문서에서 <script> 태그 안에 작성한 코드는 웹이 자바스크립트로 인식한다.
html은 정적이다. 1+1을 적으면 화면에 그대로 출력하는 모습.
반면, 자바스크립트는 동적으로 계산기처럼 움직이기도 한다. html과 달리 1+1을 적으면 2로 출력함.
이벤트
= 웹브라우저 상에서 일어나는 사건
ex) 사용자의 클릭(onclick), 내용 변경(onchange), 키 입력(onkeydown)
💡onchange는 입력 후 입력창 바깥쪽을 클릭했을 때 기준으로 내용이 변경됐는지 확인함. 만약 텍스트를 지웠다가 이전과 똑같은 텍스트를 입력한 후 바깥쪽을 클릭하면 아무 이벤트도 일어나지 않음.
💡이벤트를 전부 외울 수는 없을테니 javascript mouseover event 이런식으로 검색을 하자
콘솔
윈도우는 웹브라우저에서 F12를 누르면 콘솔창이 나옴
이 콘솔을 이용하면 별도로 파일 만드는 것 없이 바로 자바스크립트 코드를 실행시킬 수 있다.
alert('아무말이나 입력하세요')
위 코드를 콘솔에 입력하고 엔터를 누르면 경고창이 뜨게 만들 수 있다.
Javascript의 데이터 타입
숫자 데이터 타입은 연산이 가능하다. 산술연산자 +, -, *, / 를 사용함
'Hello'.length.length 는 문자열(Hello)의 길이를 세어줌. 문자열 = String 데이터 타입
그밖에도 .indexOf, .trim 같은 다양한 연산들이 존재함
변수와 대입 연산자
변수를 사용하는 이유
: 같은 변수를 여러번 사용하는 경우 변수에 대입한 값만 한 번 바꾸면 전체에 적용이 되니 편리함
var name = 'hello';※ 강의에서는 변수 선언시 var을 사용하는데 let이 생기면서 가급적 var을 사용하지 않는게 좋다고 알고 있음 (호이스팅이 가능한가 아닌가의 차이가 있음)
CSS의 style 속성
어떤 특정 태그를 디자인하고 싶을때 style이라는 속성을 쓰고 그 안에 css라는 언어의 문법을 사용함
<h1 style="color:blue">javascript<h1>
위 코드에서 style 뒤에 "color:blue" 부분이 css문법으로 쓰인 것 (글자 색을 파랑색으로 설정한다)
<h2 style="background-color:white">Javascript</h2>background-color는 css에서 배경색을 설정하는 속성이다
이밖에도 여러가지 속성이 있는데 css property "원하는 디자인 요소"로 검색해보면 쉽게 찾을 수 있음
ex) 글자 크기를 조절하는 속성은 font-size
CSS의 style 태그
<style> 태그 안에 CSS 코드를 작성해서 특정 태그나 class를 디자인할 수 있다.
class는 선택자라는 것으로 여러개의 태그를 선택하는 방법 중 하나
이 경우 class의 이름이 js인 태그에 모두 font-weight:bold; 라는 속성을 적용하게 된다.
CSS의 선택자
선택자에는 class 말고도 id라는 것이 있음
style태그 안에서 class를 나타낼때는 점.을 찍어서 표시하고 id는 #를 달아서 표시함
class는 이름에서 알 수 있듯 여러개의 그룹을 묶는다는 의미이고
id는 특정한 하나를 식별한다는 의미로 한 번 쓰인 id가 또 쓰여서는 안됨
class가 더 포괄적이기 때문에 class를 적용한 태그 중 예외처리를 하고 싶은 것에 id를 적용함.
따라서, id의 우선순위가 더 높다고 할 수 있음.
그래서 위 코드에서 첫번째 태그에 id와 class를 모두 적용했는데 id의 color:green;이 적용된 것
📣 우선순위 정리 : id > class > 태그
제어할 태그 선택하기
querySelector를 이용해서 원하는 태그들을 선택할 수 있음
document.qeurySelector('body')이렇게 하면 문서 내의 body태그를 선택한 것
<body>
<input type ="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">위 코드는 버튼을 클릭했을 때 body 태그에 style 속성을 적용하는 것
배경색은 black으로 글자색은 white로 바꾼다
💡 CSS에서 배경색은 background-color이고 자바스크립트 언어에서는 backgroundColor인 거 주의! (- 기호와 Color의 C가 대문자인 것 등 미묘한 차이가 있음)
※ 이 글은 네이버 edwith의 [부스트코스] 자바스크립트의 시작이라는 강의를 바탕으로 작성되었습니다.
반응형
'IT > Javascript' 카테고리의 다른 글
| 코드카데미 Javascript - Variables (변수 선언, 출력, typeof 연산자) (0) | 2020.09.14 |
|---|---|
| 자바스크립트의 시작 : Javascript 활용 (jQuery, API 등) (0) | 2020.09.11 |
| 자바스크립트의 시작 : Javascript 객체 (0) | 2020.09.11 |
| 자바스크립트의 시작 : Javascript 함수 (0) | 2020.09.09 |
| 자바스크립트의 시작 : Javascript 제어문 (0) | 2020.09.08 |
댓글 영역