※ 표 컬러 코드 = #b3f2df

span 회색배경 = <span style="background-color: #eee; padding:3px; border-radius: 1px;">

li 흰색스타일 = <li style="list-style-type: circle; text-indent: 10px;">

코드 배경 = https://colorscripter.com/

인용구 = <blockquote>

Javascript는 HTMl 소스코드에 포함되는 형태로 작성된다.

HTML 소스코드에 포함시키기

다음의 코드를 HTML 소스코드 안에 명시. 일반적으로 <head>~</head>에 위치한다.

<script [type="text/javascript"]>
    ... javascript 구문 ...
</script>

외부 파일에 대한 참조를 포함시키기

<script> 태그를 제외한 javascript 구문만 *.js 로 저장된 별도의 파일로 분리하고 <script> 태그의 src 속성으로 분리된 파일의 경로를 참조시킨다.

<script [type="text/javascript"] src="*.js파일의 경로"></script>

결과를 출력시키는 방법

화면에 메시지 박스 형태로 표시하기

alert(내용)

브라우저의 개발자도구 내에 포함된 콘솔을 통한 출력

console.log(내용)

변수

데이터를 저장하기 위한 키워드. 변수를 사용하기 위해서는 선언과 할당의 과정이 필요하다.

var 변수이름; // 변수의 선언
변수이름 = 값; // 선언된 변수에 값 할당

선언과 할당을 결합한 형태.

var 변수이름 = 값;

변수의 이름은 영어+숫자+언더바의 조합으로 구성한다.
띄어쓰기가 필요한 경우 언더바를 사용하거나 첫 글자를 대문자로 표현.
값의 할당은 오른쪽에서 왼쪽으로만 가능.
저장 가능한 값의 종류
Boolean : 논리값, 참(true) / 거짓(false)
Number : 정수(integer), 실수(double)값
String : 문자열(문장). 쌍따옴표나 홑따옴표로 감싸서 표현
Null : 값이 확정되기 이전에 임의로 비워둔 형태
undefined : 값이 할당되지 않은 상태.
Object : 객체(이후 살펴봄)

연산자

사칙연산

기본적인 +, -, *, /(몫), %(나머지)
곱하기, 나누기가 더하기 빼기보다 우선함.
괄호()로 묶은 부분이 최 우선 처리됨.
더해지는 값에 문자열이 포함되어 있는 경우 모두 하나의 문장으로 결합된다.

var a = "가나다";
var b = 123;
var c = a+b; // "가나다1

단항연산

연산 결과를 변수 스스로에게 다시 적용할 경우의 단축표현.
모든 사칙연산자에 대해서 표현 가능함.

var a = 100;
a = a + 10; // a가 10증가됨.
a += 10; // 같은 표현.

증감연산

단항연산에서 사용되는 값이 1이고 덧셈과 뺄셈의 경우만 축약 가능함.

var a = 100;
a++;
++a;
a--;
--a;

다른 연산식에 포함될 경우 증감연산자의 위치에 따라서 계산되는 시점이 다르다.

var a = 1;

// (뒷북) 100+1을 먼저 수행해서 y값을 확정. 그 후 a가 증가함.

y = 100 + a++;

// (앞북) a가 먼저 1증가하고 100+2가 수행되서 y갑승ㄹ 확정

y = 100 + ++a;

비교연산

일반적인 부등식
같다: ==
다르다: !=
크다(초과): >
크거나 같다(이상): >=
작다(미만): <
작거나 같다(이하) <=
부등식의 결과는 참(true), 혹은 거짓(false)이 된다.

var a = 100 < 1000; //true

var b = 50 >= 1000; //false

논리연산

참과 거짓을 and(&&), or(||)로 비교하여 결과를 도출
&& : 모든값이 참인 경우만 결과가 참.
|| : 하나라도 참이면 결과가 참.

프로그램의 흐름제어(1)

조건문

