본문 바로가기

자바스크립트9

[JS] 브라우저 객체 모델 BOM - 2 [JS] 브라우저 객체 모델 BOM - 2 2021/02/17 - [Javascript/Javascript정리] - [JS] 브라우저 객체 모델 BOM - 1 location 객체 location객체는 현재 브라우저에 표시된 HTML문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용한다. location객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL주소를 다양하게 해석하여 처리할 수 있다. href 페이지의 URL 전체 정보를 반환한다. URL을 지정하여 페이지 이동이 가능하다. location.href 의 형태로 작성한다. 1. document.write(location.href);와 같이 출력의 대상으로 작성한다면 해당 페이지의 정보를 반환한다. 2. location.href = ".. 2021. 2. 17.
[JS] 브라우저 객체 모델 BOM - 1 [JS] 브라우저 객체 모델 BOM 자바스크립트를 이용하여 브라우저 자체에 접근하는 방법을 알아본다. 목차 브라우저 객체 모델이란? window 객체 브라우저 객체 모델이란? 자바스크립트를 이용하면 HTML 태그에 대한 접근 뿐만이 아니라 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. 이 때 사용하는 객체 모델을 브라우저 객체 모델(BOM, Browser Object Model)이라고 한다. 브라우저의 종류는 익스플로러, 크롬, 파이어폭스 등 다양하다. 때문에 BOM은 DOM과 다르게 W3C의 표준 객체 모델이 아니다. 하지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. 이러한 BOM객체들을 전역 객체로 사용할 수 있다. window 객체 .. 2021. 2. 17.
이클립스에서 자바스크립트 자동완성 사용하기 이클립스에서 자바스크립트 자동완성 사용하기 ecripse IDE를 사용하며 웹 페이지를 만들면 기본적으로 자바스크립트 코드 자동완성이 되지 않는다. 이때는 따로 플러그인을 설치해야한다. 1. 플러그인 다운로드 https://github.com/angelozerr/tern.java/releases Releases · angelozerr/tern.java Use tern.js in Java context. Contribute to angelozerr/tern.java development by creating an account on GitHub. github.com 위 주소로 접속하여 tern.repository-1.2.1.zip 을 다운로드 받아준다. 2. 이클립스에 플러그인 추가하기 이클립스에서 Hel.. 2021. 2. 15.
[JS] 객체, 프로토타입, property [JS] 객체, property 자바스크립트에서 객체를 알아본다. 객체의 고유한 속성은 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다. 자바스크립트에서 객체는 타 언어(자바, 파이썬, C, 등)에 비해 자주 사용되지는 않는다. 추후에 배울 JSON타입의 데이터를 추출할 때 사용하거나, Ajax 통신으로 여러 개의 값을 서버에 전달할 때 {}로 묶어서 전달하는 방식으로 사용된다. 목차 자바스크립트 객체 생성방법 자바스크립트 객체 프로퍼티(property) 객체 접근방법 프로토타입 자바스크립트 객체의 유형 - 코어 객체 코어 객체 - Date타입 자바스크립트 객체 생성방법 자바스크립트에서 객체를 생성하는 방법은 변수를 선언할 때와 유사한 형태로 작성한다. var 객체명 = { .. 2021. 2. 13.
[JS] 함수 function [JS] 함수 function 자바스크립트의 함수 선언방법과 전역함수에 대해 알아본다. 목차 자바스크립트 함수 선언방법 자바스크립트의 전역함수 자바스크립트 함수 선언방법 자바스크립트에서 함수를 선언할 때에는 다음과 같이 작성한다. function 식별자(매개변수1, 매개변수2, ...){ 연산내용1; 연산내용2; 연산내용3; ... return 리턴값 [생략가능] } function키워드로 함수 선언을 알린다. 식별자를 작성한 후 매개변수를 작성한다. 소활호 () 내에서 매개변수를 작성하며, 콤마 , 로 매개변수를 구분한다. 생략 가능하다. 중괄호 {} 내에서 연산할 내용을 작성한다. return 키워드는 리턴값이 필요할 때 작성하지만, 리턴값이 필요하지 않을 때에는 생략 가능하다. See the Pen.. 2021. 2. 12.
[JS] 데이터타입, 변수, 상수 [JS] 데이터타입, 변수, 상수 자바스크립트가 처음이시라면 해당 글을 먼저 보시는 것을 추천합니다. 2021/02/10 - [Javascript/Javascript정리] - [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 자바스크립트 언어란? 자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립 heekng.tistory.com JAVA, C, Python처럼 Javascript도 데이터타입과, 변수, 상수 개념이 존재한다. 자바스크립트에서 변수, 상수의 선언방법, 데이터타입 구분방법 등을 알아본다. 목차 자바스크립트 식별.. 2021. 2. 12.
[JS] 자바스크립트로 본문에 코드 추가하기 [JS] 자바스크립트로 본문에 코드 추가하기 웹 페이지에서 사용자가 어떠한 행동을 했을 때, 본문에 원하는 콘텐츠를 추가해야 하는 경우가 있다. 이 때에는 DOM코드 중 write()와 writeln()을 이용한다. document.write(), document.writeln() 사용하기 document.write()와 document.writeln()은 해당 html문서의 body에 html스크립트를 추가한다. document.write("html코드");의 형태로 작성한다. write()와 writeln()의 차이는 줄넘김이 존재하는지 여부이다. 실제 작성한 코드를 보면 write, writeln 코드 테스트 See the Pen write, writeln by Heekng (@heekng) on .. 2021. 2. 11.
[JS] 다이얼로그 사용하기 [JS] 다이얼로그 사용하기 자바스크립트가 처음이시라면 해당 글을 먼저 보시는 것을 추천합니다. 2021/02/10 - [Javascript/Javascript정리] - [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 자바스크립트 언어란? 자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립 heekng.tistory.com HTML 웹페이지에서 사용자에게 값을 입력받는 방법에는 태그가 있다. 하지만 간단한 자바스크립트 코드를 이용해 별도의 창에서 값을 입력받거나, 확인, 경고창을 띄울 수 있다. prompt(), confi.. 2021. 2. 11.
[JS] Javascript 자바스크립트 기본 개념 [JS] Javascript 자바스크립트 기본 개념 자바스크립트 언어란? 자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 실행된다. 위와 같은 형태로 진행되어 컴퓨터는 내가 적은 코드 그대로를 읽는다. 웹 페이지에서 자바스크립트의 역할 웹 페이지는 HTML, CSS, Javascript(JS) 세 가지 언어가 결합되어 작성된다. HTML이 페이지의 구성을 담당하고, CSS가 웹 페이지의 디자인을 담당한다면 JS는 웹 페이지의 동적 제어를 담당한다. 예를 들어 버튼을 누르거나, 사용자 또는 내부적으로 어떠한 연산, 행위가 필요할 때 사용한다. 1. HTML의 form을 이용하여 입력 창을 제공하였다.. 2021. 2. 10.

티스토리툴바