JS | this
·
JavaScript
1 ) 함수에서의 this 는 window라는 최상위 객체를 가리킨다. //함수에서의 this -> window라는 최상위 객체를 가리킴 var a = 1; //전역변수 a는 window에 선언됨 function aaa(){ var a = 10; //지역변수 console.log(a); //지역변수 접근 10 console.log(this); //window console.log(this.a); //전역변수에 접근 1 } aaa(); 2 ) 이벤트에서의 this 는 태그 자신을 가리킵니다. //이벤트에서의 this -> 태그 자신 var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ console.log(th..
JS | 이벤트 핸들러
·
JavaScript
* 이벤트란? - 이벤트 : 사용자의 동작 - 핸들러 : 이벤트가 일어났을 때 제어해주는 함수 화면에서 클릭이나, 동작시 발생하는 동적인 기능입니다. 자바스크립트의 첫번째 강력한 기능이며, 사용방법만 암기하면 충분합니다. 태그와 스크립트의 이벤트를 연결한다. 그 방식에는 (1)인라인 이벤트 모델, (2)기본 이벤트 모델, (3)표준 이벤트 모델이 있으며 이벤트 앞에 on을 붙입니다. * 이벤트 종류 이벤트 앞에 on을 붙입니다. ex) onclick, onload, onfocus click 마우스를 클릭했을 때 이벤트 발생 dbclick 마우스를 더블클릭했을 때 이벤트 발생 mouseover 마우스를 오버했을 때 이벤트 발생 mouseout 마우스를 아웃했을 때 이벤트 발생 mousedown 마우스를 눌..
JS | JSON(객체표기법)
·
JavaScript
다른 서버와 데이터를 주고받는 일을 할 수 있다. 네트워크는 json을 모른다. 데이터는 주고 받을 때 자바스크립트 객체 형태로 주고 받을 수 없고 문자열 형태로 주고 받을 수 있다. ( json형식을 띄고 있는 ) 문자열의 형태로 형변환해서 데이터를 보내주어야한다. 문자열 타입이 넘어오는(받아오는) 데이터는 객체 타입으로 다시 형변환해서 받아야한다. 데이터 타입을 문자열로 형변환 하는 함수 JSON.stringify(data); 문자열을 제이슨으로 형변환 하는 함수 단, 이 경우는 엄격한 형식을 지킨다. (키,값이 전부 " "로 묶여야한다.) JSON.parse(문자열); var data = [ {id:'aaa123', title:'aaa',content:'a...'}, {id:'aaa123', tit..
JS | 객체
·
JavaScript
json은 객체의 표기법이지 객체는 아니다 객체는 { } (중괄호)로 표기합니다. 키 : 값 map과 동일한 방법으로 사용된다. //객체의 표현{} var person = {name : 'hong', age:20, info:[1,2,3]}; console.log(person); //객체의 접근방법이 2개 입니다. //list -> .으로 접근 console.log(person.name); //hong console.log(person.age); //20 console.log(person.info);//[1,2,3] //2nd -> 이름[키] console.log(person['name']); //hong console.log(person['age']); //20 console.log(person['inf..
JS | 클로저
·
JavaScript
Lexical scoping (렉시칼 스코프) : 함수가 선언된 위치에 따라서 사용할 수 있는 값(참조될 수 있는 값)이 달라진다. 함수의 선언 위치에 따라서 상위 스코프를 결정하게 된다. 나랑 가까운 b전역변수를 참조하게 된다. //렉시칼 스코프 - 함수의 선언 위치에 따라서 상위 스코프를 결정하게 된다. var a = 1; function x(){ a = 10; console.log(a); //10 } x(); var b = 1; function y(){ var b = 10; z(); } function z(){ console.log(b); } y(); //1 클로저 내부함수를 이용해서 외부함수(a)의 변수의 접근할 수 있는 환경을 만들어준다. function func1(){ var a = 1; //..
JS | 전역변수(global)와 지역변수(local)
·
JavaScript
var 변수가 전역적으로 사용되기 위해서 함수 scope가 지역변수처럼 사용된다. var 변수 스코프는 함수다. 함수 스코프를 갖는다. 중복 변수의 선언이 가능하다. 함수 안에서만 지역변수처럼 함수안에서만 유효하다. 중괄호 안에서 사용되는 변수는 전역취급을 한다. let변수는 자바 문법과 같다. 지역취급 var 변수 function안에서만 지역변수의 취급이 들어간다. //var변수의 유효범위는 함수이다. var num1 = 50; //전역변수 if(true) { var num2 = 100; //전역취급 } console.log(num2); //function안에서만 지역변수의 취급이 들어간다. var num3 = 100; //전역변수 function add(){ var num4 = 200; //지역변수 ..
JS | 함수의가변 인자 argument
·
JavaScript
자바스크립트에서 매개변수는 큰 의미가 없다. 단순히 인자 값에 들어오는 것에 이름을 붙이는 형태이다. 매개변수를 사용하는 이유 값을 외부에서 쉽게 전달받아 함수에서 사용하기 위해 사용 인자값의 개념이다. argument라는 키워드에서 언제든지 매개값을 찾아 사용할 수 있다. 매개값을 안쓰는것은 불가. 매개값을 지키려고는 해야함. 매개 변수가 가변적으로 변할 수 있다는 점을 알고 있어야한다. function func1(x,y) { //arguments 키워드를 이용해서 매개변수를 찾아서 사용할 수 있습니다. console.log("매개변수의 길이:"+arguments.length); //전달되는 매개변수를 찾아 사용할 수 있는 arguments 키워드 //arguments는 배열의 형태 console.lo..
JS | 함수(화살표 함수)
·
JavaScript
화살표 함수 -ES6에 추가된 함수 내용으로 => 를 이용하는 함수입니다.