if문

괄호 안에 주어진 조건이 참인 경우 블록{}안을 수행.

if (조건) {
    // ... 조건이 참인 경우 실행할 명령 ...
}

조건에 명시할 수 있는 형식

1. 비교식 (==, !=, >, >=, <, <=)

2. 논리식 (&&, ||)

3. 논리값(true, false)

if ~ else문

조건이 참인 경우 if블록이 실행, 그렇지 않은 경우 else 블록이 실행

if (조건) {
    // ... 조건이 참인 경우 실행할 명령 ...
} else {
    // ... 조건이 참이 아닌 경우 실행할 명령 ...
}

if ~ else if ~ else 문

여러개의 조건을 나열하여 그 중 가장 처음 만나는 참인 조건의 블록을 수행함. 그외의 블록은 실행하지 않고 빠져 나간다.

if (1차 조건) {
    ...
} else if (2차 조건) {
    ...
} else if (3차 조건) {
    ...
} else {
    ...
}

switch 문

하나의 변수값에 대한 여러가지 경우의 수를 나열하고 그 중 참인 경우를 실행함.

switch (변수) {
    case "값1" :    // 경우의 수는 필요한 만큼 ㅏ열
        ...
        break;
    case "값2" :
        ...
        break;
    case "값n" :
        ...
        break;
    default:        // 일치하는 경우가 없을 경우 수행할 블록(생략가능)
        ...
        break;
}

반복문

for문

for( 초기식; 조건식; 증감식 ) {
    ... 반복 수행할 명령 ...
}

1. 초기식을 수행

2. 조건식을 판별

참인 경우 {}안을 수행
거짓인 경우 {}을 빠져 나감

3. 참인 경우 {}을 수행하고 증감식으로 이동.

4. 증감식을 수행 후 다시 조건식으로 이동.

2번부터 반복.

while문

동작 방식은 for문과 동일

초기식;
while (조건식) {
    ... 반복 수행할 ㅕㅇ령 ...
    증감식;
}

흐름제어 구문의 중첩사용

블록{}을 구성하는 구문들은 서로 중첩하여 사용할 수 있음.

if - if

if (조건) {
    if (조건) {
        ...
    } else {
        ...
    }
} else {
    if (조건) {
        ...
    } else {
        ...
    }
}

for - if

매 반복 수행시 마다 if문의 조건을 검사함.

for (초기식; 조건식; 증감식) {
    if (조건) {
        ...
    } else {
        ...
    }
}

for - for

바깥의 반복문이 1회 수행하는 동안 안쪽의 반복문 전체가 매번 새로 시작함. ex) 구구단.
일반적으로 바깥의 반복문이 행을 표현하고 안쪽의 반복문이 열을 표현함. (행렬)

for (초기식; 조건식; 증감식) {
    for (초기식; 조건식; 증감식) {
        ...
    }
}

함수

재사용 가능한 프로그램 명령어의 집함.

function 함수이름(파라미터n) {
    ... 명령어 ...
    [return [값]];
}

파라미터는 함수가 실행되기 위해 주어지는 조건값.
파라미터를 명시할 경우 필요한 만큼 콤마로 구분하여 변수를 선언.
return은 함수가 호출된 위치에 결과값을 돌려주기 위한 키워드
값(변수)을 명시하지 않을 경우 undefined가 리턴됨.
함수의 실행 도중, 특정 조건이 충족되어 return을 중간에서 만날 경우 함수는 그 즉시 실행을 중단한다.
하나의 함수 안에서는 다른 함수를 호출할 수 있다.

function foo() {
    ... 명령어 ...
    return 1;
}
 
function bar() {
    var a = foo();
    return a+1;
}

내장함수

자주 사용되어지는 공통 기능들에 대하여 미리 구현되어진 함수. 웹 브라우저에 미리 내장되어 있으므로 개발자는 함수의 정의없이 함수를 호출하고 적절한 리턴값을 받아 활용할 수 있다.

