[생활코딩] Javascript
1. 기본
Javascript는 웹이 사용자와 상호작용할 수 있도록 하는 기능을 갖고 있다.
HTML은 한번 화면에 출력되면 자기 자신을 바꿀 수 없는 정적인 웹페이지를 만들지만, JS는 코드에 따라 태그의 디자인을 바꾸는 등 웹페이지를 더 동적으로 만들어줄 수 있다.
즉, JS는 기본적으로 HTML 위에서 동작하는 언어이고, HTML을 제어하는 언어이다.
브라우저에서 우클릭 > 검사 > elements (태그) : 웹페이지를 구성하고 있는 html 태그들을 볼 수 있다.
2. Javascript를 실행하는 방법
1) script 태그 이용
body 태그 안에 script 태그를 넣음으로써 Javascript가 시작된다는 것을 알려줘야 한다.
script 태그 안에는 JS가 와야하기 때문에 웹브라우저는 script 태그 안에 있는 코드를 JS로 해석한다.
2) 콘솔 (Console) 이용
브라우저에서 우클릭 > 검사 > Console
콘솔을 이용하면 파일 만들지 않아도 JS 코드를 즉석에서 실행 가능하고, 이미 만들어져있는 웹사이트를 필요에 따라 딱 맞는 코드를 작성해서 이용할 수 있다.
3. 이벤트 (Event)
이벤트는 웹브라우저 위에서 일어나는 일들을 가리키며, Javascript가 사용자와 상호작용하는데 핵심적인 역할을 한다.
(ex. 무언가를 클릭했을 때(onclick), 내용이 변했을 때(onchange), 어떤 키를 눌렀을 때(onkeydown) 등)
이벤트의 속성 값으로는 Javascript가 와야한다.
- alert('내용') : 경고창 띄우기
- document.write(내용) : 웹페이지에 글씨 출력
4. 자료형 (데이터 타입)
- Boolean : 논리형 (True, False)
- Null : 값이 없는 상태
- Undefined : 값이 정해져 있지 않은 상태
- Number : 숫자형 (정수, 실수)
- String : 문자열
1) 숫자형
숫자형에서 제일 중요한 것은 연산이다.
산술 연산자 : +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지)
2) 문자열
따옴표 (" " or ' ') 안에 입력된 내용을 말한다.
- str.length : 문자열이 몇 글자인지 알려줌
- str.toUpperCase() : 대문자로 바꿔줌
- str.indexOf(찾고자하는 값) : 해당 내용이 몇번째에 있는지 알려줌
- str.trim() : 공백을 없애줌
5. 변수와 대입 연산자
변수 : 바뀔 수 있는 어떤 값
대입 연산자 (=) : 오른쪽 항의 값을 왼쪽의 변수에 대입한다.
변수를 선언할 때는 var를 이용해준다.
var 변수이름 = 값;
6. CSS
1) CSS 사용 방법
- 특정 태그를 선택하여 style 속성을 넣어주기
- head 태그 안에 style 태그 넣어주기
2) div와 span
div : 어떤 내용을 감쌀 수 있는 어떤 기능도 의미도 없는 태그, 화면 전체를 써서 줄바꿈이 됨
span : 어떤 내용을 감쌀 수 있는 어떤 기능도 의미도 없는 태그, 줄바꿈 되지 않음
- div와 span은 똑같은 기능을 하는 태그이지만 화면 전체를 쓰냐, 안쓰냐에 대한 차이가 있다.
3) class 선택자와 id 선택자
class : 여러 태그를 그룹핑하는 것
id : 특정 태그를 식별하는 것
- class 선택자를 통해 광범위하게 효과를 주고 그 중에서 예외 처리를 하고 싶은 건 id 선택자를 이용한다.
4) 영향력
id 선택자 > class 선택자 > 태그 선택자
7. 태그를 선택하고 제어하는 방법
1) 태그를 선택
document.querySelector('selectors');
2) 선택한 태그의 style 속성 값으로 배경색을 검은색으로 지정
document.querySelector('selectors').style.backgroundColor='black';
8. 프로그래밍 언어란 무엇인가
'프로그램'이라는 말에는 순서라는 의미가 있고, 이 순서를 만드는 행위를 프로그래밍이라 한다.
HTML은 웹페이지를 묘사하는 언어이기 때문에 시간의 순서에 따라 실행되는 기능을 갖고있지 않으므로 프로그래밍 언어가 아닌 반면,
JS는 사용자와 상호작용하기 위해서 고안된 언어이고 시간의 순서에 따라 웹브라우저의 여러 기능이 실행되어야 하므로 프로그래밍 언어이다.
댓글