티스토리 뷰
------------WEB 1.0--------
- javascript
- 기본구조
<script>
</script>
<javascript ->ajax -> jquery -> angular js >
client side script language
- HTML, javascript, XML ...
▶ javascript : client side script language
- 웹 브라우저에서 실행되는 것
>>javascript 로 만든 소스코드를 웹에서 받아와서 실행시키는 개념
- 소스코드를 볼수 있는 유일한 언어
-> 웹에서 실행해야 하기 때문에 소스코드가 보이는 것이 가능
<javascript>
- ; 옵셔널
붙여도 되고 안붙여도 되지만 붙이는 것이 좋음
>한줄에 여러코드를 작성하는 경우에는 붙여야함
documet.write(''); console.log('')
- 주석문
//
/* */
0. hello,javascript 출력
-alert
-console.log()
-document.write()
▶입력
- prompt()
- confirm()
--> 해당 웹브라우져에서 실행하고있는 javascript에서 입력을 받은 것이라고 생각해야함
크롬 ) F12 개발자 창 뜸
개발자 창
console 창에서
1)alert('hello,gjavasript')
>실행결과
2)javascript:alert('hello,javascript');
3) vi javascript.html
<!doctype html>
<html>
<head>
<script>
alert('hello,javasrcipt')
var ret = confirm('yes or no');
//confirm 확인을 누르면 ret
>ture
취소를 누르면 ret
>false
var name =prompt('input a name','ex).michel');
</script>
</head>
<body>
<script>
document.write('Hello,javascript')
// 현재 열고있는 웹 페이지에 그대로 출력
document.write('return :'+ret);
// ret 확인 가능
document.write('<br>');
document.write('name :'+name);
//name 확인
console.log('Hello,javascript')
// 화면이 아닌 개발자 도구에서 console 창에 뜸
</script>
</body>
</html>
3-1) vi javascript.html
<!doctype html>
<html>
<head>
<script>
alert('hello,javascript');
var ret=confirm('yes or no';
</script>
</head>
<body>
</body>
</html>
>>F12 콘솔창 확인
3-2) vi javascript.html
<!doctype html>
<html>
<head>
<script>
var name=prompt('input a name','ex)stella');
</script>
</head>
<body>
</body>
</html>
>실행결과
3-3) vi javascript.html
<!doctype html>
<html>
<head>
<script>
</script>
</head>
<body>
<script>
document.write('Hello,javascript')
</script>
</body>
</html>
>실행 결과
3-4) vi javascript.html
<!doctype html>
<html>
<head>
<script>
alert('hello,javasrcipt')
var ret = confirm('yes or no');
//confirm 확인을 누르면 ret
>ture
취소를 누르면 ret
>false
var name =prompt('input a name','ex).michel');
</script>
</head>
<body>
<script>
document.write('return :'+ret);
// ret 확인 가능
document.write('<br>');
document.write('name :'+name);
</script>
</body>
</html>
>실행결과 1) confirm (no 선택)
>2) prompt 이름 입력
>3) body 출력
3-5) console출력
<!doctype html>
<html>
<head>
<script>
</script>
</head>
<body>
<script>
console.log('Hello,javascript')
// 화면이 아닌 개발자 도구에서 console 창에 뜸
</script>
</body>
</html>
>> 코드를 가져와서 웹 브라우저에서 사용한것
> 웹브라우저에서 코드를 입력하는 것과 같음
> php는 소스코드 확인 할수 없음
! 언어의 특징 이해해야 취약점을 이해할 수 있음
웹>
192.168.59.128/javascript.html
- 이 코드만 입력해도 해당 코드가 실행되서 나타나는 것을 알 수 있음
< Javasript 언어 >
1. 연산자 : 산술, 논리 , 증감, 비트 , 관계
> 관계
특징>>
=== : 3개짜리가 있음
!==
> ex) 2=="2" 는 각각 문자와 숫자임에도 true 라고 나옴
> 정확하게 비교하기 위해서 3개 사용
2. 변수 : 일반(정수, 실수 , 문자)
배열
[] 대괄호 사용 , 원소의 타입 상관없음
> c,java :같은 타입만 들어갈수 있음
> python list와 동일
{} 중괄호
> 객체 만들때 사용
> 배열과 객체는 자바스크립트에서 큰 차이가 없음
> 표현방법의 약간의 차이
키:값 -> 객체
name ='jone doe'
name[0]
>'j'
name.lenght
>8
! escape squence 다루는법
\' -> '
\" -> "
\\ -> \
var orange='orange'
>> var 키워드를 생략해도 가능/ 붙이는 것이 표준
값을 지정했을 때, 지정한 값을 그래로 따라간다
>> 규칙 동일 ex) 숫자로 시작 불가, 특수문자 불가, 언더바 불가 등등
>> typeof 변수의 타입을 확인 하고 싶을 때 사용
>> 배열도 하나의 객체로써 다뤄짐 (javascript에서는)
>> 페이지를 다시 로드하면 변수 사라짐 (일시적으로 가지고있는 변수)
3. 제어문 : 분기(if,swich), 반복(for, while)
python의 for : for (x in person);
4. 함수
> function 함수이름(인자,인자){
return 인자;
}
5. 객체
실습)
야구 게임 : 숫자 맞추기 게임
- 임의의 숫자 : 803
input : 123 -> 2out 1strike
input : 456 -> 3out
input : 789 -> 2out 1ball
-> 자리수와 숫자가 일치하면 스트라이크
자리가 불일치 숫자 일치 볼
둘다 불일치 아웃
> 중복되는 숫자 없음
#vi game.html
<!doctype html>
<html>
<head>
<script>
var input=[];
var num=[8,0,3];
var out=0,ball=0,strike=0;
for (var i=1;i<=10;i++){
input=prompt('input three number','ex)123');
for(var j=0;j<3;j++){
if(num[j]==input[j]){
strike++;
console.log(num,input)
}
else if(num[j]==input[j+1] || num[j]==input[j-1] || num[j]==input[j+2] || num[j]==input[j-2]){
ball++;
}
else{
out++;
}
}
alert(i+"번째 입력"+input+":"+strike+"S"+ball+"B"+out+"O");
strike=0;
ball=0;
out=0;
if(strike==3){
break;
}
document.write("성공했습니다");
}
document.write("10번이 초과되었습니다")
</script>
</head>
<body>
</body>
</html>
'Web Security > Web' 카테고리의 다른 글
| Web- PHP 데이터 전달 <GET/POST> (0) | 2018.03.02 |
|---|---|
| Web - WEB 2.0 : CGI / PHP사용 (0) | 2018.03.02 |
| Web - DOM/BOM객체 (javascript) (0) | 2018.03.02 |
| 웹(Web) 기초 1) Web 1.0 (0) | 2018.02.17 |
| Web 실습환경 구축 (0) | 2018.02.14 |