문자열에 대한 숫자, 수식 변환

Number eval(string)

주어진 수식 형태의 문자열을 실제로 계산된 결과값을 리턴한다.

Number Number(string)

주어진 숫자 형태의 문자열을 Number타입의 값으로 변환하여 리턴한다. 정수와 실수를 모두 지원한다.

Number parseInt(string)

주어진 숫자 형태의 문자열을 Number 타입의 값으로 변환하여 리턴한다. 정수만 지원한다.
문자열이 실수 형태인 경우 소수점 아래 부분은 잘라낸다.

참고 : 주어진 문자열을 무조건 실수 형태로만 리턴하는 함수는 parseFloat(string) 이다. 예를 들어 파라미터로 "1"이 전달될 경우 1.0이 리턴된다.

NaN (Not a Number)

Number 형식으로 변환할 수 없는 값을 Number 함수나 parseInt 함수로 변환하려고 한 경우 리턴되는 값.

전염성이 매우 강해서 한번 NaN으로 결정된 값에는 어떤 수를 연산시키건 결과가 NaN이 된다.

var k = parseInt("hello"); // <-- k = NaN;

var c = k + 100; // <-- c = NaN + 100 = NaN

문자열과 결함할 경우 서로 연결된다.

var k = parseInt("hello"); // <-- k = NaN;

var c = k + "world"; // <-- c = NaN + "world" = "NaNworld"

NaN 여부를 검사하기

boolean isNaN(string)

Number 함수나 parseInt 함수를 사용하기 전, 파라미터로 전달되는 문자열이 Number 형식으로 변환 가능한지의 여부를 판단하는 함수

var a = isNaN("hello"); // true (NaN이 맞음)

var b = isNaN("123"); // false (NaN이 아님)

값이 숫자 형식인 경우 true, 숫자형식이 아닌 경우 false를 얻기 위해서는 isNaN 함수의 리턴값을 !를 사용하여 부정해야 한다.

var a = isNaN("hello"); // true (NaN)이 맞음)

a = !a; // true를 부정하였으므로 false가 됨

일반적으로 위 결과는 다음과 같이 축약해서 사용한다.

var a = !isNaN("hello"); // false (숫자가 아님)

메시지 박스 관련 함수

void alert(string)

확인버튼을 갖는 알림 메시지 박스를 표시한다.
파라미터 : 메시지 박스에 표시될 내용

boolean confirm(string)

확인, 취소버튼을 갖는 확인 메시지 박스를 표시한다.
파라미터 : 메시지 박스에 표시될 내용
사용자가 긍정의 버튼을 클릭한 경우 true, 부정의 버튼을 클릭한 경우 false가 리턴된다.

string prompt(string msg, string def)

입력필드를 갖는 메시지 박스를 표시한다.
파라미터
msg : 메시지 박스에 표시될 내용
def : 입력필드에 설정될 기본값 (필요 없는 경우 빈문자열 ""을 지정)
리턴값
입력하지 않고 확인을 누른 경우 : ""
취소를 누른 경우 : null
정상적인 값을 입력한 경우 : 입력한 내용

이벤트

이벤트란 사용자가 웹 페이지에서 행하는 어떠한 행위나 웹 페이지가 겪는 일련의 사건을 의미.
행위 : 클릭, 마우스 이동, 드래그 등
사건 : 로딩완료, 다른 페이지로 이동
이벤트가 발생했을 때, 호출될 함수를 정의하고 연결하는 과정을 이벤트 처리라고 한다.

대표적인 이벤트 종류

이벤트 이름	설명
onClick	어떤 요소를 클릭한 경우
onMouseOver	어떤 요소 위에 마우스 커서가 올라가 있는 경우
onMouseOut	어떤 요소 위에서 마우스 커서가 벗어난 경우
onLoad	(body 태그에 적용하여) 페이지의 로딩이 완료된 직후

