<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>자바스크립트 변수</title>
</head>
<body>
내 나이 20세이고,
13세 미만은 입장료가 2,000원
13세 이상 ~ 20세 미만 입장료가 4,000원
그 밖에는 6,000원
<hr>
<p id = "box" class = "box">11</p>
<script>
let age = 20;
let fee = "";
if(age < 13)
{
fee = "2,000";
}
else if(age < 20)
{
fee = "4,000";
}
else
{
fee = "6,000";
}
console.log("입장료는 " + fee + "원 입니다.");
console.log("------------------------------------------------------------");
//age는 매개변수로 사용
function admissionFee(age)
{
if(age < 13)
{
fee = "2,000원";
}
else if(age < 20)
{
fee = "4,000원";
}
else
{
fee = "6,000원";
}
return fee;
}
console.log("입장료는 " + admissionFee(10) + " 입니다.");
console.log("입장료는 " + admissionFee(15) + " 입니다.");
console.log("입장료는 " + admissionFee(25) + " 입니다.");
console.log("------------------------------------------------------------");
function one(a,b)
{
var a = a;
var b = b;
var c = a + b;
return c;
}
console.log(one(50,60));
document.write(one(50,60));
//var a = 20;
//two라는 변수에 익명함수를 저장
var two = function(a,b)
{
var a = a;
var b = b;
var c = a + b;
return c;
}
console.log(two(20,30));
console.log("------------------------------------------------------------");
function examPass(name,html,css,js)
{
var comment = name + " 학생은 ";
if(html>=60 && css>=60 && js>=60 )
{
comment = comment + " 전과목 PASS";
}
else
{
if(html<60)
{
comment = comment + "html 재시험 ";
}
if(css<60)
{
comment = comment + "css 재시험 ";
}
if(js<60)
{
comment = comment + "js 재시험 ";
}
}
return comment;
}
console.log(examPass("이순신",70,70,80));
console.log(examPass("홍길동",70,59,80));
console.log(examPass("홍길순",58,100,40));
console.log("------------------------------------------------------------");
//객체
//color, diameter 변수
var circle = {
//객체안의 변수 (프로퍼티)
color : "yellow",
diameter : 100,
//객체안의 함수 (메소드)
radius : function() {
//이 객체(circle)의 diameter변수를 반환하여 / 2
return this.diameter / 2;
}
}
//객체안의 변수 호출하여 출력
console.log(circle.color);
console.log(circle.diameter);
//객체안의 함수 호출하여 출력
console.log(circle.radius());
console.log("------------------------------------------------------------");
function Triangle(b,h)
{
this.base = b;
this.height = h;
this.area = function()
{
return this.base * this.height / 2;
}
}
var triangle1 = new Triangle(10,20);
console.log(triangle1.base);
console.log(triangle1.height);
console.log(triangle1.area());
console.log("------------------------------------------------------------");
var triangle2 = new Triangle(10,10);
console.log(triangle2.base);
console.log(triangle2.height);
console.log(triangle2.area());
</script>
</body>
</html>
코드분석
<body>
<script>
<script>
let age = 20;
let fee = "";
if(age < 13)
{
fee = "2,000";
}
else if(age < 20)
{
fee = "4,000";
}
else
{
fee = "6,000";
}
console.log("입장료는 " + fee + "원 입니다.");
console.log("------------------------------------------------------------");
function admissionFee(age)
{
if(age < 13)
{
fee = "2,000원";
}
else if(age < 20)
{
fee = "4,000원";
}
else
{
fee = "6,000원";
}
return fee;
}
console.log("입장료는 " + admissionFee(10) + " 입니다.");
console.log("입장료는 " + admissionFee(15) + " 입니다.");
console.log("입장료는 " + admissionFee(25) + " 입니다.");
console.log("------------------------------------------------------------");
function one(a,b)
{
var a = a;
var b = b;
var c = a + b;
return c;
}
console.log(one(50,60));
document.write(one(50,60));
var two = function(a,b)
{
var a = a;
var b = b;
var c = a + b;
return c;
}
console.log(two(20,30));
console.log("------------------------------------------------------------");
function examPass(name,html,css,js)
{
var comment = name + " 학생은 ";
if(html>=60 && css>=60 && js>=60 )
{
comment = comment + " 전과목 PASS";
}
else
{
if(html<60)
{
comment = comment + "html 재시험 ";
}
if(css<60)
{
comment = comment + "css 재시험 ";
}
if(js<60)
{
comment = comment + "js 재시험 ";
}
}
return comment;
}
console.log(examPass("이순신",70,70,80));
console.log(examPass("홍길동",70,59,80));
console.log(examPass("홍길순",58,100,40));
console.log("------------------------------------------------------------");
var circle = {
color : "yellow",
diameter : 100,
radius : function() {
return this.diameter / 2;
}
}
console.log(circle.color);
console.log(circle.diameter);
console.log(circle.radius());
console.log("------------------------------------------------------------");
function Triangle(b,h)
{
this.base = b;
this.height = h;
this.area = function()
{
return this.base * this.height / 2;
}
}
var triangle1 = new Triangle(10,20);
console.log(triangle1.base);
console.log(triangle1.height);
console.log(triangle1.area());
console.log("------------------------------------------------------------");
var triangle2 = new Triangle(10,10);
console.log(triangle2.base);
console.log(triangle2.height);
console.log(triangle2.area());
</script>변수란 ?
변경될 수 있는 값
let age = 20;
let fee = "";
age라는 변수에 20이라는 값을 저장
fee라는 변수에 공백을 저장
let과 var의 차이
1. 중복선언 가능 여부
//중복선언
var var1 = 5;
console.log(var1); //5
var var1 = 10;
console.log(var1); //10var로 선언한 변수는 재선언이 가능하지만 let은 재선언을 하는 경우 오류가 발생한다.
var변수로 재선언을 하면 가장 마지막에 할당된 값이 변수에 저장되게 된다.
2. 재할당 가능 여부
//재선언
var var1 = 5;
var1 = 10;
let let1 = 10;
let1 = 20;var로 선언한 변수와 let으로 선언한 변수 모두 재할당이 가능하다.
3. 블럭 스코프(코드를 블럭안에 작성하는 것) 유효 범위
var로 선언한 변수는 전역변수로 어디든지 사용이 가능하지만 let으로 선언한 변수는 블럭안에서 선언하게 되면 지역변수, 블럭 밖에서 선언되는 경우는 전역변수로 사용된다.
내 나이 20세이고,
13세 미만은 입장료가 2,000원
13세 이상 ~ 20세 미만 입장료가 4,000원
그 밖에는 6,000원
위의 문제를 해결하기 위해 아래의 코드를 작성
if(age < 13)
{
fee = "2,000";
}
else if(age < 20)
{
fee = "4,000";
}
else
{
fee = "6,000";
}
console.log("입장료는 " + fee + "원 입니다.");만약 age라는 변수에 저장된 값이 13보다 작다면 fee변수에 2,000을 저장
age에 저장된 값이 20보다 작다면 fee변수에 4,000을 저장
나머지의 경우 fee변수에 6,000을 저장
function admissionFee(age)
{
if(age < 13)
{
fee = "2,000원";
}
else if(age < 20)
{
fee = "4,000원";
}
else
{
fee = "6,000원";
}
return fee;
}
console.log("입장료는 " + admissionFee(10) + " 입니다.");
console.log("입장료는 " + admissionFee(15) + " 입니다.");
console.log("입장료는 " + admissionFee(25) + " 입니다.");만약 age라는 변수에 저장된 값이 13보다 작다면 fee변수에 2,000을 저장
age에 저장된 값이 20보다 작다면 fee변수에 4,000을 저장
나머지의 경우 fee변수에 6,000을 저장하여 fee의 변수의 값을 return해주는 admisstionFee라는 함수를 생성
admisstionFee함수의 age값에 10이 들어오는 경우 출력
admisstionFee함수의 age값에 15가 들어오는 경우 출력
admisstionFee함수의 age값에 25가 들어오는 경우 출력
조건문 : if
문법
if (조건)
{
// 실행할 코드
}
else if (조건)
{
// 실행할 코드
}
else
{
// 실행할 코드
}
- if 안에 있는 조건이 참인 경우 {} 안의 코드를 실행
- if, else if 순으로 조건을 비교하며, 해당하는 조건이 없는 경우 else {}안의 코드가 실행
- else if의 갯수는 제한이 없음
함수(function)
함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미, 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복수행 가능
문법
function 함수이름(매개변수1, 매개변수2,...)
{
// 실행할 코드
}
반환(return)문
function 함수이름(매개변수1, 매개변수2,...)
{
// 실행할 코드
return 리턴할값;
}
- 매개변수 : 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수
함수 호출
함수이름 ( 인수1, 인수2, ... ) ;
function one(a,b)
{
var a = a;
var b = b;
var c = a + b;
return c;
}
console.log(one(50,60));
document.write(one(50,60));함수를 호출하며 인자값 50,60을 함수로 전달
a = 50;
b = 60;
값이 저장
c = 50 + 60 이므로 return 값은 110
document.write()
document.write() 메소드는 html에 출력해주는 함수이다.
var two = function(a,b) {
var a = a;
var b = b;
var c = a + b;
return c;
}
console.log(two(20,30));a+b를 저장한 변수 c를 return해주는 익명함수를 변수 two에 저장한다.
two에 인수를 전달해주면 함수를 호출하여 사용하는것처럼 쓸 수 있다.
익명함수
익명함수란 이름이 없는 함수로, 즉시 실행이 필요할 경우 사용한다.
호출순서
console.log(one(50,60));
function one(a,b)
{
var a = a;
var b = b;
var c = a + b;
return c;
}함수는 호출후에 함수를 정의해도 오류가 발생하지 않지만,
//오류발생
console.log(two(20,30));
var two = function(a,b)
{
var a = a;
var b = b;
var c = a + b;
return c;
}익명함수는 함수 정의 후에 호출해야 오류가 발생하지 않는다.
function examPass(name,html,css,js)
{
var comment = name + " 학생은 ";
if(html>=60 && css>=60 && js>=60 )
{
comment = comment + " 전과목 PASS";
}
else
{
if(html<60)
{
comment = comment + "html 재시험 ";
}
if(css<60)
{
comment = comment + "css 재시험 ";
}
if(js<60)
{
comment = comment + "js 재시험 ";
}
}
return comment;
}
console.log(examPass("이순신",70,70,80));
console.log(examPass("홍길동",70,59,80));
console.log(examPass("홍길순",58,100,40));html, css, js 시험 모두 60점이 넘는 경우 "전과목 PASS",
세 과목 중 60점이 안 넘는 과목들은 모두 재시험 출력
var circle = {
color : "yellow",
diameter : 100,
radius : function()
{
return this.diameter / 2;
}
}
console.log(circle.color);
console.log(circle.diameter);
console.log(circle.radius());circle이라는 객체를 만들었다.
객체 안의 프로퍼티는 총 2개, 메소드는 총 1개
객체
객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다.
- 객체는 변수이다. 하지만 객체에는 많은 값이 포함될 수 있다.
- 객체는 중괄호 표기를 이용하여 만들 수 있다.
- 객체는 각각의 key/value에 대한 정보를 나열할 수 있다.
- 메소드 : 객체안의 함수, 객체가 가지고있는 동작
- 프로퍼티 : 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태 (key와 value로 구성)
function Triangle(b,h)
{
this.base = b;
this.height = h;
this.area = function()
{
return this.base * this.height / 2;
}
}
var triangle1 = new Triangle(10,20);
console.log(triangle1.base);
console.log(triangle1.height);
console.log(triangle1.area());
var triangle2 = new Triangle(10,10);
console.log(triangle2.base);
console.log(triangle2.height);
console.log(triangle2.area());var triangle1 = new Triangle(10,20); 와 var triangle2 = new Triangle(10,10);의 의미는 아래의 코드와 같다.
var triangle1 =
{
this.base = 10;
this.height = 20;
this.area = function()
{
return this.base * this.height / 2;
}
}
var triangle2 =
{
this.base = 10;
this.height = 10;
this.area = function()
{
return this.base * this.height / 2;
}
}
document.write(fee);
document.getElementById("box").innerHTML = fee;
document.getElementsByClassName("box")[0].innerHTML = fee;
document.querySelector(".box").innerHTML = fee;
document.querySelectorAll(".box")[0].innerHTML = fee;document.write() : 괄호안의 내용을 출력
document.getElementById() : 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 객체를 반환
document.getElementsByClassName() : 주어진 클래스를 가진 모든 자식 엘리먼트를 반환
document.querySelector() : 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫번째 Element를 반환, 일치하는 요소가 없으면 null 반환
document.querySelectorAll() : 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 반환
DOM
문서 객체 모델 (DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현된다.
document
document는 DOM 트리의 최상위 객체이다.
브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다.
그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다.
document 객체의 역할
- 프로퍼티로 HTML 문서의 전반적 속성을 나타냄
- 메소드로 DOM 객체 검색
- 메소드로 새로운 DOM 객체 생성
- 메소드로 HTML 문서의 전반적 제어 지원
'프론트엔드 > 특강' 카테고리의 다른 글
| 특강7일 (0) | 2021.12.07 |
|---|---|
| 특강6일 :반응형 웹사이트만들기 (0) | 2021.12.06 |
| 특강4일 : 자바스크립트 (0) | 2021.12.01 |
| 특강2일 : 사이드바, 애니메이션 (0) | 2021.11.29 |
| 특강1일 : html, css (0) | 2021.11.26 |