javascript(2)

juyeon10120·2022년 7월 3일
0

WEB

목록 보기
7/7
post-thumbnail

배열

배열형(Array Type)


인덱스 기반으로 값을 순서대로 삽입할 수 있는 특별한 객체 형태
인덱스 : 0 부터 시작하는 정수형 값

배열의 속성과 함수


  • length : 배열의 크기를 리턴
  • push() : 배열에 새로운 값을 추가
  • unshift() : 배열에 새로운 값을 0번 인덱스로 추가
  • pop() : 배열의 마지막 값을 리턴후 제거
  • shift() : 배열의 처음 값을 리턴하면서 제거

객체 자료형, 프로퍼티


프로퍼티 : 값이나 함수를 가질수 있다. (CSS 속성과 값)

객체 프로퍼티에 접귾거나 값을 저장하려면 . 기호를 사용한다.

var ob = {userName : "Dan" , age : 20};
// 새로운 객체타입 선언, 프로퍼티 없이 선언 가능

ob.userName 
// "Dan" , userName값에 접근

ob.age =10
// age 값을 10으로 변경

ob.online = true
// online 값을 true 로 지정, (새로 만든다.)

함수

함수 (function)


함수는 독립적인 실행 코드를 하나로 묶어 둔 것을 의미한다. 이렇게 코드들을 묶어서 작성하는 것을 정의(declarartion)라고 하고 정의된 함수는 호출(call)을 통해 실행할 수 있다.

  • 함수는 재사용을 위해 사용한다.
function 함수명 (매개변수) {
	실행코드
}

함수의 입출력


수학에서의 함수처럼 어떠한 식에 미지수를 값을 대입하면 y값을 알 수 있다.

프로그래밍에서도 한 개 이상의 입력과 단일 출력이 가능하다.

//함수 예약어     대입값
function 함수명 (매개변수) {
  //결과값
	실행코드
}

스코프

중괄호 => 블록


코드는 중괄호로 묶을 수 있는데, 이렇게 묶인 코드를 코드 블록이라고 한다.

{
	코드블록
}

함수 블록과 조건문/반복문등의 블록은 다른 성질의 블록
(함수 블록 내부에 선언된 변수는 함수 밖에서 사용이 블가능하다)

스코프


스코프는 변수를 선언할 때 그 변수를 어디서 접근 가능한지를 정의하는 영역을의미

  • 전역 스코프 (전역변수, global) : 블록 바깥에 그냥 선언된 변수

  • 지역 스코프 (지역변수, local) : 블록 내부에 선언된 변수

  • 블록 스코프 : 일반적인 블록 (조건문, 반복문 등)에 선언된 변수

  • 함수 스코프 : 함수 내부에 선언된 변수

스코프 범위


  • 전역 스코프에 선언된 변수
    => 모든 스코프에서 사용가능

  • 블록 스코프에 선언된 변수
    => var로 선언시 모든 스코프에서 사용가능
    => let로 선언시 선언된 블록 또는 중첩된 블록 내에서만 사용가능

  • 함수 스코프에 선언된 변수
    => 해당 함수 내에서만 사용 가능

HTML => JavaScript

자바스크립트의 작성 방식


  • 인라인 스타일 : html 태그에 이벤트 속성으로 직접 작성 (사용 안함)

  • 내부 스크립트 : script태그 내부에 작성

  • 외부 스크립트 : js파일에 작성후 script 태그로 임포트한다.

자바스크립트의 파일 로드


<body>
	//html code
	<script type="text/javascript" src="js파일 위치"></script>
</body>

웹 브라우저의 로드시 html코드를 먼저 로드하고 script파일을 로드하면 브라우저의 비어있는 화면의 시간이 줄어든다 그래서 관행적으로 js파일은 html코드 뒤에 붙여준다.

선택자로 DOM 가져오기

DOM


DOM (Document Object Model)

  • DOM은 자바스크립트 같은 프로그래밍 언어에서 HTML 문서의 정보들들 다룰 수 있게 해주는 프로그래밍 인터페이스이다.

변환 과정

  • HTML => DOM
    웹 브라우저에 의해 DOM으로 변환

  • DOM => javascript
    DOM 인터페이스로 자바스크립트에서 접근

html으로 작성된 화면 요소들을 웹 브라우저가 해석하고 프로그래밍 가능한 인터페이스로 제공하는 객체 모델을 의미한다.

  • html 태그로 작성된 요소들은 DOMobject로 표현한다.

  • 모든 요소들은 속성, 이벤트, 프로퍼티의 구성을 가진다.

  • html코드는 DOM 형태로 해석되어 CSS 적용, javascript와의 상호작용 등이 이루어진다.

DOM은 HTML파일의 구조를 계층적으로 표현한다.

DOM 주요 객체


  • document : HTML문서의 최상위 root 객체이고, html 문서 전체를 대변한다.
  • element : HTML document하위의 화면 요소 (html tag로 그려지는 요소들 등)을 의미한다. DOM에서는 계층적인 현태로 존재한다.

DOM 접근 함수


  • document.getElementById : 요소의 id 값으로 요소를 가져옴
  • document.getElementByTagName : 요소의 태그 종류로 요소들을 가지고온다.
  • document.getElementByClassName : 여소의 class 값 으로 요소들을 가지고 온다.

QuerySelector


  • document.querySelector(selector) : 선택자 문법으로 문서 내의 요소들을 가지고 온다.
    (CSS 스타일로 선택한다. Ex : # . 등등)

DOM객체 추가


DOM 객체를 생성해서 DOM 구조에 추가하면 화면에 표시된다.

  • document.createElement(tagName): 새로운 노드 객체를 생성한다.

  • (특정 element).appendChild(삽입할 DOM 노드 객체): 특정 DOM 객체 하위에 다른 DOM 객체를 삽입한다.

DOM객체 수정


DOM 접근 API를 사용해서 필요한 객체를 가져와서 innerHTML이나 Style 속성으로 객체를 수정할 수 있다.

  • element.innnerHTML : 요소 내부의 콘텐츠 값ㅇ데 접근하거나 지정할 수 있다.

  • element.style : 요소가 가지고 있는 style을 지정할 수 있다.
    // element.style.fontSize = '20px';
    (font-size X , fontSize O )

이벤트 처리

이벤트


DOM 기반의 요소들은 event를 감지해서 그 이벤트가 감지되었을 때 원하는 코드가 실행되도록 할 수 있다.

대표적인 이벤트 종류


많은 종류의 이벤트를 감지할 수 있게 DOM 차원에서 미리 정의되어 있다.

  • click : 해당 객체를 클릭시 발생
  • mousemove : 해당 객체 위에서 마우스를 이동했을 때 발생
  • keypress : 해당 객체가 선택된 상태에서 키보드 입력이 있을 * 때 발생
  • submit:form의 전송 버튼이 눌렸을 때 발생
  • load : 해당 객체가 화면에 로딩이 완료되어 화면에 표시될 때 발생

이벤트 리스너 등록


var element = document.getElementById("panels");
element.addEventListener("click", function () {
	alert("halo");
});

이미 선언된 함수를 이용할 수 있고 익명함수를 사용할 수 있다.

익명함수, 콜백함수


  • 익명함수 : 이름이 없는 함수, 함수블록만 정의해서 사용하는 함수이다.
  • 콜백함수 : 이벤트 리스너와 같이 특정 트리거가 발생했을 때 완료시점에 호출 받기 위한 함수 (매개변수로 전달하는 함수)
profile
HelloWorld!

0개의 댓글