이벤트 사용 방법

javascript 함수를 미리 정의해 두고 HTMl 태그의 속성형태로 이벤트 이름을 명시한 다음

함수의 호출구문을 속성에 대한 값으로 지정한다.

function foo() {
    alert("Hello World");
}

<!-- <태그이름 이벤트이름="함수호출"> -->
<input type="button" value="click" onclick="foo()" />

Javascript 구문 특성

Javascript는 <script> 태그가 서로 분리되어 있어도 실행시에는 하나로 병합되어 동작한다.

<html>
<head>
    <script> var a = 10; </script>
</head>
<body>
    <script> var b = 20; </script>
        ...
    <script> var c = a+b; </script>
</body>
</html>

소스코드 실행 시점

HTML파일을 한 라인씩 해석하는 브라우저의 특성상 소스코드의 위치에 따라서 실행시점이 결정되므로

HTML 태그를 제어하고자 하는 경우 제어하려는 HTML 태그보다 소스코드가 나중에 명시되어야 한다.

case1-<body>태그 닫기 직전에 스크립트 코드 명시

<body>
    <div id="foo">...</div>
    <script>
        document.getElementById("foo").innerHTML = "hello";
    </script>
</body>

case2-<head> 태그에 스크립트 코드가 함수 단위로 정의되는 경우

onload 이벤트를 통해서 해당 함수를 호출시킨다. <-- 브라우저가 HTML태그 전체를 인식할 때 까지 스크립트 실행을 기다려야 하기 때문.

<head>
    <script>
        function foo() { ... }
    </script>
</head>
<body onload="foo()">
    ...
</body>

HTML 태그의 id속성값 중복 금지!!!!

CSS에서는 id값이 중복될 경우 여러 요소에 대하여 동시에 적용이 가능하지만,

JS의 경우는 id속성이 중복될 경우 그 중에서 가장 첫 번째 요소만 인식하고 그 외의 요소들은 식별하지 못한다.

그러므로 HTML에서 id속성은 반드시 고유한 값을 사용해야 한다.

<head>
    <style>
        /** 모든 id="hello"에 적용됨 */
        #hello { color: red; }
    </style>
    <script>
        function foo() {
            // 첫 번째 요소에만 적용됨
            document.getElementById("hello").innerHTML = "hello";
        }
    </script>
</head>
<body onload="foo()">
    <div id="hello">...</div>
    <div id="hello">...</div>
    <div id="hello">...</div>
</body>

[Tip] CSS에서는 클래스 속성만 사용하고, JS에서는 id속성만을 사용한다.

함수 정의의 또 다른 방법

함수는 변수와 동급이다. 즉, 변수에 함수가 대입될 수 있다.

function hello() {
    alert("안녕하세요.");
}
 
var world = hello; // 변수에 함수를 대입한다.
world();          // 함수가 대입된 변수는 그 자체가 함수가 된다.

위의 형태는 다음과 같이 축약 표현이 가능하다.

var world = function() {
    alert("안녕하세요.");
};
 
world();

객체

하나의 변수 안에 또 다른 변수들과 함수들을 기능의 성격에 따라 하나의 그룹으로 묶어서 포함시켜 놓은 형태.

객체는 웹페이지에보여지는 모든 것이 될 수 있다.
HTML 태그가 JS에서는 객체로 인식될 수 있다.
(var tag = document.getElementById("id값"); tag.innerHTML = "~~~";)
즉, HTML 태그 안에는 변수와 함수가 내장되어 있다는 의미가 된다.
객체 안에 포함된 변수를 프로퍼티 혹은 멤버변수라고 한다.
객체 안에 포함된 함수를 메서드라고 한다.
메서드 안에서 같은 객체 내의 프로퍼티나 다른 메서드에 접근하기 위해서는 this키워드를 사용한다.

