자바스크립트(JS) 란?
HTML과 CSS로 만들어진 웹 페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어.
다양한 이벤트(마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣을 수 있다.
자바스크립트(JS) 사용 방법
-
내부 스크립트
자바스크립트 코드는 ＜script＞태그를 HTML문서안에 넣어서 사용 가능하다. HTML문서의 어느위치에서나 사용 가능한데 보통 HTML문서가 전부 로드 되고 나서인 ＜body＞ 아래에 사용한다. ( 주로 간단한 스크립트나 테스트용으로 사용한다.) -
외부 스크립트
자바스크립트 파일을 HTML과 별개인 .js 확장자의 파일로 저장한 후 불러올 수 있다. 외부 자바스크립트를 사용하려면 ＜script＞의 src 속성으로 HTML 문서 위치의 기준 파일 경로를 입력해주면 된다.
console.clear(); : 현재 환경에서 가능한 경우, 콘솔에 기록된 메세지를 모두 지운다.
출력문
console.log() 메서드
웹 페이지의 콘솔을 통해 데이터를 출력해준다.
대부분의 주요 웹 브라우저에서는 F12(개발자 도구)를 누른 후 메뉴에서 콘솔을 클릭하면
볼 수 있다. 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되서 디버깅 하는데
많은 도움을 준다.
변수타입
변수는 (문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다. 값을 찾기 쉽게 할려고 이름을 붙여서 사용한다.
-
var 변수 사용
var age = 10; (o)
var age = 20; (o)
var는 중복선언이 가능하고 값을 바꾸는게 가능하다. -
let 변수 사용
let age = 10; (o)
let age = 20; (x)
age = 20; (o)
let은 중복선언이 불가능하고 값은 바꿀 수 있다. -
const 변수 사용
const age = 10;(o)
const age = 20;(x)
age = 20; (x)
const는 중복선언 및 재할당도 불가능하다.
var, let, const의 차이점
- var는 함수 스코프이고 let, const는 블록 스코프이다.
- var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같이 이름의 변수를 또 선언하면 에러가 난다.
- var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 한다.
- var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없다.
alert
alert는 실행했을 때 알림문 처럼 웹페이지에 효과를 작용시킨다.
button에https://velog.velcdn.com/images/dbyo1125/post/0dd75f38-bd93-4acd-a8cb-197c3ecda4f5/image.png">
$ = document.getElementsByTagName();
document.getElementsByTagName('div');는 div라는 태그를 가진 것을 전부 가져오는 것이다.
하단 이미지에서 els에 div 이름을 가진것을 배열처럼 저장하고 스타일을 지정하면 버튼을 눌렀을 때 해당 div에 상호작용이 일어나는것을 볼수 있다.
위 이미지의 코드는 비효율 적이니 J쿼리를 사용한다.
조금 더 다이어트 하면 하단 처럼 작성이 가능하다.
event.stopPropagation();
먼저 propagation이란 파동, 전파란 의미로 예측해보면 stopPropagation은 더이상의 전파를 막아주는 역할을 한다.
실행프로그램을 보면 팝업을 열고 난 후 x표시가 된 곳과 바깥 검정색 배경부분만 클릭 할 경우 이벤트가 일어나는데 stopPropagation()이 없다면 일단 팝업창을 클릭해도 이벤트가 일어나버린다.
그 현상을 방지하기 위해 stopPropagation()을 사용하는 것이다.
