[개발] 프로그램 지식

자바스크립트(js) 주요 정리 (1) / JavaScript (js) main summary

자바스크립트란?

: 웹 페이지를 동적으로, 프로그래밍적으로

제어하기 위해서 고안된 객체 기반의 스크립트 언어

출력하는 3가지 방법

document.write();

console.log();

alert();

prompt / comfirm

prompt ( "출력내용", "입력내용" )

confirm ( "출력문 작성" )

prompt 입력창 / 리턴타입 string

cofirm 확인/취소 창 - 리턴타입 boolean ( 확인-true / 취소-false )

var, let, const 차이점

var

- 변수 재선언, 재할당 가능

let

- 변수 재선언 불가능

- 변수 재할당 가능

const

- 변수 재선언, 재할등 불가능

자바스크립트 자료형

number

: 정수, 실수 등 산술 연산이 가능한 자료형

string

: 문자열로 이루어진 자료형

boolean

: 참/거짓으로 표현되는 논리 형태의 자료형

undefind

: 값이 할당된 적이 없거나 존재하지않는 속성일 때의 유형

null

: 아무런 값을 나타내지 않을 때의 자료형

자바스크립트 연산자

강제형변환

parseInt()

: 문자열을 숫자(정수)로 변경

parseFloat()

: 문자열을 숫자(실수)로 변경

Number()

: 다른 자료형을 숫자형(정수&실수)으로 변환

toString()

: 숫자를 문자열로 변경

스크립트 실행위치가 외부인 이유

1. 관리가 편리하다.

2. 소스를 숨길 수 있다.

3. 재사용할 수 있다.

자바스크립트 배열 vs 자바의 배열

자바스크립트 배열 특징

1) 자바스크립트 배열은 크기가 가변적이다.

2) 자바스크립트 배열은

자료형을 구분하지 않는다.

3) 배열의 인덱스는 0부터 시작한다.

자바스크립트 배열 선언 방식

let 변수명 = [];

let 변수명 = new Array();

배열에 새로운 데이터 추가하는 방법

.push();

.push("추가할 데이터");

: 자동으로 기존에 있던 데이터 다음으로

추가됨

배열에 있는 데이터 슬라이싱하는 방법

.slice( , );

컴마기준 이상 - 미만

.slice( 첫값 , 끝값 );

첫값 포함 / 끝값 미만

배열에 있는 데이터 슬라이싱 한 후

반환하고 없애는 방법

.splice( 시작지점 , 개수 );

splice

( 기준, 기준을 기점으로 몇개 뽑아낼지 개수 지정 )

( 시작지점, 개수 )

splice = slice + pop 느낌

배열의 길이 확인

.length

배열의 길이 = 데이터 개수

자바스크립트 함수 사용법 및 주요 특징 (유지보수 용이)

function 함수명 () {

로직 & 기능구현을 위한 코드 작성

}

함수명 (); // 함수호출

- 어떠한 실행코드를 묶어서 실행하기 위함

- 중복되는 코드 최소화

- 실행코드 블록화 => 코드조각화

자바스크립트 함수의 특징***

(자바함수에 비해 자유로운 느낌)

1. 데이터타입을 검사하지 않는다.

2. 매개변수와 입력값의 개수가 같은지

확인하지 않는다. ********

---> 내부적으로 arguments 객체가 호출

---> 배열형태로 저장

3. 매개변수의 개수보다 입력값의 개수가 더 적으면

undefined 자료형으로 매개변수가 들어간다.

객체의 기본구조

* 1번 형태

let 객체명 = {

속성명1 : 값1,

속성명2 : 값2,

속성명3 : 함수() {

}

};

* 2번 형태

let 객체명 = 함수() {

}

- 객체는 property(속성)과 method(기능)으로 구성

- 객체 내에는 기본데이터타입, Array, Object 등 데이터를 담을 수 있음

- 객체 내 데이터를 접근하는 방법은 마침표(.) 이용

DOM documnet object model

도큐먼ㅌ 오브젝트 모델

: html문서의 요소를 효과적으로 다루기 위하여

모든 요소를 분리하고 상하관계를 설정한 후

배치한 구조

htmlelement / HTMLElement

: 모든 종류의 html요소를 나타내는 인터페이스

( getElement 메소드를 통해서 원하는 객체를 조회

조회된 객체들을 대상으로 구체적인 작업 처리 )

css 선택자 이용

>>>>>>>> querySelect / querySeletorAll

querySelect ( selector )

: css 선택자를 이용하여 '하나의 요소'를 검색

(여러개인 경우 맨 첫번째 반환)

querySelect ( selector )

: css 선택자를 이용하여 '모든' 요소를 검색

element 요소 접근

getElementById (id) < 매개변수에 #을 붙여줄 필요 없음

: 특정 아이디를 가진 요소 조회 / 중복불가

getElementsByName (name)

: Name 속성을 가진 요소 조회

getElementsByTagName (tagname)

: 태그 이름을 기준으로 요소 조회

getElementsByClassName (class)

: 특정 클래스를 가진 요소 조회

innerHTML

: 태그 내에 새로운 요소객체나

내용을 저장하거나 가져올 때 사용

.innerHTML

>> HTML에 안에 적용시키겠다.

input - value

: input 태그의 value 값을

저장하거나 가져올 때 사용

(여기서 value란 input에 사용자가 입력한

값을 의미하는 듯 )

getElemnetsByTagname()

: 접근하고자 하는 HTML 태그의 이름을 이용하여

HTMLCollection 객체 조회

querySelector는 딱 한개의 요소만 반환하기때문에

위와같은 상황에서 쓰이기엔 부적절함

우리가 원하는 건 4개의 li태그에 있는 모든 값이기

때문에 이러한 복수의 데이터를 받을 수 있는

getElementsByTagName을 사용해서

값을 가져온다.

저작자표시

'[개발] 프로그램 지식' 카테고리의 다른 글

[ORACLE] timestamp, 데이터 실수로 지웠을때!, 오라클 데이터 복구 방법 (0)	2023.07.21
[dbeaver] 데이터 엑셀로 가져오기, 붙여넣기, 내보내기, 추출, import ( 데이터 깨질때 유용 ) (0)	2023.07.21
HTML 기초 지식 정리 / HTML basic knowledge summary (0)	2023.02.11
CSS 기초 지식 정리 / A summary of CSS basic concepts (0)	2023.02.11
JSP 기초 정리 (2) / Summary of JSP basic concepts (0)	2023.02.11

Contents

새소식

인기 검색어

자바스크립트(js) 주요 정리 (1) / JavaScript (js) main summary

'[개발] 프로그램 지식' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바