// 비어 있는 임의의 변수 = 객체
var foo = {};
 
// 프로퍼티 정의
foo.num1 = 100;
foo.num2 = 200;
 
// 메서드 정의
foo.sum = function() {
    return this.num1 + this.num2;
}
 
// 객체 내의 메서드 호출
var result = foo.sum(); // 300이 리턴된다.
cs

내장객체

웹 페이지 제작에 필요한 기본 기능들이 정의되어 있는 객체.

브라우저에 내장되어 있기 때문에 개발자는 별도의 객체 정의 과정을 생략하고

내장객체에 포함된 프로퍼티와 함수들의 기능을 파악하여 활용할 수 있다.

String

문자열 데이터는 그 자체가 하나의 객체가 된다.

var name = "Javascript";

var word_count = name.length;

length : 문자열의 길이(글자수)를 조회할 수 있는 프로퍼티

string charAt(int position)

position 번째의 글자를 리턴한다.

int indexof(string search [, int position])

문자열에서 search가 처음 나타나는 위치를 리턴한다.
position은 검색을 시작할 위치
search를 찾지 못한 경우 -1을 리턴한다.

int lastIndexof(string search [, int position])

문자열에서 search가 마지막으로 나타나는 위치를 리턴한다.
문자열의 탐색은 뒤에서 부터 진행되지만, 검색된 내용으 ㅣ위치는 처음부터 카운트.
position은 검색을 시작할 위치
search를 찾지 못한 경우 -1을 리턴한다.

string substring(int start, int end)

문자열의 start번째 글자부터 end의 위치까지 잘라낸 값을 리턴한다.

string toUpperCase()

문자열에서 영어를 모두 대문자로 변환하여 리턴한다.

string toLowerCase()

문자열에서 영어를 모두 소문자로 변환하여 리턴한다.

Array(배열)

같은 종류의 변수를 캐비넷 같은 공간에 그룹화 한 형태

배열의 생성

var data = new Array("a", "b", "c"):
// 혹은
var data = ["a", "b", "c"]; // <-- 이 방법 권장

배열의 특성

생성된 배열은 0부터 순차적으로 증가하는 index값을 갖는다.
이 특성때문에 배열은 일반적으로 반복문과 함께 사용된다.
데이터의 접근은 index를 통해서 이루어진다.
ex) 값을 읽기 : var a = data[0];
ex) 값을 저장하기 : data[1] = 100;

배열의 길이

모든 배열은 그 자체가 하나의 객체가 된다.
배열 객체가 갖는 프로퍼티 중 length는 배열의 길이(칸수)를 조회하는 기능을 갖는다.

var data = ["a", "b", "c"];
var count = data.length;

배열의 확장

배열은 항상 처음부터 데이터를 갖는 상태로 생성할 필요는 없다.
데이터가 저장되지 않은 상태의 빈 배열을 생성한 후, 순차적으로 index를 증가시키면서 값을 추가할 수 있다.

// 빈 배열 만들기

var data = [];

// 배열의 확장

data[0] = 100;

data[1] = 200;

data[2] = 300;

// 값이 저장되지 않은 3, 4번째 위치는 undefined가 저장됨.

data[5] = 400;

2차 배열

하나의 배열에서 각 원소가 또 다른 배열로 구성된 경우

var data = new Array(

new Array("a", "b", "c"),

new Array("d", "e", "f")

);

// 혹은

var data = [["a", "b", "c"], ["d", "e", "f"]];

배열의 데이터는 행, 열 형태로 구성된다.
행: 1차 데이터
열: 2차 데이터
ex) 위의 예시에서 data[1][2]는 f
2중 반복문으로 배열을 탐색할 경우 바깥의 반복문이 행을 처리하고 안쪽의 반복문이 열을 처리한다.

Math 내장객체

수학과 관련된 기능을 제공한다.

int abs(int param)

param의 절대값을 리턴한다.

