JavaScript 변수, 함수, 입출력방법, 이벤트
JavaScript : HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어
변수
var : 값을 여러번 새로 넣을 수 있는 데이터(재선언, 재할당 가능)
var 변수 호이스팅 : 변수를 뒤에서 선언하지만, 마치 미리 앞에서 선언한 것처럼 인식(선언한게 자동으로 맨위로 올라감)
var x = 10;
function displayNumber() {
console.log("x is " + x);
console.log("y is " + y);
var y = 20;
}
displayNumber();
→x is 10
y is undefined //변수가 밑에서 선언됐는데도 오류가 나는게 아니라 할당값이 없다고 뜸
//아래와 같이 인식하기 때문에
var x = 10;
function displayNumber() {
var y;
console.log("x is " + x);
console.log("y is " + y);
y = 20;
}
displayNumber();
let : let으로 변수를 선언한 경우, 이후에 let을 붙인 상태로 다른 값을 넣는것이 불가능하다.(재선언 불가. let 떼고는 가능)
<script>
function calcSum(n) {
let sum = 0;
for(let i = 1; i < n + 1; i++) {
sum += i;
}
sum = 100; //여기에 var sum으로 적어주면 이미 선언된 변수라고 오류
console.log(sum);
}
calcSum(10);
console.log(sum); //이거 적으면 할당값 없다고 오류. sum은 지역변수임.
</script>
const : 값을 한번 넣으면 바뀌지 않는 상수(재선언, 재할당 불가)
→ const를 기본적으로 쓰되 변경해야 하는 변수는 let으로 선언.(여러명이 사용할 때 변수의 값이 겹칠 수 있기 때문에)
변수 범위
1.전역변수
: 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수
2.지역변수
: 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수
함수 내에서만 사용할 수 있다.
var a="전역변수";
function f1(){
var a ="지역변수"; //var 없이 선언하면 지역변수 위치에 있어도 전역변수가 됨.
document.write(a);
}
f1();
document.write(a);
클로저
함수A가 함수a를 리턴하는 경우 함수A의 지역변수가 함수a에 의해 사용될 수 있음.
이런 경우에 함수A가 리턴되고나서도 지역변수가 사용되므로 함수를 종료할 수 없게 됨.
결국 함수A는 닫히지 않고, 지역변수의 범위가 연장 됨.
//함수A
function f1(){
var a =1; //지역변수
//함수a(클로저)
return function f2(){ //f1()의 지역변수를 사용중임
return a;
}
}
var f = f1(); // f == f2() →f가 함수를 참조하게 되므로 f는 함수처럼 사용됨.
var b = f(); // f() == a →f1()의 지역변수 a가 사용됨
document.write(b);
자료형
*타입 확인 : typeof
let a = 13;
typeof a
→'number'
String " ", ' ', ``
큰따옴표와 작은따옴표(구분X)를 이용해 감싸준다.
백틱(``)을 이용해 줄바꿈을 자유롭게 해줄 수 있고, 변수나 연산은 ${ }에 삽입해 표시해 줄 수 있다.
let numberA = 52;
console.log(`${numberA}은/는 ${numberA > 0 ? "0보다 큰" : "0 또는 0보다 작은"} 숫자입니다.`);
Number
var x = 3;
var x = new Number(3);
사칙연산 가능, 0으로 나누면 Infinity 출력
숫자가 아닌것과 나누거나 곱하면 NaN(not a number) 출력
문자형이랑 더하면 (숫자→문자형) 형변환 되어 연산 됨
Boolean
조건을 확인해서 조건이 맞으면 true, 맞지 않으면 false 출력
Null
null을 할당한 경우
어떤 값이 의도적으로 비어있음을 표현
undefined
변수를 할당하지 않고 선언만 한 경우
배열
여러 타입의 변수를 한번에 저장할 수 있음.
let array = [52, 273, '아침밥', '점심밥', true, false]
Date
https://dororongju.tistory.com/116
입출력 방법
alert(메세지)
알림 창. 메세지를 띄움(확인)
prompt(메세지 , 기본값)
프롬프트 창에서 값을 입력받음(텍스트필드) →문자형
디폴트값을 넣어둘 수 있음(생략 가능)
confirm(메세지)
확인 창. (취소/확인)=(true/false)
if (confirm('메세지')) {
//확인 시 실행
} else {
//취소 시 실행
}
→스크립트 일시정지, 스타일링 불가
document.write(메세지)
화면에 뿌려줌
명시적 형변환
String()
String(3) → "3"
Number()
Number("1234") → 1234
Number(true) →1
Number(false) →0
Number(0) →false
Number('0') →true
Number('') →false
Number(' ') →true
Number("문자") →NaN
Number(null) →0
Number(undefined) →NaN
Boolean()
0,"",null,undefined,NaN →false
**parseInt()는 문자열로 된 부분에서 숫자(정수)만 뽑아서 변환해주고, Number()은 문자열 전체가 숫자일때 소수점까지 숫자타입으로 가져올 수 있다.
연산자
** : 거듭제곱 연산자. 왼쪽 피연산자가 밑, 오른쪽 피연산자가 지수
=== : 타입까지 비교(가급적 이거 사용)
함수
반복시행해야 할 때 유용
//<java>
int add(int x, int y){
return x+y;
}
//<javascript1>
var add = new Function("x,y", "return x+y;");
//<javascript2>
var add = funtion (x,y){
return x+y;
}
//<javascript2>
function add(x,y){
return x+y;
}
함수 선언식
function 함수명(매개변수1, 매개변수2,...){ } //함수 선언문
//매개변수X
function showError(){
alert('에러가 발생했습니다. 다시 시도해주세요.');
}
showError(); //시행댐
//매개변수O
function sayHello(name){
const msg = `Hello, ${name}`;
console.log(msg);
}
sayHello('Mike');
sayHello('Tom');변수가 적용되는 범위(스코프)
지역변수 : 함수 안에서 var와 함께 선언
전역변수 : 함수 밖에서 선언 || 함수 안에서 var 없이 선언
함수 표현식
익명 함수(무명함수) : 함수 이름이 따로 없음. 변수에 할당할 수도 있고 다른 함수의 매개변수로 사용할 수도 있음.
호이스팅 적용 안됨.
var 변수명 = function( 매개변수 ) {
실행문;
};
//호출
변수명(); //함수 값이 출력됨
console.log(변수명); //함수 식 자체가 출력됨
console.log(변수명()); //함수 값 출력
즉시 실행 함수
(function (매개변수) {
실행문
})(인수);
화살표 함수
(매개변수) => {함수 내용}
//1.기존 함수
const hi = function() {
return alert("안녕하세요?");
}
//2.화살표 함수
const hi = () => alert("안녕하세요");
//1.기존 함수
let sum = function(a, b) {
return a + b;
}
//2.화살표 함수
let sum = (a, b) => a + b;
인자와 매개변수
//그냥 자바처럼 오버로딩하면 맨 마지막에 적어준 함수만 유효하게 됨
//얘가 자바스크립트 재질로 만든 코드임
//매개변수의 개수보다 인수가 더 적을 경우 넘어오지 않은 값은 undefined로 표시된다.
function add(x, y, z) {
var sum;
if((y===undefined) && (z===undefined)) {
sum=x;
}
else if(z===undefined) {
sum=x+y;
}
else {
sum=x+y+z;
}
return sum;
}
var r1=add(2);
var r2=add(2, 3);
var r3=add(4, 5, 6);
document.write("함수 호출 인자 부족 : " + r1 + "<p/>");
document.write("함수 호출 인자 부족 : " + r2 + "<p/>");
document.write("정상적인 함수 호출 : " + r3 + "<p/>");
//arguments : 함수에 전달되는 인자들을 배열 형태로 나타낸 객체
//전달받은 인자의 수 만큼 for문이 반복됨.
function add() {
var i, sum=0;
for(i=0; i<arguments.length; i++) {
sum=sum+arguments[i];
}
document.write("수행 결과 : " + sum + "<p/>");
}
add(2, 3);
add(2, 3, 4);
add(4, 5, 6, 7, 8);
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);함수의 매개변수 개수와는 상관없이 넘겨진 값을 받는 'arguments'컬렉션이 있다.
이벤트
마우스 이벤트
click : 요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick : 더블클릭했을 때
mouseover : 마우스를 요소 위로 올렸을 때
mouseout : 마우스가 요소 밖으로 벗어났을 때
mousedown : 마우스를 눌렀을 때
mouseup : 마우스를 뗐을 때
mousemove : 요소 위에서 마우스를 움직일 때
키보드 이벤트
keydown : 키를 누르는 동안
keyup : 키에서 손을 뗐을 때
keypress : 키를 눌렀을 때
문서 로딩 이벤트
abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때
error : 문서가 정확히 로딩되지 않았을 때
load : 문서 로딩이 끝났을 때
resize : 문서 화면 크기가 바뀌었을 때
scroll : 문서 화면이 스크롤되었을 때
unload : 문서에서 벗어날 때
폼 이벤트
blur : 폼 요소에 포커스를 잃었을 때
change : 목록이나 체크 상태 등이 변경될 때. <input>,<select>,<textarea>태그에서 사용
focus : 폼 요소에 포커스가 놓였을 때
reset : 폼이 리셋되었을 때
submit : submit버튼을 클릭했을 때
이벤트를 객체와 연결하는 방식
인라인 방식(이벤트 타입별로 오직 하나의 이벤트 리스너만을 등록할 수 있음)
: 이벤트가 발생할 때 실행
<태그 on이벤트명 = "함수명"></태그>
[1]
객체.on이벤트명 = function() { }
[2]
function 함수명() { }
객체.on이벤트명 = 함수명
//클릭했을 때 alert 띄움
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
//클릭했을 때 changeBg('green')시행(색변경)
<li><a href="#" onclick="changeBg('green')">Green</a></li>
...생략...
<script>
function changeBg(color) {
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
DOM을 이용한 이벤트 처리기
: 페이지가 읽혀질 때 실행
- querySelector() : 하나의 태그만 선택(해당 선택자에 맞는 요소들 중 첫번째를 반환)
- querySelectorAll() : 여러 개의 태그 선택(배열
<body>
<button id="change">글자색 바꾸기</button>
<p>내용내용내용내용내용내용</p>
<script>
// 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor; //이름 뒤에 괄호X
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
document.querySelector("#change").onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 3 : 직접 함수를 선언
document.querySelector("#change").onclick = function() {
document.querySelector("p").style.color = "#f00";
};
addEventListener 방식
- getElementById() : 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환
- getElementsByTagName() : 주어진 태그명과 일치하는 속성들을 배열로 가짐
- getElementsByClassName() : 주어진 클래스명과 일치하는 속성들을 배열로 가짐
DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)<body>
<button id="one">btn1</button>
<button id="two">btn2</button>
<button id="three">btn3</button>
<script>
const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")
const handleClick = function () {
console.log("저를 클릭하셨나요?");
}
//여러개의 핸들러를 추가할 수 있다.
btn2.addEventListener('click', handleClick)
btn2.addEventListener('click', function(){ //함수를 바로 입력해줄 수도 있음
console.log("또 다른 핸들러가 추가 등록되었다!")
})
//핸들러 삭제
//DOM객체. removeEventListener(이벤트명, 실행했던 함수명);
btn2.removeEventListener('click',handleClick)
...생략...
const handleClick = function (event) {
console.log(event.target);
}
//.target은 이벤트가 발생하는 그 순간에 타겟을 알려주기 때문에
//같은 핸들러를 사용해도 다른 결과를 내준다.
btn1.addEventListener('click', handleClick)
btn2.addEventListener('click', handleClick)
btn3.addEventListener('click', handleClick)