32일차 2023-04-20
2023. 4. 20. 19:10ㆍJavaScript
Html5
나중에 배우지만 dom은 html 문서를 제어함
var span에 dom을 'text'인 id를 받아옴 (아래 <span id="text"> </span> 이걸 제어함)
toggle에 기본 토글을 false로 해놓은 걸 !붙여서 대입 연산. 그래서 한번 끝날 때마다 바뀜
Span15.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span15.html</title>
<script>
var toggle=false;
function toggleText(){
var span =document.getElementById('text');
if(!toggle)
span.innerHTML='자바스크립트';
else
span.textContent='JavaScript';
toggle=!toggle;
}
</script>
</head>
<body>
<!--
일반적인 HTML태그와 달리 MARKUP기능은 없다.
주로 자바스크립트와 CSS에서 활용(제어)하기 위한 태그
-->
기본 텍스트
<h2><span>태그</h2>
<span>기본 텍스트</span>
<h3>자바스크립트에서 활용</h3>
오늘의 첫 수업은 <span id="text">JavaScript</span>입니다<br/>
여기에 <span id="image">이미지</span> 표시하기<br/>
아래에 구구단 표시하기<br/>
<span id="gugudan"></span>
<fieldset>
<legend>버튼들</legend>
<button onclick="toggleText()">텍스트 변경</button>
<button onclick="setImage()">이미지 교체</button>
<button onclick="printGugudan()">구구단 표시</button>
</fieldset>
<h3>CSS에서 활용</h3>
오늘은 <span class="monday">월요일</span> 입니다<br/>
<span class="html5">HTML5</span> 수업입니다
</body>
</html>결과) JavaScript에서 한글로 자바스크립트로 바뀜 (토글방법)
JavaScript
break 만나면 나옴.(아래 실행 안됨)
continue 만나면 다시 위로 올라감.(아래 실행 안됨)
BreakContinue07.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BreakContinue07.html</title>
<script>
/*
break문:switch문이나 반복문을 빠져 나갈때
continue문:반복문 처음으로 갈떄
break문dlsk continue문 이후의 문장은 실행이 안됨.
*/
//break;//[x]
//continue;//[x]
var i=0;
while(-1){//자바의 while(true)와 같다
i++;
console.log('i='+i);
if(i==3) break;
console.log('break문 이후');
if(i%2 ===0) continue;
console.log('continue문 이후');
}
</script>
</head>
<body>
</body>
</html>결과)
function add(x, y)//55줄 반환값이 없으면 undefined 뜬다 return 넣어주기
Set, Map객체 생성 시 [ ]를 써줘야 된다.
Function08_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Function08_1.html</title>
<script>
/*
[함수정의]
방법1]함수 선언(정의)문(유명함수) - 호이스팅 된다
function 함수명([매개변수1,매개변수2,..]){ //var사용불가,즉 매개변수 정의시 변수명만
함수가 할일 구현;
[return 변수혹은 값;]
※return이후의 명령문은 실행이 안됨
}
방법2]함수 표현식(익명함수)-호이스팅 안된다.
var 변수명 = function([매개변수1,매개변수2,..]){
함수가 할일 구현;
[return 변수혹은 값;]
};
방법3]즉시 실행함수
(function [함수명]([매개변수1,매개변수2,..]){ //var사용불가,즉 매개변수 정의시 변수명만
함수가 할일 구현;
[return 변수혹은 값;]
※return이후의 명령문은 실행이 안됨
})([매개변수1,매개변수2,..])
//함수호출
-함수 정의한 원형 그대로 호출
함수명([매개변수1,매개변수2,..]);
※함수안에서 선언된 변수는 함수호출이 끝나면 메모리에서
사라진다. 즉 지역변수이다(Local Variable).
그리고 script태그안에서 선언된 변수는
해당 페이지 모든 영역에서
사용가능한 전역변수 이다(Global Variable)
※자스는(ES5) 함수 스코프를 따른다.(자바처럼 블락{} 스코프가 아니다).
※자스는 오버로딩이 없다.
같은 이름의 함수(매개변수 갯수가 다른)를 여러개 정의해도 가장 마지막에
정의한 함수가 호출된다(호출하는 코드와 가장 가까운 함수가 호출됨)
※자스는 함수인 인자로 가변인수를 사용한다
예를 들면 매개변수가 2개더라도 인자로 2개이상을 전달 할 수 있다.
*/
//함수정의 첫번째- Function생성자 함수
/*
console.log('[Function생성자 함수 사용]');
var add = new Function('x','y','console.log("생성자 함수로 함수정의");return x+y;');
console.log(add);
console.log('%O,타입:%s',add,typeof add);
console.log(add(10,10));*/
console.log("[함수 선언문 사용 - 호이스팅 일어난다]");
console.log(add(10, 5));
//console.log('%O',add);
function add(x, y) {
//호이스팅이 일어난다
//arguments 객체는 함수에 전달된 모든 인수를 참조할 수 있는 배열형태(유사배열)의 객체이다
console.log(arguments);
console.log("%O", arguments);
for (var i in arguments) {
console.log(arguments[i]);
}
return x + y;
}
//자스는 매개변수의 갯수와 상관없이 인자를 가변적으로 전달 할 수 있다
//함수 내부적으로 arguments라는 인자를 담은 컬렉션형태 타입을 제공한다
//argments객체는 유사배열로 length속성 및 인덱스로 접근 가능
//단,forEach()함수 나 map()함수등은 없다
console.log(add(100, 200, "가길동", 20, "가산동"));
function accumulate() {
/*
var total=0;//함수안에서 선언된 지역변수
for(var i in arguments){
total+=arguments[i];
}
//var summary=total;이면 summary는 지역변수지만
//안 붙인 경우 함수 호출시점시 window객체의 속성으로 추가된다
summary = total;
return total;*/
//https://www.w3schools.com/js/js_sets.asp
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from
//Array.from():유사배열 객체(argments)나 반복가능한객체(예:문자열,Set,Map등)를
// 배열로 변환하는 함수
return Array.from(arguments).reduce(function (x, y) {
return x + y;
});
} /////////
//console.log('함수 호출전:',summary);//[x]summary is not defined
console.log("누적합:", accumulate(1, 2, 3, 4, 5));
console.log("누적합:", accumulate(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));
//summary은 호출시점에 window객체의 속성으로 추가됨.전역변수와 같다
console.log("함수 호출후:", window.summary);
console.log("[함수 표현식(함수 리터럴) 사용 - 호이스팅이 안 일어난다]");
//exp();//[x]exp is not defined
console.log(exp); //undefined
var exp = function () {
console.log(this); //Window
console.log("함수 표현식입니다");
};
window.exp(); //[o]함수 표현식 밑에서 호출해야 한다.
var hoisting = 100;
function hoist() {
console.log(hoisting);
var hoisting = 200;
console.log(hoisting);
}
hoist(); //undefined 200
</script>
</head>
<body>
</body>
</html>
결과)
Function08_2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Function08_2.html</title>
<script>
//함수 형식 1]
//함수 정의- 함수 선언문
function noParamNoReturn() {
console.log("===============Menu===============");
var menu = "";
if (arguments.length != 0) {
for (i in arguments) {
menu += " " + arguments[i];
}
}
console.log("1.계속 2.나기기 " + menu);
console.log("==================================");
}
console.log(noParamNoReturn);
console.log("타입:%s", typeof noParamNoReturn);
window.noParamNoReturn();
window.noParamNoReturn("메뉴1", "메뉴2", "메뉴3");
//함수 형식 2]
//함수 정의- 함수 표현식
var yesParamNoReturn = function (start, end) {
var total = 0;
for (var i = start; i <= end; i++) total += i;
console.log("%d부터 %d까지 누적합:%d", start, end, total);
};
console.log(yesParamNoReturn);
console.log("타입:%s", typeof yesParamNoReturn);
yesParamNoReturn(1, 10);
/*
전역변수:script태그안에 선언된 변수로 해당 페이지 어디에서나 사용 가능
지역변수:함수안에 선언된 변수(매개변수 포함).함수밖에서 사용시 에러
*/
//함수 형식 3]
var noParamYesReturn = function () {
var name = prompt("이름 입력?", "");
var age = prompt("나이 입력?", 1);
return "이름:" + name + ",나이:" + age;
console.log("return문 이후"); //자바 unreachable code에러 발생.자스는 실행만 안됨
};
console.log(name); //기본적으로 window객체에 name속성이 있다
//console.log(age);//[x]age is not defined
//console.log(noParamYesReturn());
//함수 형식 4]
function yesParamYesReturn(num1, num2) {
if (arguments.length == 2) {
return num1 > num2 ? num1 : num2;
}
/*
var max =arguments[0];
for(var i=1;i<arguments.length;i++){
if(max < arguments[i]) max = arguments[i];
}
return max;*/
return Array.from(arguments).sort((x, y) => y - x)[0];
} //////////////
console.log("최대값:", yesParamYesReturn(10, 9));
console.log("최대값:", yesParamYesReturn(10, 9, 99, 100, 88));
//즉시 실행함수:아래는 즉시실행 함수에서 반환값을 realTime에 저장
var realTime = (function (num1, num2) {
console.log("즉시 실행함수");
return num1 + num2;
})(10, 20);
console.log("반환값:", realTime);
</script>
</head>
<body></body>
</html>결과)
this는 호출객체다
함수 안에서 this는 윈도우
왜냐? conflict(gVar)가 window객체(근데 Window생략가능)니까
자바스크립트는 프로토타입 기반 언어
자바는 클래스로 객체를 만드는데
자바스크립트는 클래스가 없어서 함수로 객체를 만든다.
자바스크립트는 객체 생성 후에도 속성과 함수추가가 가능하다
Function08_3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Function08_3.html</title>
<script>
var param = 100,
args = 1;
//Call By Value]-값에 의한 호출.값이 전달
function callByValue(param, args) {
//매개변수 param,args는 지역변수
var temp = param;
param = args;
args = temp;
console.log("callByValue함수 안:param-%s,args-%s", param, args);
}
callByValue(param, args);
console.log("callByValue함수 밖:param-%s,args-%s", param, args);
var array = [100, 1];
var callByRef = function (arr) {
var temp = arr[0];
arr[0] = arr[1];
arr[1] = temp;
console.log("callByRef함수 안:arr[0]-%s,arr[1]-%s", arr[0], arr[1]);
};
callByRef(array);
console.log(
"callByRef함수 밖:array[0]-%s,array[1]-%s",
array[0],
array[1]
);
//참조에 의한 호출 예제]
var member = [];
function setMember(numberOfStudents, member) {
for (var i = 0; i < numberOfStudents; i++) {
member.push(prompt(i + 1 + "번째 이름 입력?", ""));
member.push(prompt(i + 1 + "번째 나이 입력?", ""));
member.push(prompt(i + 1 + "번째 주소 입력?", ""));
}
}
//var numberOfStudents = parseInt(prompt('인원수를 입력?',1));
//setMember(numberOfStudents,member);
//console.log(member);
//※지역변수와 전역변수 충돌시 지역변수가 우선
var gVar = 100; //전역 변수
function conflict(gVar) {
//매개변수 gVar는 지역변수
//gVar = gVar*2;//매개변수 = 매개변수 *2
console.log(this);
this.gVar = gVar * 2;
console.log("함수안의 지역변수(gVar):", gVar);
}
window.conflict(gVar);
console.log("함수밖의 전역변수(gVar):", window.gVar);
/*
문]배열을 매개변수로 입력받아 배열을
크기순(큰 값부터)으로 재 정렬하는 함수를 정의해라
그리고 호출하여 그 결과를 출력하여라.(배열의 sort()함수 사용불가)
*/
var arr = [9, 45, 10, 23, 99, 222, 34, 100, 77, 88];
//1]함수 정의
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++)
for (var k = i + 1; k < arr.length; k++)
if (arr[i] < arr[k]) {
var temp = arr[k];
arr[k] = arr[i];
arr[i] = temp;
}
}
//2]함수호출
sort(arr);
//3]출력
console.log(arr);
arr.forEach(function (item) {
console.log(item);
});
</script>
</head>
<body>
</body>
</html>
결과)
Json은 자바스크립트의 객체를 표현
변수는 속성과 같다
2. 생성자 함수 사용
여기서 this는 window가 아니다
여기선 객체를 의미
생성자 함수에선 주로 속성만 정의함
new를 붙이면 생성자 함수(new유무 차이) 없으면 일반 함수
var 객체명= new 생성자함수명();
{}와, prototype이 있다는 게 차이점
꺼내올 키가 없어서 안 들어감
Function08_4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Function08_4.html</title>
<script>
/*
자스는 프로토타입 기반의 언어로 프로토타입(원형)을 만들고
프로토타입으로 객체를 만들고 속성이나 함수를 추가한다
자스는 객체기반의 함수형 프로그래밍 언어다
자스에서 객체를 만드는 법 두 가지(new Object()제외)
자스의 모든 객체는 Object라는 프로토타입을 상속받는다
Object프로토타입의 메소드
toString():객체의 주소를 문자열로 반환 ("[object Object]")
valueOf():객체의 주소를 반환([object Object])
1. 중괄호 사용(객체 Literal-JSON(JavaScript Object Notation))
var 객체명 = {};(new Object()와 같다) 혹은 {"속성(키)":"값",....}
속성 추가시에는 객체명.속성명=값;
함수 추가시에는 객체명.함수명 =function(){};
2. 생성자 함수 사용
function 생성자함수명(){
this를 사용해서 속성 설정
}
-보통 일반함수와 구분하기위해 함수명을 대문자로 시작
-return문을 안쓴다
-생성자 함수에는 주로 속성만 정의한다
var 객체명= new 생성자함수명();
-함수는 객체명.prototype.함수명=function(){}로 별도로 정의한다.
※상속
자식의 생성자 함수 안에서
부모생성자함수.apply(this, arguments);(자바의 super()와 같다)
부모자 생성자의 this와 arguments(매개변수)를 적용한다는 의미
메소드는
자식생성자함수.prototype = Object.create(부모생성자함수.prototype);
Object의 create()함수로 부모의 프로토타입으로 자식의 프로토타입을
생성한다는 의미.이러면 부모의 메소드를 상속받게 된다
자식생성자함수.prototype.constructor = 자식생성자함수;//생략시 자식의 생성자 함수가 부모가 된다 즉 반드시 있어야 한다
*/
//[첫번째: {}로 객체 만들기]
var brace = {}; //new Object();와 같다.Object()이 생성자 함수
console.log("타입:%s,brace:%O", typeof brace, brace);
for (key in brace) console.log("key:%s,value:%s", key, brace[key]);
//Object.keys(객체) : 키값을 배열로 반환
var keys = Object.keys(brace);
console.log(keys); //[]
//Object.values(객체) : 값들을 배열로 반환
var values = Object.values(brace);
console.log(values); //[]
//속성 추가
brace.username = "가길동";
brace.years = 20;
//함수 추가
brace.print = function () {
console.log(this); //{username: '가길동', years: 20, print: ƒ, makeFriend: ƒ}
console.log(this === window); //false
console.log("이름:%s,나이:%s", this.username, this.years);
};
brace.makeFriend = function (username, years) {
//인자로 받는 값이 친구
console.log(
"%s의 친구 이름은 %s이고 그 친구의 나이는 %s살이다",
this.username,
username,
years
);
};
console.log("[키와 값 출력]");
keys = Object.keys(brace);
console.log(keys);
values = Object.values(brace);
console.log(values);
//속성 값 읽기 : 객체명.키 혹은 객체["키"]
//단,키를 변수 처리시에는 반드시 객체[변수명]로 접근해야 한다
console.log(brace.username);
console.log(brace["username"]);
console.log(brace.years);
console.log(brace["years"]);
//함수 호출
brace.print();
brace.makeFriend("가길순", 19);
//JSON.stringify(JOSN객체):JSON형태의 문자열로 변환 즉 object타입을 string타입으로변환(JOSN객체의 함수는 제외됨)
//'{"키":"값".,...}' 형태의 문자열
console.log(brace);
var jsonString = JSON.stringify(brace);
console.log(jsonString, ":", typeof jsonString);
//console.log(jsonString.username);//undefined
//JSON.parse(JSON형태의 문자열) : 문자열을 자바스크립트 객체(즉 JSON)로 변환.
//JSON.parse()적용시 키는 반드시 ""으로 감싸야 정상적으로 파싱된다
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject.username);
//{}브레이스로 객체 생성시 처음부터 속성 및 함수 설정]
//키값은 ' 나 "로 감싸지 않아도 된다(자스코드에서).
//단,값은 받드시 감싸야 한다(숫자는 예외)
var brace2 = {
num1: 10,
num2: "20",
num3: "삼십",
add: function () {
return this.num1 + parseInt(this.num2);
},
minus: function () {
return this.num1 - parseInt(this.num2);
},
};
console.log(brace2.num1);
console.log(brace2.add());
console.log(brace2.minus());
//속성 두개 추가
brace2.num4 = 40;
brace2["num5"] = 50;
console.log(brace2);
//문자열로 변환시 숫자를 제외한 모든 키와 값이 ""로 감싸진디
console.log(JSON.stringify(brace2));
//객체의 속성 삭제 : delete 객체명.속성명 혹은 delete 객체명['속성명']
delete brace2.num4;
delete brace2["num5"];
delete brace2.minus;
console.log(brace2);
//[두번째: 생성자 함수로 객체 만들기]
//생성자 함수로 객체를 만들면 같은 구조의 객체를 계속해서
//찍어 낼수 있다.({}로 객체를 만들때는 불가)
function Human(username, years) {
//Human객체 속성 추가
console.log(this);
this.username = username;
this.years = years;
this.birthday = new Date();
}
//함수 추가하기
//생성자함수.prototype.함수명=function(){}; 자바의 인스턴스형 메소드와 같다.
Human.prototype.print = function () {
console.log(
"이름:%s,나이:%s,생일:%s",
this.username,
this.years,
this.birthday
);
};
//Human을 일반 함수처럼 호출시 - this는 Window객체
//Human('가길동',20);
//console.log(window.birthday);
//Human을 new로 객체화시 - this는 객체화 된 Human객체를 의미 Human
var human = new Human("나길동", 30); //인스턴스화
console.log(typeof human);
console.log(human);
console.log(JSON.stringify(human));
//속성 값 읽기
console.log(human.username);
console.log(human["birthday"]);
//함수 호출
human.print();
var human_ = new Human("다길동", 40);
human_.print();
human_.years = 20; //나이 수정
human_.print();
//instanceof 연산자:해당 객체가 어떤 생성자 함수 타입인지 알아내는 연산자.
//변수(객체명) instanceof 생성자함수명
//자스의 모든 객체는 Object로부터 상속 받았다
var array = new Array(10);
console.log(array instanceof Array);
console.log(array instanceof Object);
console.log(array instanceof String);
//[자바스크립트에서의 객체 상속하기]
//Human을 상속 받자 즉 Human을 상속받은 Asian 생성자함수를 만들자
//1.부모(Human)의 "모든 속성" 상속 받기
function Asian(username, years, race) {
//부모 생성자의 this와 arguments(매개변수)를 적용한다(상속받겠다)는 의미.
//자바의 super(username,year)와 같다.
Human.apply(this, arguments); //this는 Human
this.race = race; //자식에서 race속성 추가
}
//2.부모의 "메소드" 상속 받기
Asian.prototype = Object.create(Human.prototype);
//아래 생략시 Asian.prototype.constructor===Human 이 true
//즉 Asian의 생성자 함수는 Human이라는 의미
Asian.prototype.constructor = Asian;
//Asian에 새로운 함수 추가
Asian.prototype.farm = function () {
console.log(
"생일이 %s이고 %s살인 %s가 농사짓다",
this.birthday,
this.years,
this.username
);
};
//인스턴스화(객체화)
var asian = new Asian("코스모", 10, "황인종");
console.log(asian);
console.log(asian instanceof Asian);
console.log(asian instanceof Human);
console.log(Asian.prototype.constructor === Human);
asian.print(); //오버라이딩 전-인종이 출력안됨
asian.farm();
//오버라이딩:상속받은 부모의 메소드를 재정의.
// 오버라이딩이라는 개념은 존재하나
// 단,매개변수와 반환값이 일치하지 않아도 된다(메소드명은 동일하게)
Asian.prototype.print = function (language) {
console.log(
"이름:%s,나이:%s,생일:%s,인종:%s,언어:%s",
this.username,
this.years,
this.birthday,
this.race,
language
);
};
asian.print("한국어");
console.log(asian.toString()); //"[object Object]" 오버라이딩 전
Asian.prototype.toString = function () {
return "이름:" + this.username + ",나이:" + this.years;
};
console.log(asian.toString()); //"이름:코스모,나이:10" 오버라이딩 후
</script>
</head>
<body>
</body>
</html>
결과)
'JavaScript' 카테고리의 다른 글
| 34일차 2023-04-24 (0) | 2023.04.24 |
|---|---|
| 33일차 2023-04-21 (0) | 2023.04.21 |
| 31일차 2023-04-19 (0) | 2023.04.19 |
| 30일차 2023-04-18 (0) | 2023.04.18 |
| 29일차 2023-04-17 (0) | 2023.04.17 |