int max(int a, int b)

a와 b중에서 큰 값을 리턴한다.

int min(int a , int b)

a와 b중에서 작은 값을 리턴한다.

int round(Number num)

num을 소수점 첫째 자리에서 반올림한 결과를 리턴한다.

int floor(Number num)

소수점 이하 값을 버린다.

int ceil(Number num)

소수점 이하 값을 올린다.

랜덤값 얻기

Math.random() 함수는 0에서 1사이의 난수를 발생시켜 리턴한다.

실수 형태로 리턴되는 값은 범위를 조절하기 쉽지 않기 때문에

다음과 같이 함수를 정의하여 사용해야 한다.

function random(n1, n2) {
return parseInt(Math.random() * (n2 - n1 + 1)) + n1;
}

Date 내장 객체

객체 생성 방법

// 시스템의 현재 시각
var date1 = new Date();
// 2017년 12월 24일 -> 월은 0부터 카운트된다.
var date2 = new Date(2017,11,24);

객체의 메서드

getter : 프로퍼티(멤버변수)의 값을 리턴하기 위한 함수.
이름이 get변수이름()의 형식을 갖는다.
setter : 파라미터를 통해 프로퍼티의 값을 변경하기 위한 함수.
이름이 set변수이름()의 형식을 갖는다.

구분	조회(getter)	설정(setter)
년도	int getFullYear()	void setFullYear(int)
월	int getMonth()	void setMonth(int)
일	int getDate()	void setDate(int)
요일	int getDay()	void setDay(int)
시	int getHours()	void setHours(int)
분	int getMinutes()	void setMinutes(int)
초	int getSeconds()	void setSeconds(int)
타임스태프	int getTime()	void setTime(int)

타임스태프

1970년 1월 1일 자정부터 지금까지 흐른 초를 1/1000단위로 표현한 값.

두 날짜 사이의 차이 구하기

두 개의 timestamp값중 큰 값과 작은 값의 차를 단위의 기준값으로 나눌 경우 날짜 계산이 가능함.

지난 날짜를 처리하는 경우 : 소수점 아래 버림

Math.floor()함수 사용

다가올 날짜를 계산하는 경우 : 소수점 아래를 올림

Math.ceil()함수 사용

콜백함수

Javascript의 함수 파라미터 중에는 다른 함수를 전달하는 경우 이 때 파라미터로 전달되는 함수를 콜백함수라고 한다.

function hello() {
    ... 함수 내용 ...
}
 
function use_callback(a, b, callback) {
    var c = a + b;
    callback();
}
 
// 다른 함수를 파라미터로 전달
use_callback(100, 200, hello);

다음과 같이 축약한 형태로도 사용 가능

function use_callback(a, b, callback) {
    var c = a + b;
    callback();
}
 
// 다른 함수를 파라미터로 전달
use_callback(100, 200, function() {
    ... 함수 내용 ...
});

타이머 처리

지정된 시간(1/1000초 단위)마다 한 번씩 콜백함수를 반복 호출

setInterval(function() {
    ... 구현내용 ...
}, 시간);

지정된 시간(1/1000초 단위)만큼 딜레이 후 콜백함수를 1회 호출

setTimeout(function() {
    ... 구현내용 ...
}, 시간);

window 내장 객체

브라우저의 새창 팝업 열기 / 닫기 기능 제공

a.html을 새 창(새 탭)으로 열기

window.open("a.html");

a.html을 팝업으로 열기

// window.open("url", "창이름", "옵션);
window.open("a.html", "mywin", "width=500, height=300, scrollbars=no, toolbar=no, menubar=no, status=no, location=no");

창 이름
부여하지 않을 경우 매번 새 팝업창이 생성됨
부여할 경우 한번 사용한 팝업창을 재사용함
옵션
창 크기 관련 : width, height
창의 가로, 세로 크기를 정수로 지정
창 모양 관련 : scrollbars, toolbar, menubar, status, location
yes / no로 값을 지정
location의 경우 피싱 사이트 방지를 위해서 동작하지 않음.

