본문 바로가기

JavaScript

JavaScript 2022. 11. 7. [javaScript] 이벤트 이벤트란? 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 이벤트가 발생하면 그에 맞는 반응을 하여야 하므로 이벤트는 일반적으로 함수에 연결 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 지정된 event target(html 요소)에 지정된 event type(클릭이나 스크롤 등)이 발생하면 지정된 event handler(함수)가 실행된다. 이벤트 종류 1) 마우스 이벤트 이벤트 설명 click 요소에 마우스를 클릭했을 때 이벤트가 발생 dbclick 요소에 마우스를 더블클릭했을 때 이벤트가 발생 mouseover 요소에 마우스를 오버했을 때 이벤트가 발생 mouseout 요소에 마우스를 아웃했을 때 이..
JavaScript 2022. 11. 1. [jQuery] jQuery선택자 기본 선택자 선택자 예제 설명 * $("*") 모든 요소를 선택 .class $(".class") 지정한 클래스를 가지는 모든 요소를 선택 element $("element") 지정된 태그명을 가지는 모든 요소를 선택 #id $("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택 , $("selector1, selecotr2") 모든 지정한 선택자들의 결과들을 결합하여 선택 ID1 ID2 *태그선택자 해당 태그 요소를 전부다 가져오고자 할 때 사용 Java Oracle JDBC HTML CSS JavaScript 클래스선택자 특정 클래스 속성값을 가진 요소들을 선택하고자 할 때 사용 Class1 Class2 Class3 속성 선택자 (Attribute) 선택자 예제 설명 [attribute|='v..
JavaScript 2022. 10. 31. [JavaScript] 객체2: 객체의 메소드 참조/ 객체내 속성호출(this) in, with / toString메소드 객체의 메소드 참조 객체의 속성중 함수자료형인 속성을 메소드라고 부름 (객체 내부에 존재하는 함수를 메소드라 부름) 객체의 메소드를 참조하는 방법 : 객체이름.메소드이름() 메소드를 참조할 때 메소드 이름 뒤에 괄호(())를 붙이지 않으면, 메소드가 아닌 프로퍼티 그 자체를 참조하게 됨 .따라서 괄호를 사용하지 않고 프로퍼티 그 자체를 참조하게 되면 해당 메소드의 정의 그 자체가 반환 같은 객체 내 속성 호출 함수 실행코드 중 같은 객체 내 속성 호출시 경우 this.을 앞에 붙여야함 ==> 만약 속성명과 변수명이 동일한 경우 this.를 붙이지 않으면 변수가 호출됨 실행확인 *** 속성의 속성값으로 일반 값(연산식)이 아닌 함수를 대입하는 이유: 일반 연산식을 속성값으로 대입하게 되면, 클래스 내 { ..
JavaScript 2022. 10. 26. [JavaScript] 객체1: 객체란 / 프로퍼티, 메소드/ 반복문 자바스크립트 객체 - 자바스크립트의 기본 타입(data type) - key(속성) + value(속성값) 한쌍으로 값을 저장할 수 있는 구조 ==> 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합 - 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터타입 - 프로퍼티(속성)의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티(속성)를 메소드(method)라 칭함 - number, string, boolean, undefined 타입 제외한 모든 타입은 객체 - but.. 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가짐 - 객체는 중괄호{}를 이용하여 생성, 중괄호 내에 객체에 필요로 하는 속성(pro..
JavaScript 2022. 10. 25. [JavaScript] 함수 자바스크립트 함수 자바스크립트에서는 함수도 하나의 타입(datatype) 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있음 함수의 정의 function 함수명(매개변수, 매개변수, 매개변수...) { 해당 함수 호출시 실행할 코드; return 결과값; } - 매개변수 변수타입 지정 X (자바스크립트가 알아서 인식함) - 자료형에 상관없이 매개변수 갯수만 일치하면 실행에 문제가 없다 - 매개변수, return결과값은 생략가능​ - 정의해둔 매개변수 수보다 매개변수를 적게 전달시 실행에는 문제가 없음 단, 전달받지 못한 매개변수 자리는 출력시 undefined로 메꿔짐 - 정의해둔 매개변수 수보다 매개변수를 많이 전달시 실..
JavaScript 2022. 10. 25. [JavaScript] 배열 배열 자바스크립트에서는 변수선언시 별도의 자료형을 지정하지 않기때문에배열 역시 변수형 var,let,const로 선언자료형에 관계없이 하나의 배열에 담을 수 있다 (자바의 컬렉션과 유사) 배열 선언시 배열의 크기를 지정한 채로 선언한거나, 별도 지정없이 선언 가능 (배열 크기 제약없음-->collection의 장점) 배열 초기화시 지정한 크기를 초과한 인덱스에 값을 대입하면, 해당 인덱스에 값이 대입되는 순간 배열의 크기가 해당 인덱스(+1)의 크기만큼 증가 확인하기 배열의 선언 및 값 대입 배열.reverse(): 원본배열 영향o 확인 배열.sort(): 배열에 담긴 값들을 오름차순 정렬 메소드 확인 push(추가할 요소): 배열 맨 뒤에 요소를 추가하고 추가 후 배열크기를 반환/ list의 add랑 ..
[JavaScript] BOM/ DOM (window객체, document객체)
JavaScript 2022. 10. 25. [JavaScript] BOM/ DOM (window객체, document객체) JavaScript에서의 객체 JavaScript는 객체기반의 스크립트 언어이며, JavaScript 코드는 대부분 객체로 구성되어 있음. 웹브라우저의 구성요소들은 하나하나 객체화 되어있으며, JavaScript는 객체들을 제어하여 웹브라우저를 제어함 종류 설명 기본내장객체 (Built-in Object) 기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체 JS엔진이 구동되는 시점 바로 제공 Global / Object / String / Number/ Boolean /Date/ Array/ Math 브라우저 내장객체 (Native Object) BOM (Browser Object Model) 브라우저객체 모델, 브라우저 관련 객체 DOM (Document Object Model) DOM은 BOM에 ..
[JavaScript] 변수 / 자료형
JavaScript 2022. 10. 25. [JavaScript] 변수 / 자료형 1. JavaScript 변수 var / let / const 변수명 특징 var 함수내 동일변수 중복선언 가능, 재할당 가능 var는 자유롭게 변수선언, 사용 가능하다는 장점 그러나 중복변수 남발 / 의도치않은 값의 변경 발생가능 let 중복선언 불가(동일식별자 사용불가), 재할당 가능 const 중복선언 불가, 재할당 불가(자바의 상수) 2. var,let,const의 차이점 변수 스코프 재선언 가능여부 재할당 가능여부 var 함수 스코프 가능 가능 let 블록 스코프 불가능 가능 const 블록 스코프 불가능 불가능 1) var : 함수내 동일변수 중복선언 가능, 재할당 가능 function defDeclare(){ var userId = 'user01'; console.log(userId); va..
JavaScript 2022. 10. 25. [JavaScript] 스크립트언어/ 자바스크립트 개념 / 장단점 / 소스코드 작성방식 1. Script Language(스크립트 언어) 1) 스크립트 언어란? 다른 응용소프트웨어에 삽입되어 동작하며, 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어 스크립트 언어는 응용 프로그램과 독립하여 사용되고 일반적으로 응용 프로그램의 언어와 다른 언어로 사용되어 최종사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해줌 2) 비 스크립트언어와의 차이 비(非)스크립트 언어 - 컴파일(Compile) 된 후 독립적으로 작동하는 하나의 완전한 응용 프로그램 - 작성한 소스를 컴파일러를 통해 기계어코드로 변경하는 과정을 거쳐야만 실행가능한 파일이 얻어짐 - 실행 속도가 빠름, 컴파일 과정을 거쳐야하므로 개발 과정이 복잡함 - C, C++, Java 등 스크립트 언어: - 다른 응용 ..

티스토리툴바