chapter 14 자바스크립트 문법 배우기
콘솔 창 여는법
웹브라우저에서 ctrl + shift + j
alert("안녕하세요")
confirm("배경이미지를 바꾸겠습니까?");
사용자에게 선택지를 제시
document.write("안녕하세요")
chatper 14-1 변수 알아보기
변수(variable)
값이 여러번 달라질 수 있는 데이터
상수(constant)
값을 한번 지정하면 바뀌지 않는 데이터
변수 선언하기
var 뒤에 변수 이름 작성
var 뒤에 여러 개의 변수를 한꺼번에 선언할 수 도 있음
var season = ["봄","여름"."가을","겨울"]
var currentYear = 2021;
var birthYear;
var age;
birthYear = prompt("태어난 연도를 입력하세요. (YYYY)", "");
age = currentYear - birthYear + 1;
document.write(currentYear + "년 현재<br>");
document.write(birthYear + "년에 태어난 사람의 나이는 " + age + "세입니다.");
자료형
typeof 함수를 통해 자료형을 알 수 있다
*Null 의 자료형은 undefiend 이다
연산자
연결 연산자
둘 이상의 연산자를 하나로 만드는 연산자
10 + 10 = 20
10 + "10" = "1010"
숫자와 문자로 만나면 형변환이 일어나 문자"1010"이 된다
비교연산자
같다 ==, ===
3 == "3"
True
3 === " 3 "
False *자료형까지 비교한다다르다 !=
다르다 !=
조건문
if 문 , if~ else문
피연산자 2개의 값을 비교해서 true나 false로 결괏값 반환
하나의 if ~ else문 안에 다른 if~else 문을 넣을 수 있다
var userNumber = prompt("숫자를 입력하세요.");
if (userNumber % 3 === 0)
alert("3의 배수입니다.");
else
alert("3의 배수가 아닙니다.");
*prompt에서 취소를 눌렀을때 null값 반환
논리연산자
| 종류 | 기호 | 설명 |
| OR 연산자 | || | 피연산자 중 하나인 true여도 true가 된다 |
| AND 연산자 | && | 피연산자가 모두 true일 경우에만 true |
| NOt 연산자 | ! | 피연산자가 반댓값을 지정 |
switch 문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세션 선택 - switch문</title>
<link rel="stylesheet" href="css/switch.css">
</head>
<body>
<script>
var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인");
switch (session) {
case "1" : document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>")
break;
case "2" : document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>");
break;
case "3" : document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>")
break;
default: alert("잘못 입력했습니다.");
}
</script>
</body>
</html>
switch(session)){
case "1" : 명령
break;
case"2" : 명령
break;
.
.
.
}
반복문
for 문
for(초깃값; 조건; 증가식){
실행할 명령
}
var i;
var sum = 0;
for(i = 1; i < 6; i++) { #i를 계속해서 더함
sum += i;
중첩된 for 문
for(i = 2; i <=9; i++){
document.write("<div>")
document.write("<h3>" + i + "단</h3");
for(j= 1; j <= 9; j ++){
document.write(i+"X"+j +" = " +i*j +"<br>")
while문
조건을 체크하고 true라면 {}안의 명령 실행
조건이 false라면 명령은 한 번도 실행하지 않을 수 있음
do~while문
일단 명령을 한번 실행한 후 조건체크
true라면 {}아느이 명령 실행, false라면 {}을 빠져 나옴
조건이 false라도 명령은 최소한 한 번은 실행
do {
alert("sum is" + sum);
} while (sum < 10)
chapter 15 함수와 이벤트
함수정의
function addNumber() {
var num1 = 2;
var num2 = 3;
var sum = num1 + num2;
alert("결과 값: " + sum);
}
addNumber();
var 변수의 특징
=> 지역변수(재할당 가능하다)
function addNumber() {
var sum = 10 + 20; // 지역 변수
}
addNumber();
console.log(sum);
이렇게 하면 sum은 지역 변수이기 때문에 실행이 안된다
var x = 10;
function displayNumber() {
console.log("x is " + x);
console.log("y is " + y);
var y = 20;
함수의 호스팅
이렇게 되면 y는 호이스팅이 되어있지 않아 undefiend가 된다.
let 변수(전역변수)
특정 범위 안에서만 사용할 수 있는 변수 설정이 가능하다
재할당은 가능하지만, 재선언은 할 수 없다.
function calcSum(n) {
let sum = 0;
for(let i = 1; i < n + 1; i++) {
sum += i;
}
console.log(sum);
coast 변수
상수 - 변하지 않는 값을 선언할 때 사용
재선언, 재할당할 수 없음
매개변수
function addNumber(num1, num2){
var sum = num1 + num2;
return sum;
}
var result = addNumber(2, 3);
document.write("두 수를 더 한 값 : " + result);
함수값을 return을 통해 반환한다.
이벤트
웹 브라우저나 사용자가 행하는 동작
주로 웹 문서 영역안에서 이루어지는 동작만 가리킴
주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 떄, 폼에 내용을 입력할 때 발생
이벤트 처리기
이벤트가 발생했을때 처리하는 함수
event handler 라고 한다
<ul>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
</ul>
onclick 이벤트 처리기
chapter 16 자바스크립트와 객채
객체(object)
프로그램에서 인식할 수 있는 모든 대상
테이터를 저장하고 처리하는 기본 단위
자바스크립트 객체
자바스크립트 안에 미리 객체로 정의해 놓은 것
문서 객체 모델(DOM) : 문서뿐만 아니라 웹 문서 안에 포함되 ㄴ이미지 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
브라우저 관련 객체: 웹 브라우저 정보를 객체로 관리
내장 객체 : 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음
객체 인스턴스 만들기
객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용
인스턴스 : 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것.
프로퍼티(property)
객체의 특징이나 속성
매서드(method)
객체에서 할 수 있는 동작
var now = new Date(); Date 객체의 인스턴스를 만듦
document.write("현재시각은" + toLocaleString());
Date 객체의 매서드 사용
브라우저 관련 객체의 계층 구조
window 객체의 프로퍼티
주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용
window 객체의 매서드
window 객체는 기본 객체이므로 window 를 생략하고 메서드 이름만 사용해도 됨
<script>
var blocked = false;
function openPopup() {
var newWin = window.open("notice.html", "notice", "width=500, height=400");
if (newWin == null) {
alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
notice 객체는 한번만 열릴 수 있다.
chatper 17 문서객체모델 (DOM)
'대딩코딩' 카테고리의 다른 글
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 6~10 (0) | 2024.02.03 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 1~5 (0) | 2024.02.02 |
| WEB node.js 3 (0) | 2023.12.27 |
| WEB2 node.js (0) | 2023.11.26 |
| WEB 서버 만들기 2 (2) | 2023.11.20 |