현재 창 닫기

window.close();
// 혹은
self.close();

URL 제어하기

브라우저의 현재 URL 조회

var now_url = location.href;

브라우저의 현재 페이지를 지정된 URL로 이동

location.href = "url"

현재 페이지를 새로고침
location.reload();

웹 브라우저 history의 이전 페이지로 이동

history.back();

웹 브라우저 history의 다음 페이지로 이동

history.forward();

웹 브라우저의 정보 조회

웹 브라우저의 이름, 버전정보, 운영체제 정보 등이 포함된 문자열 값.

var agent = navigator.userAgent;

이 값에 특정 단어가 포함되어 있는지 여부를 판단하여 브라우저나 운영체제 종류, 모바일/PC 여부 등을 확인할 수 있다.

var agent = navigator.userAgent;
 
if (agent.indexOf("검사할단어") > -1 ) {
    ... 처리내용 ...
}
 
// 대체로 agent를 toLowerCase()로 변환 후 단어 검사
 
// 예제
 
function isMobile() {
    var tmpUser = navigator.userAgent;
    var isMobile = false;
 
    if (tmpUser.indexOf("iPhone") > -1 || tmpUser.indexOf("iPad") > -1 || tmpUser.indexOf("iPod") > -1 || tmpUser.indexOf("Android") > -1) {
        isMobile = true;
    }
 
    return isMobile;
}
 
var isMobileWeb = isMobile();
 
if(isMobileWeb) {
    document.write("<h1>모바일 웹 브라우저로 접속하셨습니다.</h1>");
} else {
    document.write("<h1>PC용 웹 브라우저로 접속하셨습니다.</h1>");
}
 
// 예제
 
function getWebBrowserName() {
    var agt = navigator.userAgent.toLowerCase();
 
    if (agt.indexOf("edge") != -1) {
        return "Edge";
    } else if (agt.indexOf("chrome") != -1) {
        return "Chrome";
    } else if (agt.indexOf("opera") != -1) {
        return "Opera";
    } else if (agt.indexOf("firefox") != -1) {
        return "FireFox";
    } else if (agt.indexOf("msie") != -1 || agt.indexOf("trident") != -1) {
        return "Internet Explorer";
    } else if (agt.indexOf("netscape") != -1) {
        return "Netscape";
    } else {
        return "Unknown";
    }
}
 
document.write("<h1>" + getWebBrowserName() + "</h1>");

HTML 제어

HTML요소를 객체로 생성하기

var mytag = document.getElementById("id속성값");

획득한 객체의 내부에 대한 내용 접근

// 내용 적용하기
mytag.innerHTML = "... 적용할 내용 ...";
 
// 적용된 내용 조회하기
var content = mytag.innerHTML;

획득한 객체 CSS속성 접근

// 내용 적용하기
mytag.style.css관련_프로퍼티 = "값";
 
// 적용된 내용 조회하기
var css = mytag.style.css관련_프로퍼티;

css관련_프로퍼티의 이름 규칙은 css에서 -로 표시되던 부분이 없어지고 대문자가 사용됨
ex) [css] background-color --> [js] backgroundColor

<img> 요소 제어

var myimg = document.getElementById("img요소의 id");
 
myimg.src = "이미지파일경로";
myimg.width = "200px";
myimg.height = "100px";

<form> 요소 제어

<form> 요소의 객체 획득하기

id속성값으로 접근하는 경우

// form의 id속성값이 `form_id`인 경우
// <form name="form_name" id="form_id">
var myform = document.getElementById("form_id");

name속성값으로 접근하는 경우

// form의 name속성값이 `form_name`인 경우
// <form name="form_name" id="form_id">
var myform = document.form_name;

획득한 <form> 안의 <input> 요소 접근