client side script language
- HTML, javascript, XML , ...
JavaScript
- client side script language
0. hello, javascript
출력 코드
- alert() //출력문 printf와 비슷함.
- console.log() //입력한 값이 콘솔 창에 출력
- document.write() //그 페이지에 보임
입력 코드
confirm
아래 그림에서 확인을 누르면 True 가 취소를 누르면 False가 입력된다.
document.write
홈페이지에 뜨게 된다.
prompt //scnaf와 같은 입력문
1. 연산자 : 산술 , 논리 , 비트 , 관계 , 증감
javascript 는 같다와 같지 않다를 == != 가 아닌
===와 !== 로 사용
이런식으로 다르기 때문이다.
2. 변수 : 일반(정수, 실수 , 문자)
배열
- 변수 선언 할 때 앞에 var 을 붙여 준다.
- 변수의 타입 확인 typof [대상]
3. 제어문 : 분기(if/sw), 반복(for,while)
4. 함수
기본 구조
<script>
</script>
한줄에 여러 코드를 사용할 경우 ;을 붙여야 한다.
위와 같은 경우가 아닐 때는 안붙여도 된다 붙이는 것을 추천
실습
야구게임 : 숫자 맞추기 게임
- 임의의 숫자 : 503
- 중복된 숫자는 없다.
숫자만 같으면 볼 자리 까지 같으면 스트라이크 아무 것도 없으면 OUT
ex ) input: 123 -> 2 out 1 strike
input: 052 -> 2 ball 1 out
소스
alert('야구 게임 시작!');
num = '503';
var snt = 0;
var bnt = 0;
var out = 0;
var ext = 5;
while(ext >0){
snt = 0;
bnt = 0;
out = 0;
input = prompt("숫자 입력:");
for(var i=0;i<=2;i++){
fout=0;
if(input[i] === num[i]){
snt ++; fout =1;}
for(var j=0;j<=2;j++){
if( (i!==j) && input[i] === num[j] ) {
bnt ++; fout =1;}
}
if(!fout){
out++;}
}
if(snt === 3){
alert("승리하셨어요^.^");
break; }
else{
alert(snt + 'strike' + bnt + 'ball'+out + 'out');
}
ext --;
alert(ext + "번 남았습니다.");
if(ext === 0){
alert("패배하셨습니다.");}
}
DOM(Document Object Model)
- 문서에 대한 모든 내용을 담고 있는 객체
많이 쓰는 객체
-document
-history
1. 요소에 대한 접근
-getElementsByTagName
document.getElementsByTagName('p');
p에 대한 태그 내용들을 가져온 것이다.
이런식으로 배열 형태로 그 값을 알 수 있다.
이런식으로 그 태그의 값을 변경할 수 있다.
style도 추가 할 수있다.
document로 다양한 표현
<!doctype html>
<html>
<head>
<script>
function mouse_over()
{
x= document.getElementsByTagName('h1');
x[0].setAttribute("style","color:red");
x[0].innerText = "클릭해줭";
}
function mouse_out(){
x= document.getElementsByTagName('h1');
x[0].setAttribute("style","color:black");
x[0].innerText = "Javascript Test";
}
</script>
</head>
<body>
<h1 onmouseover="mouse_over()" onmouseout="mouse_out()">Javascript Test</h1>
</body>
</html>
마우스를 글씨에 가져다 두었을 떄 밑에와 같이 변한다.
-getElementsById
-getElementsByClassName
BOM(Browser Object Model)
- 브라우저에 대한 모든 내용을 담고 있는 객체
'Web Security' 카테고리의 다른 글
| 데이터 전달 (0) | 2018.02.20 |
|---|---|
| CGI(PHP) (0) | 2018.02.19 |
| 키입력 받아서 화면에 출력 (0) | 2018.02.14 |
| Apache 서버 (0) | 2018.02.12 |
| 웹의 이해(html) (0) | 2018.02.08 |