document
HTML페이지의 <body>태그 안을 Javascript에서는 document?(=문서) 라고 부른다.
<body>태그안에 새로운 내용을 출력하고자 할 경우 자바스크립트에게 “쓰다” (write)라는 명령어를 전달한다.
document.write("출력할 내용");
출력되는 내용은 기존에 존재하던 <body> 태그 안의 모든 내용을 지우고 새롭게 작성된다.
HTML태그 안에 출력되는 내용이므로, 다른 HTML태그를 포함하여 출력할 수 있다.
document.write("<h1>출력할 내용</h1>");
for문 기본
for (var i=1; i<=100; i++) {
// 결과값 누적
sum += i;
}
함수의 정의와 호출
// 함수의 선언
function sayHello() {
document.write("<h1>안녕하세요.</h1>");
document.write("<h1>자바스크립트</h1>");
}
// 함수의 호출 (여러 번 재사용 할 수 있다.)
sayHello();
sayHello();
파라미터를 갖는 함수
// 파라미터를 갖는 함수의 선언
function f(x) {
var y = x + 1;
document.write("<h1>" +
y + "</h1>");
}
// 함수의 호출 --> 파라미터를 전달
한다.
f(2);
f(5);
f(10);
다중 파라미터를 갖는 함수
자바스크립트에서도 파라미터를 콤마(,)로 구분하여 여러개 사용할 수 있다.
function 함수이름(파라미터1, 파라미터2, ... 파라미터n) {
... 실행할 구문 ...
}
함수이름(파라미터1, 파라미터2, ... 파라미터n);
자바스크립트에서 리턴값의 사용(결과값 돌려주기)
자신이 호출된 위치로 되돌려 주기 위해서 return 키워드를 사용한다.
function f(x) {
return x + 1;
}
var y = f(5);
자바스크립트 주요 내장함수
eval(문자열) : 주어진 문자열을 수식으로 변환하여 리턴한다.
parseInt(문자열) : 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴 한다
isNaN(문자열) : 주어진 문자열이 숫자형식이 아니면 true, 숫자형식이면 false를 리턴한다.
alert(문자열) : 주어진 문자열을 확인 대화창으로 화면에 표시한다.
confirm(문자열) :주어진 문자열이 표시되는 확인/취소 대화창을 화면에 표시한다. (알럿과 비슷 취소가 있음)
prompt(문자열) : 주어진 문자열이 제목으로 표시되는, 값을 입력받기 위한 대화창이 화면에 표시된다.(input폼이 하나 들어있음)
Javascript 이벤트 개요
-css와 html을 제어하는데 사용하는데 보통 이벤트가 있을 때 사용한다.
-이벤트 이름은 jQuery의 명령어로 외우자.
Javascript 이벤트 사용방법
-특정 이벤트에서 동작할 함수를 <script> 태그 블록 안에 정의한다.
function sayHello() {
alert("Hello Javascript");
}
-이벤트를 적용할 HTML태그에서 이벤트 이름을 속성으로 사용하고, 속성에 대한 값을 함수의 호출 구문으로 적용한다. 이 때, 태그의 종류는 어떤 것이되더라도 무관하다.
<input type="button" value="결과보기" 이벤트이름="sayHello()" />
Javascript를 사용하는 목적
Javascript를 사용하는 이유는 <body>안의 어떠한 태그를 사용자의 이벤트에 반응할 수 있도록 제어하기 위함이다.
즉 동적으로 구현하기 위함!!
HTML 태그 요소 획득
<span id="question">?</span>
var mytag = document.getElementById("question");
document는 위에 설명했듯이 <body> 태그를 의미하는것이므로. body태그 안의 id를 획득하는것
획득한 태그 안에 새로운 내용을 적용하기 위해서는 innerHTML 이라는 값을 사용 한다.
태그 안에 새로운 내용 적용하기(span사이의 ? 내용이 없어지고, 새로운 내용이 들어간다)
var mytag = document.getElementById("question");
mytag.innerHTML = “새롭게 적용될 내용”;
onload이벤트
onload 이벤트는 웹 브라우저에 의해서 특정 태그 요소가 해석된 이후 시점을 의미한다.
HTML 페이지가 브라우저에 의해서 열린 후, 자동으로 실행되기 위해서는 <body>태그가 온전하게 인식된 후에 처리되어야 하므로, <body>태그에
이 이벤트를 적용한다.
즉 </body>---> 가 끝나면 작동한다.
onload 이벤트를 사용해야 하는 이유.
Javascript 코드는 제어하고자 하는 대상이 웹 브라우저에게 인식된 이후에 실행 가능하다.
그리고 웹 브라우저는 HTML 파일을 한 줄씩 읽어서 인식한다
Javascript 소스의 실행 시점
Javascript 코드가 HTML 태그와 분리된 후, HTML 태그가 모두 다 브라우저에게 읽혀지기 전까지 실행을 대기하고 있어야 하므로, <body>태그에
onload 이벤트로 Javascript 함수를 연결해야 정상적인 실행이 보장된다.
'JavaScript' 카테고리의 다른 글
| Uncaught TypeError: is not a function 해결 방법 (0) | 2019.04.24 |
|---|---|
| 부모창 파라미터 전달 (0) | 2017.03.10 |
| Javascript 기본(2) (0) | 2017.03.10 |