2017. 8. 2. 19:33ㆍWebHacking/Web
웹 페이지에서 자바 스크립트 입력할 수 있는 방법과 여러가지 문법들을 알아보도록 하겠습니다
1> 웹 페이지에서 자바스크립트 입력하기
[1] 웹 페이지 소스코드는 다음과 같습니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctype html> <html> <head> <script> var apple = 10; document.write(apple); //document객체의 write 메서드를 이용해서 변수 apple의 값을 화면에 출력한다 </script> </head> <body> </body> </html> | cs |
[2] 주소창에 자바스크립트 입력하기
[ 그림 1 ]
웹 페이지의 주소창에 자바스크립트 문법을 입력하면 자바스크립트가 실제로 실행되는 모습을 볼 수 있습니다
" javascript:apple=20 ; alert( apple ) " => 변수 apple을 20으로 초기화 시키고 alert() 함수를 이용해 출력한다
[3] 실행화면
[ 그림 2 ]
변수 apple의 값 20 이 출력되었습니다 ! ( alert()함수 - 화면에 알림창을 띄운다 )
2> 자바스크립트 기본 문법 익히기
[1] 웹 페이지 소스는 다음과 같습니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!doctype html> <html> <head> <script> var ret = confirm("hello?"); // True or False 로 저장된다 document.write(ret); var name = prompt("이름이 뭐야?","예).kimeunhwan"); // 인수1: 질문 / 인수2:기본값 document.write(name); console.log("apple is: " + apple ); // 페이지 소스확인 창 - Console 에 로그를 남긴다 </script> </head> <body> </body> </html> | cs |
[ 그림 3 ]
확인 => True
취소 => False
[3] prompt()함수 실행화면
[ 그림 4 ]
prompt()함수는 값을 입력할 수 있습니다
[4] 최종 실행화면
[ 그림 5 ]
document함수의 write() 메서드를 이용해서 화면에 출력하였습니다
[5] console.log함수 실행화면
[ 그림 6 ]
3> 자바스크립트 조건문 ( if문 )
[ 소스코드 ]
[ 그림 7 ]
confirm() 함수의 값이 True이거나 False에 따라 다른 결과가 출력됩니다
아래는 취소버튼을 누른 후의 홈페이지 모습입니다
[ 실행화면 ]
[ 그림 8 ]
3> 자바스크립트 반복문 ( for / while)
[1] while
while ( 조건 ) {
내용 ...
}
[2] for
for ( 초기화 ; 조건 ; 증감식 ){
내용 ...
}
* 자바스크립트의 for in 문법은 특이합니다
[3] for in
for ( var 변수 in 배열 ){
내용 ...
}
* 변수 : 배열의 요소를 가져오는 것이아니라 배열의 인덱스를 가져옵니다
[ for in 예제 ]
[ 소스코드 ]
[ 실행화면 ]
기존 문법들의 for반복문과는 다르게 변수값으로 인덱스가 들어왔습니다
따라서 요소들을 출력하려면 " 배열명[변수] " 로써 표현하셔야 합니다
'WebHacking > Web' 카테고리의 다른 글
| PHP배열(array생성자) 및 반복문(foreach) (0) | 2017.08.02 |
|---|---|
| 가상머신에 PHP설치 / PHP출력문 / 변수 (0) | 2017.08.02 |
| 자바스크립트 DOC객체 메서드 / 사용법 (0) | 2017.08.02 |
| HTTP Method / GET Flooding / Slowloris (0) | 2017.08.01 |
| 아파치(Apache)서버 구축 / HTTP 통신 실습 (0) | 2017.07.21 |