Programming Language/JavaScript
[JavaScript] BOM
[JavaScript] BOM
2022.12.09Browser Object Model 으로 웹 브라우저에서 웹 페이지를 제외한 모든 객체들을 의미한다. 그림은 BOM의 구조를 보여준다. window 객체가 최상단에 위치하고 그 아래 document / screen / location / history / navigator가 위치한다. document는 Document Object Model 부분에서 자세히 알아봤으니.. 다른 요소들에 대해 알아보자. window 객체에는 전역 변수로 선언한 모든 요소들이 포함된다. 모든 객체의 근원이 되기 때문에 window를 생략해서 사용하기도 한다. (window.document.get... -> document.get...) screen screen 객체를 통해 화면의 크기와 지원하는 색상 등을 알 수 있다. l..
[JavaScript] function
[JavaScript] function
2022.11.231. function 키워드 자주 사용하는 방식이다. 2. Literal function 키워드로 함수를 정의한 후 해당 함수를 사용하는 경우가 많지만, 리터럴 방식으로도 함수를 정의할 수 있다. 리터럴 방식을 사용할 때는 익명 함수를 사용한다. x(4, 3) 을 실행 시 12를 반환한다. 3. Constructor 자바스크립트의 built_in 함수인 Function을 사용해 함수를 정의할 수 있다. 4. Self Invoking 정의 후 스스로를 호출한다. 재사용 할 수 없다. 5. lambda (arrow) 람다식을 사용해 함수를 간단하게 표현 할 수 있다. 인자가 하나면 괄호를 생략할 수 있지만 인자가 없거나 두 개 이상인 경우는 괄호를 생략할 수 없다. Hoisting 자바스크립트는 다른 언어와..
[JavaScript] Object
[JavaScript] Object
2022.11.22let something = { a : 'A', b : 'B', }; 원시 타입의 값들은 변경할 수 없지만, 객체는 변경할 수 있다. 객체는 위와 같이 프로퍼티 키와 프로퍼티 값들로 이루어져 있으며, 프로퍼티 값으로는 자바스크립트에서 사용하는 모든 값이 해당될 수 있다. (함수 포함) 자바와 C++같이 클래스를 중심으로 객체를 생성하고 인스턴스화하는 클래스 기반 언어들에 반해, 자바스크립트는 프로토타입 기반 객체지향 언어로서 자바와 C++과는 다른 방법으로 객체를 생성한다. let something = { a : 'A', b : 'B', }; console.log(something); console.log(something.a); console.log(something['a']); 위와 같이 객체 리터럴..
[JavaScript] AJAX
[JavaScript] AJAX
2022.11.08Asynchronous JavaScript and XML 의 약자로, 비동기적으로 서버와 통신하는 방식을 의미한다. 지금까지는 서버로부터 정보를 전달받은 경우 페이지를 리로드해서 사용자에게 정보를 보여줘야 하지만, ajax 방식을 사용하면 페이지를 리로드 하지 않고도 정보를 보여줄 수 있다. 전체 페이지를 전부 다 로딩하지 않고 부분만 새로 로딩할 때 사용하는 방식이라고 생각하면 된다. 브라우저에서 이벤트가 발생하면 서버에게 HttpRequest를 전달한다. 서버는 받은 정보를 처리한 후 브라우저에게 처리 결과를 전달한다. 브라우저는 서버로부터 받은 정보를 바탕으로 자바스크립트를 사용해 해당되는 페이지를 업데이트한다. (https://www.w3schools.com/js/tryit.asp?filename..
[JavaScript] JQuery
[JavaScript] JQuery
2022.11.08제이쿼리는 자바스크립트 코드를 간결하게 축약시키 위해 사용된다. 제이쿼리를 사용해 작성된 코드는 어떤 브라우저에서도 동작함이 보장된다. 직접 다운로드해서 사용하는 방법과 구글 cdn을 사용하는 방법이 있는데, 구글 cdn을 사용하도록 하자. 이 방법이 로딩 시간을 더 짧게 만들어준다. 헤드 내부에서 스크립트를 정의할 때 위의 cdn을 사용하면 된다. selector 부분은 CSS 선택자 문법이 들어간다. selector 로 적용할 대상을 정하고, action() 으로 어떤 작업을 수행할 지 정한다. $(this).hide() : 현재 element를 숨긴다. $("p").hide() : p 태그를 숨긴다. 이런 식으로 자바스크립트만 사용 할 때 보다 훨씬 간결하게 사용할 수 있다. 아직 준비되지 않은 요..
[JavaScript] JSON
[JavaScript] JSON
2022.10.25JavaScript Object Notation의 약자로, 데이터를 교환하기 위한 format이다. JavaScript -> JSON / JSON -> JavaScript 두 방향으로 변환할 수 있어야 한다. JSON은 function / date / undefined를 다룰 수 없다. String, Number, Object, Array, Boolean, null {"name " : "asdf"} {"age" : 13} {"object" : {"name" : "a", "age" : "12" ... }} {"arr" : [1,2,3,4]} {"flag" : true} {"nulls" : null} JSON 타입의 데이터는 서버에 저장돼 관리되고, 클라이언트는 서버의 데이터를 가져와서 사용할 수 있어야 한..
[JavaScript] 정리 (2)
[JavaScript] 정리 (2)
2022.10.09문자열 내부에서 \\로 \표현 let x = "a" let y = new String("a") x 는 string 타입, y는 object 타입. 단, x를 사용할 때는 자동으로 형변환돼서 x.length 사용 가능. string 메서드 1. slice : 자를 때 사용. 자바의 substring과 유사하지만, 파이썬처럼 인덱스에 음수를 넣을 수 있음 2. substring : slice와 비슷하지만, 인덱스에 음수를 넣을 수 없고 사용법이 좀 다름. (7,6) 이면 7부터 6글자를 자름 3. replace : 말 그대로 특정 부분을 대체. 첫 번째 요소만 대체함. 정규표현식 사용 가능. 4. trim : 공백제거. 파이썬의 strip과 비슷함 5. padStart : 길이를 지정하고, 부족한 부분을 특..
[JavaScript] DOM
[JavaScript] DOM
2022.10.03DOM : Document Object Model. 웹 페이지를 객체로 접근한다. 자바스크립트로 HTML DOM 요소에 접근해 값을 변경할 때 사용된다. 위의 계층 구조를 기억하자. 루트 - 엘리먼트 - 텍스트 / 노드들의 관계를 알아두자.+ attribute 텍스트 노드는 항상 자식이다. 크롤링 할 때 하던거처럼 DOM요소에 접근한다. nodeName / nodeValue / nodeType 잘 써먹기 appendChild 메서드로 텍스트와 태그를 붙일 수 있음 insertBefore 메서드로 부모의 특정 태그 앞에 태그를 붙일 수 있음 remove와 replace 사용해서 HTML조작 가능 nodelist는 인덱스로만 접근 가능, 배열은 id class값으로도 접근 가능 JS로 form validat..
[JavaScript] 정리 (1)
[JavaScript] 정리 (1)
2022.09.28body태그 마무리 전에 자바스크립트 script태그가 위치해야 한다. HTML이 다 로드되고 난 후 자바스크립트를 로드하는게 합리적이다. write 메서드는 새로 페이지를 만들어서 보여줌 print 메서드는 말그대로 프린트 let은 중복선언 불가능, var은 중복선언 가능 let이 좀 더 엄격함 정의 안하면 undefined 타입 let var 안써도 됨 그런데 let 쓰는게 좋음 콤마로 이어서 작성 가능 var로 재선언해도 원래 값을 잃어버리지는 않음 문자열 + 숫자 시 문자열로 통일하는데.. 순서가 중요. 5 + 5 + '5' = 105 이고, '5' + 5 + 5 = 555임 정수 실수 모두 Number타입으로 통일 자바스크립트 객체는 프로퍼티 형식으로 지원함. 기본 타입도 객체 타입으로 쉽게 변..
[JavaScript] 스코프
[JavaScript] 스코프
2022.03.10자바스크립트에서의 변수 스코프는 자바에서의 스코프와 유사하다. 변수를 선언할 때 var키워드를 사용할 시 전역 변수로 취급될 수 있음에 유의하자. 렉시컬 스코프 자바스크립트는 렉시컬 스코프 방식을 따른다. 주어진 상황에서 결과값이 어떻게 출력되는지 예측해보자. var x = 1; function foo(){ var x = 10; bar(); } function bar(){ console.log(x); } foo(); bar(); 정답은 1 1 이다. 자바스크립트에서 함수의 스코프를 정의할 때 함수를 어디서 호출한지는 중요하지 않고, 함수가 정의된 위치에 따라 상위 스코프를 결정한다. bar함수는 전역에서 정의된 함수이다. bar함수가 정의될 때 이미 스코프가 결정됐기에 전역변수로 선언된 1을 출력하게 된..
[JavaScript] 함수
[JavaScript] 함수
2022.03.10함수 다른 언어들과 다르게 자바스크립트의 함수는 객체 타입의 값으로, 변수에 저장할 수 있다. let func = function(a,b){ return a+b; } let temp = func(1,2) console.log(temp); // 3 위와 같이 함수 표현식에서는 함수의 이름을 생략해도 되지만, 함수 선언문에서는 함수의 이름을 생략할 수 없다. function(a,b){ return a+b; } // 함수 이름을 지어 줘야 오류가 사라진다. function add(a,b){ return a+b; } // 선언문. 하지만, 다음 식은 변수에 선언문을 할당하는 것 처럼 보인다. let something = function add(a,b){ return a+b; } 위에서 정의한 함수를 호출하려면 ..
[JavaScript] 타입 변환 / 단축 평가
[JavaScript] 타입 변환 / 단축 평가
2022.03.08타입 변환 Integer.parse() / x.toString() 처럼 개발자가 명시적으로 타입 변환을 선언하는 경우도 있지만, 개발자의 의도와는 상관없이 표현식을 평가하는 중 가급적 에러 발생을 피하기 위해 엔진이 암묵적으로 타입을 변환하는 경우도 있다. 암묵적 타입 변환이 발생 시 원시 타입 중 하나로 타입이 자동으로 변환된다. 그 예시를 알아보자. 1 + '2' // 지난번에 언급했다. + 연산자는 피연산자가 문자열을 포함하면 concatenate를 수행한다. `1 + 1 = ${1 + 1}` // 표현식의 평가 결과가 문자열 타입으로 변환된다. 1 - '1' // + 외의 산술 연산자는 모두 숫자 타입으로 형변환을 진행한다. '1' > 0 // 비교 연산지는 bool값을 만든다. 피연산자를 숫자 ..