컴파일언어 vs 인터프리터 언어 (작성과 해석을 동시에)
자바스크립트 -> ★this : 중요
전역변수는 윈도우객체
/전역변수 vs 지역변수
var myVar="전역변수";
function myFunc() {
var myVar="지역변수"; //함수가 한번호출되면 사라짐
document.write("지역변수:"+myVar+"<br>");
document.write("전역변수:"+this.myVar+"<br>"); //일반함수 안에서 this는 윈도우객체(window써도됨)=>전역변수 범위를 나타냄, 이름이 같아서 this써준 것임.
}
myFunc();
함수 : 재사용성을 위해 사용
--
console.log("add : "+add(10,20));
console.log("add : "+add2(100,200));
//선언적 함수
function add(a,b){
var sum = a+b;
return sum;
}
//익명함수 : 함수를 변수에 넣을 수 있음
var add2 = function (a,b){ //데이터타입 : function
var sum = a+b;
return sum;
}
var add2 = (a,b) =>a+b; (arrow function)
->top-down방식으로 해석이 이루어짐.
선언적함수는 먼저 메모리에 올라옴. (호이스팅가능) ->들어올리다
함수를 기준으로 밑에서 console창을 호출할거면 상관없지만
먼저 값을 호출할거면 익명함수 말고 선언적 함수를 사용해야 함.
var add2 = function (a,b){
//var sum = a+b;
var sum = 0;
alert(typeof (arguments) + " : " + arguments.length); //알림창 띄우기, arguments ->단편적으로 하나씩 끄집어내서 배열로 만듦
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
console.log("add : "+add(10,20));
console.log("add : "+add2(100,200));
console.log(typeof add2);
//변수에 함수를 전달할 수 있다
var plus = add2;//함수의 주소값 전달
console.log("plus : "+ plus(1,2,3,4,5));
결과값 : 15 (인자들의 합을 구할 수 있음)
**var plus = add2; //함수를 전달
**var plus = add2(); //함수값을 전달
//함수의 인자에 함수를 전달할 수 있다. => 파라미터도 변수이므로 변수에 함수를 할당할 수 있다.
var foo = function(func){
if(typeof func == 'function'){
func();
}
}
foo(function(){//콜백함수 -> 다른 함수의 파라미터에 들어가는 값 : 파라미터에 함수할당
console.log("파라미터에 함수를 호출하는 예제");
})
//함수 안에서 함수를 리턴하여 리턴한 함수를 호출하라
var foo2 = function(){ //foo2()의 값
return function(){ //내부함수 ->리턴값이 함수
console.log('함수를 리턴하는 예제');
}
}
var baz = foo2(); //변수 baz에 return된 내부함수가 할당됨
baz();//함수값 호출
function a() {
function b() {
return "안녕";
}
return b();
}
var z=a();
console.log(z);
(function foo3(){ //즉시 실행 함수 : 함수를 실행과 동시에 호출가능
console.log("즉시 실행됨");
})();
----변수에 함수를 넣을 수 있다.----
자바스크립트, 노드js => 우리나라에서 잘 안씀
정규표현식
//함수를 호출할 경우 생성되는 실행 context 영역
var var1 = 10;
function func(){
var var1 = 20;
console.log("var1: " +var1);
}
func();
-> var1 =20 출력 //지역변수 호출
var value ="value1";
function printFunc() {
var value = "value2";
function printValue() {
return value;
}
console.log(printValue());
}
printFunc();
->value2 호출 //지역변수
var value ="value1";
function printValue() {
return value;
}
function printFunc(func) {
var value = "value2";
console.log(func());
}
printFunc(printValue);
->value1 호출
//클로저 (실행 context를 넓히는 방법) : 외부함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는 구조
function outerFunc(){
var x = 10; //지역변수 -> 함수호출 이후 사라짐
var innerFunc = function(){
console.log(x);
}
return innerFunc;
}
var inner = outerFunc(); //지역변수가 함수호출 이후에도 사라지지 않게 해줌.
inner();
->10 호출
function outer(arg1, arg2){
var local = 8;
function inner(innerArg){
console.log((arg1+arg2)/(local+innerArg));
}
return inner;
}
var exam = outer(16, 14); //inner값을 exam으로 받음
exam(2);
//outer(16,14)(2)
//=>3
->3 출력
-document.write(sum); ->문서에 출력
-console.log(sum); ->콘솔창에 출력
var foo = function(func){
if(typeof func == 'function'){
func();
}
}
foo(function(){//콜백함수 -> 다른 함수의 파라미터에 들어가는 값
console.log("파라미터에 함수를 호출하는 예제");
})
foo(100);
**콜백함수
function callTenTimes(callback) {
//10회 반복
for(var i=0;i<10;i++){
callback();
}
}
var callback = function() {
alert("함수 호출");
}
callTenTimes(callback);
--
function test(name) {
var output = "Hello " + name + " !!!";
return function() {
alert(output);
}
}
var test_1 = test("Web");
var test_2 = test("JavaScript");
test_1(); //Hello Web!!!
test_2(); //Hello JavaScript !!!
//3초 후에 함수를 실행하자.
setTimeout(function() {
alert("3초가 지났습니다.");
}, 3000)
var id = setInterval(function() { //시간 간격마다 호출
console.log('<p>'+new Date()+'</p>');
}, 1000);
setTimeout(function() { //끝내기
clearInterval(id)
}, 10000);
-----
alert('A'); //파라미터에 함수들어가는 함수가 콜백함수
setTimeout(function() {
alert('B');
}, 0);
alert('C');
결과 -> A, C, B
//콜백 : 문제(특정타이밍에 의해 실행됨, for문을 돌동안 i값이 변하지 않음) -> 즉시실행함수로 만들기(선언과 실행 동시)
for(var i=0;i<3;i++){
setTimeout(function()//콜백 {
alert(i);
},0);
}
--for문 다 지나가버리고 마지막 값만 출력됨. 3만 나옴
//콜백 : 특정타이밍에 의해 실행됨(즉시실행함수 사용-함수가 3개 생성된 것과 같다)
for(var i=0;i<3;i++){
(function(closed_i){
setTimeout(function() {
alert(closed_i);
},0);
})(i);//자기함수의 파라미터로 던짐
}
--0, 1, 2
***객체
-User
-
Object -> 새로운 속성 추가(동적 property추가 가능)
-
JSON형식 wr obj={} 객체 key-value, key-value
-
생성자함수 (new를 쓸때 중복된 내용을 제거하고자 사용- 객체를 생성했을 때 호출되는 역할)
-내장객체
-
core객체(Date, Math, Array)
-
브라우저 객체(Window, Document, Location 등) DOM(Document Object Model) : 모든 ur태그는 객체
//사용자 정의 객체
//1.object객체
var obj = new Object();
obj.name = "홍길동";
obj.age = 20;
console.log("이름 : " + obj.name);
console.log("나이 : " + obj.age);
//2. ★★리터럴 형식 객체
var a = {}; //중괄호 = 객체
var obj2 = {
name : "박길동",
age : 20,
display : function() {
console.log("name : " + this.name);//객체안에서의 this는 객체
}
};
obj2.display();
//함수도 객체이다.
function add(x,y) {
return x+y;
}
add.result = add(100,200);
add.status = "ok";
console.log(add.result);
console.log(add.status);
//퀴즈>리터럴형식으로 객체를 임의로 생성 후
// 동적프로퍼티와 메서드를 등록 후 사용하는 예제를 구현하시오.
var obj3 = {
name : "몽글",
display : function () {
console.log(this.name);
}
};
obj3.display();
obj3.age = 4;
console.log(obj3.age);
->몽글
->4살
//퀴즈>리터럴형식으로 객체를 구현하시오.
// Person객체 (name : 프로퍼티, eat(food){} : 함수)
// 결과> 홍길동이 밥을 먹었습니다.
var Person = {
name : "홍길동",
eat : function (food) {
console.log(this.name +"이 "+food+"을 먹었습니다.")
}
};
Person.eat('밥');
->홍길동이 밥을 먹었습니다.
'FULLSTACK > WEB' 카테고리의 다른 글
| JAVA SCRIPT 4차시 - event, this, DOM (0) | 2020.11.13 |
|---|---|
| JAVA SCRIPT 3차시 - 객체 (0) | 2020.11.13 |
| CSS 2차시, JAVA SCRIPT 1차시 - position, 게시판완성 (0) | 2020.11.13 |
| CSS 1차시 (0) | 2020.11.13 |
| HTML 1차시 - HTML5 시맨틱 태그 (0) | 2020.11.13 |