반응형
*JavaScript(ECMA Script)
-
변수
-
전역
-
함수 내에서 선언하더라도 함수 외부에서 사용할 수 있는 변수
-
변수명=값;
-
지역
-
함수 내에서 선언하면 함수 내에서만 사용할 수 있는 변수
-
var 변수명=값;
-
기본문법
-
변수, 연산자, 제어문(if,else,switch~case,for,while,do,break,continue,return-기본이 C라 C문법을 많이 따라간다.),함수(사용자 정의 함수, 제작사 함수), 함수 호출, 유효성 검증, popup창 띄우기, 값넘기기, location, history, localStorage, SessionStorage, canvas, closure(클래스 흉내), prototype(상속 흉내),배열 ~~20일 즈음까지~~
*연산자(operator)
-
자바와 같다.. 최(우선)단(항)산(술)쉬(프트)관(계)(논)리삼(항)대(입) 콤마(지막)
-
최우선- ( ), [ ],
-
단항- ~(1의 보수 연산자),!,+,-.++,--
-
산술- +,-,*,/,%
-
쉬프트(비트를 민다->순간적으로 작은값,큰값을 얻는다)- <<,>>,>>>
-
관계(비교)- >,<,>=,<=,==(값만 같은지),===(값과 데이터형이 모두 같은지),!=(다른지),!==(값과 데이터형이 모두 다른지)
-
논리
-
일반논리 : 여러개의 관계연산자를 묶어서 비교
-
&&(and-전항과 후항이 모두 참인경우 참 반환), ||(or-전항과 후항이 모두 거짓일때만 거짓 반환)
-
비트논리 : 비트연산(2진수로 바꾸어~)
-
&(상위비트와 하위비트가 모두 1일때 1내림), |(상위비트와 하위비트가 모두 0인경우 0내림), ^(상위비트와 하위비트 둘중 하나만 1인경우 1내림)
-
삼항(조건연산자)- 연산식? 항1 : 항2 (연산에 필요한 항이 모두 3개인 것-참일때 항1, 거짓일때 항2가 반환된다.)
-
대입(연산결과를 변수의 값으로 변경시킨다)- =.+=,-=,*=,/=,%=.<<=,>>=,>>>=,&=,|=,^=
*데이터 형
-
정수, 실수 =>number
-
=>정수/정수=>number 라 실수가 나올수도 정수가 나올수도
-
true,false =>boolean
-
"안녕",'안녕'=>String
-
object : HTML Tag, HTML Form Control,,,모든 대상포함가능
-
변수를 만들지 않고 사용하면 undefind가 발생.
-
수가 아닌것을 연산하면 NaN이 발생.(=>Not at Number의 약자)
-
데이터형을 확인하는 함수 : typeof(변수)
*제어문
-
자바와 같다..
-
프로그램의 순차적인 흐름을 바꾸어주는 문장
-
조건문
-
if~else : 모든 형을 비교할 수 있다. (범위)
-
switch~case : 모든 형을 다 비교할 수 있다.(정수끼리,문자열 끼리 비교했었다)(범위보단 값이 일치할 때)
-
반복문
-
for : 시작과 끝을 알때 사용//자바문법을 사용하게 되는 혼동 주의
-
while : 시작과 끝을 모를 때 사용.(최소 0번에 최대 조건까지 수행)
-
do~while : 최소 1번에 최대 조건까지 수행
-
분기문
-
break : switch~case나 반복문을 빠져나갈 때.
-
continue : 반복문의 수행을 건너 뛸때 사용.
-
return : 값을 반환하거나, 코드의 실행을 멈추고 호출한 곳으로 돌아갈 때.
*외부값 입력 받기
-
var m= prompt("메세지", "초기값");//input dialog처럼 띄워진다..잘 쓰지 않고 폼을 만들지 않고 값을 간단히 넣어볼 때..
-
//HTML Form Control을 사용하지 않고 입력값을 받고 싶을때 사용. 개발할 때에만 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
strong{font-size: 16px}
</style>
<script type="text/javascript">
//한줄 주석
/*
* 여러줄 주석
*/
/*
연산자 - 최 단산쉬 관리 삼대 콤마
1.단항 : 연산에 필요한 항이 한개인 연산자(unary)
~(tilde): 1의 보수 연산(0->1, 1->0 으로 변경)
!(not): true->false, false->true
+ : 형식적 제공
- : 부호바꿈 연산자, 2의 보수 연산자
++ : 증가 연산자
-- : 감소 연산자
-전위 연산 : +,-는 전위만, 증감 연산자는 둘다 가능하다.
연산자 대상체
-후위 연산
대상체 연산자
*/
var num1=2;//지역변수
var num2=-2;
var flag1=true;
var flag2=false;
//window. 은 최상위 객체로 생략하여 사용할 수 있어 거의 잘 쓰지 않는다.
document.write("<ul>");
document.write("<li>할당된 값 : "+num1+"</li>");
document.write("<li><strong>단항연산자</strong></li>");
//~ 양수 : 부호가 변경되고 1증가 ((암호화 할때 많이 사용함))
document.write("<li>~"+ num1 +"="+(~num1)+"</li>");//-3
//~ 음수 : 부호가 변경되고 1감소
document.write("<li>~"+ num2 +"="+(~num2)+"</li>");//1
//!
document.write("<li>!"+ flag1 +"="+(!flag1)+"</li>");//false
document.write("<li>!"+ flag2 +"="+(!flag2)+"</li>");//true
//+
document.write("<li>+"+ num1 +"="+(+num1)+"</li>");//2
document.write("<li>+"+ num2 +"="+(+num2)+"</li>");//-2
//-
document.write("<li>-"+ num1 +"="+(-num1)+"</li>");//-2
document.write("<li>-"+ num2 +"="+(-num2)+"</li>");//2
//++중가 : 대상체의 값을 1씩 증가
num1++;//후위 3
++num1;//전위 4
document.write("<li>증가연산 후 "+ num1 +"</li>");//4
//--중가 : 대상체의 값을 1씩 감소
num1--;//후위
--num1;//전위
document.write("<li>감소연산 후 "+ num1 +"</li>");//2
//((전위는 내것먼저))대입 연산자와 함께 사용되거나, 함수의 인수값으로 넣어 줄 때에는 전위와 후위가 다른 값을 할당한다.
var result=0;
//전위는 내것먼저(증가, 감소연산을 먼저 수행하고 대입)
result=++num1;
document.write("<li>전위연산 후 result="+ result +",num1"+num1+"</li>");//3,3
//후위는 남의것 먼저(할당을 먼저 수행하고 증가, 감소를 나중에 수행)
result=0;
result=num1++;
document.write("<li>후위연산 후 result="+ result +",num1"+num1+"</li>");//3,4
//산술 연산 : +,-,*,/,%
document.write("<li><strong>산술연산</strong></li>");
document.write("<li>"+ num1 % 2 +"</li>");//0
//쉬프트 연산 : ((암호화할때 주로 사용하게 된다..))
//<<(비트를 왼쪽으로 밀고 밀어서 빈칸을 항상 0으로 채운다.),
//>>(비트를 오른쪽으로 밀고 밀어서 빈칸을 최상위부호 비트에 따라 0또는 1로 채운다.),
//>>>(비트를 오른쪽으로 밀고 밀어서 빈칸을 항상 0으로 채운다.)
document.write("<li><strong>쉬프트 연산</strong></li>");
//0100<<2 =0001 0000
document.write("<li>"+ num1 +"<<2 =" +(num1<< 2) +"</li>");//0001 0000
//0100 >>2 =0000 0001
document.write("<li>"+ num1 +">>2 =" +(num1>> 2) +"</li>");//1
//0100 >>>1 =0000 0010
document.write("<li>"+ num1 +">>>1 =" +(num1>>>1) +"</li>");//2
//관계 연산 : <,>,<=,>=, ==,===, !=, !==
num1="2";
num2=2;
document.write("<li><strong>관계연산</strong></li>");
//== : 데이터형이 달라도 값이 같다면 true
document.write("<li>"+ num1 +"=="+num2+"="+ (num1==num2) +"</li>");//true
//=== : 데이터형과 값이 모두 같아야 true (많이 사용하지는 않지만 특징이니까~)
document.write("<li>"+ num1 +"==="+num2+"="+ (num1===num2) +"</li>");//true(num2가 "2"일때)
//!= : 값이 다르다면 true
document.write("<li>"+ num1 +"!="+num2+"="+ (num1!=num2) +"</li>");//false
//!== : 값과 데이터형이 모두 다른지
document.write("<li>"+ num1 +"!=="+num2+"="+ (num1!==num2) +"</li>");//true
//논리 연산:
document.write("<li><strong>논리연산</strong></li>");
//일반 논리 : &&(전항과 후항이 모두 참일때 참 반환),||(전항과 후항이 모두 거짓일 때에만 거짓 반환)
document.write("<li><strong>일반논리연산</strong></li>");
document.write("<li>"+ flag1 +"&&"+flag1+"="+ (flag1&&flag1) +"</li>");//true
document.write("<li>"+ flag1 +"&&"+flag2+"="+ (flag1&&flag2) +"</li>");//f
//전항이 거짓이면 후항은 연산하지 않는다.
document.write("<li>"+ flag2 +"&&"+flag1+"="+ (flag2&&flag1) +"</li>");//f
document.write("<li>"+ flag2 +"&&"+flag2+"="+ (flag2&&flag2) +"</li>");//f
//전항이 참이면 후항을 연산하지 않는다.
document.write("<li>"+ flag1 +"||"+flag1+"="+ (flag1||flag1) +"</li>");//true
document.write("<li>"+ flag1 +"||"+flag2+"="+ (flag1||flag2) +"</li>");//true
document.write("<li>"+ flag2 +"||"+flag1+"="+ (flag2||flag1) +"</li>");//true
document.write("<li>"+ flag2 +"||"+flag2+"="+ (flag2||flag2) +"</li>");//f
//비트 논리 :&(상위비트와 하위비트 모두 1인경우 1내림),|(상위비트와 하위비트 모두 0인경우 0내림),
//^(상위비트와 하위비트 둘중 하나만 1인 경우 1내림)
num1=21;
num2=18;//3216 8421 =>0001 0101 0001 0010
document.write("<li><strong>비트논리연산</strong></li>");
document.write("<li>"+ num1 +"&"+num2+"="+ (num1&num2) +"</li>");//0001 0000
document.write("<li>"+ num1 +"|"+num2+"="+ (num1|num2) +"</li>");//0001 0110
document.write("<li>"+ num1 +"^"+num2+"="+ (num1^num2) +"</li>");//0000 0111
document.write("<li><strong>삼항연산</strong></li>");
//연산식? 항1: 항2
document.write("<li>"+ num1 +"은 "+(num1%2 ==0?"짝수":"홀수") +"</li>");
//대입연산 : 변수의 값을 변경한다.
document.write("<li><strong>대입연산</strong></li>");
//=,+=,-=,*=,/=,%=, <<=,>>=,>>>=, &=,|=,^=
num1=3;//순수 대입
//산술 대입
num1+=2;//num1=num1+2;//5
num1-=1;//4
num1*=2;//num1=num1*2;//8
num1/=3;//num1=num1/3;//2.66666666(자바는 정수가 나오지만 자바스크립은 실수가 나온다.=>number 데이터형)
num1=2;
num1<<=4; //num1=num1<<4;//0010 0000
num1>>=2; //num1=num1>>2;//0000 1000
num1>>>=1; //num1=num1>>>1;//0000 0100
//0000 0100 0000 1111
num1&=15; //num1=num1 &15;//0000 0100
num1|=15; //num1=num1 |15;//0000 1111
num1^=15; //num1=num1 ^15;//0000 0000
document.write("<li>"+num1+"</li>");
document.write("</ul>");
num1=7;
num2=2.7;
flag1=true;
var msg="오늘은 목요일 입니다.^0^b";
var msg1='내일은 금요일 입니다.';
alert(num1+"의 데이터형" +typeof(num1));
alert(num2+"의 데이터형" +typeof(num2));
alert(flag1+"의 데이터형" +typeof(flag1));
alert(msg+"의 데이터형" +typeof(msg));
alert(msg1+"의 데이터형" +typeof(msg1));
window.onload=function(){
var obj=document.getElementById("id");
alert(obj+"의 데이터형" +typeof(obj));
}//function 무기명 함수?
//변수를 선언하지 않고 사용한 경우 : undefined
alert("변수를 선언하지 않고 사용하면 " +typeof(msg2));
//수가 아닌 값을 연산하면 NaN
alert("msg1/2 "+(msg1/2));
</script>
</head>
<body>
<input type="text" id="id"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
//if
var name=prompt("이름을 입력해 주세요","홍길동");
var img="img.png";
var msg="평민";
//조건문 : 단일 if-조건에 맞을 때에만 코드를 실행해야할 때(상황 제어)
if(name=="이재찬"){
img="img1_1.png"
msg="반장";
}//end if
document.write("<img src='../common/images/"+img+"'/><br/>");
document.write(name+"은 "+msg+"<br/>");
//if~else :둘중 하나의 코드를 반드시 실행해야 할 때.
var num =prompt("임의의 수를 입력해주세요.","2");
if(num%2==0){
document.write("<marquee scrollamount='"+num*2+"' direction='right'>"+num+"은 짝수 입니다. =:> </marquee>");
}else{
document.write("<marquee scrollamount='"+num+"'>"+num+"은 홀수 입니다. <:= </marquee>");
}//end else
//다중if(else~if) :연관된 여러 조건을 비교할 때.
var bloodType=prompt("혈액형 입력","A");
if(bloodType=="A" || bloodType=="a"){
alert(bloodType+"의 특징은 세심하고 치밀하다.");
}else if(bloodType=="B"||bloodType=="b"){
alert(bloodType+"의 특징은 털털함. 내것이 아니면 관심없음");
}else if(bloodType=="AB"||bloodType=="ab"){
alert(bloodType+"의 특징은 복잡함,합리적.");
}else{
alert(bloodType+"의 특징은 질긴 생명력,리더쉽이 좋다.");
}//end else
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
div{width:500px;height: 400px; border: 1px solid #333; }
</style>
<script type="text/javascript">
var direction=prompt("방향은?","up");
var msg=prompt("메세지를 입력하세요","안녕하세요")
document.write("<div>");
if(direction=="up"){
document.write("<marquee style='width:500px;height:400px' scrollamount=5 direction='"+direction+"'>"+"∧"+msg+"</marquee>");
}else if(direction=="down"){
document.write("<marquee style='width:500px;height:400px' scrollamount=5 direction='"+direction+"'>"+"∨"+msg+"</marquee>");
}else if(direction=="left"){
document.write("<marquee style='width:500px;height:400px' scrollamount=5 direction='"+direction+"'>"+"<"+msg+"</marquee>");
}else if(direction=="right"){
document.write("<marquee style='width:500px;height:400px' scrollamount=5 direction='"+direction+"'>"+">"+msg+"</marquee>");
}//end else
document.write("</div>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
table{border: 1px solid #333; box-shadow:10px 10px 0px #333;}
/*x좌표^ y좌표^ 번짐값^ 그림자색(RGB);*/
</style>
<script type="text/javascript">
var len=prompt("언어를 입력하세요.(java,HTML,javaScript,CSS)","java");
var img="NoImage.png";
var name="noname";
var birth="1900";
var age="100";
document.write("<table border='1'cellspacing='0'><tr><td rowspan='3'>");
if(len=="java"){
img="JamesGosling.JPG"
name="JamesGosling"
birth=" 1955년"
age="63세";
}else if(len=="javaScript"){
img="BrendanEich.JPG"
name="BrendanEich"
birth="1961년"
age="59살";
}else if(len=="HTML"){
img="TimBernersLee.JPG"
name="TimBernersLee"
birth=" 1955년"
age="63세";
}else if(len=="CSS"){
img="HakonWiumLie.JPG"
name="HakonWiumLie"
birth="1965년"
age="53살";
}else{
alert("java,HTML,javaScript,CSS중에서 입력해 주세요.")
}//else
document.write("<img src='../common/images/"+img+"'/></td>");
document.write("<td>이름</td><td>"+name+"</td></tr>");
document.write("<tr><td>태어난해</td><td>"+birth+"</td></tr>");
document.write("<tr><td>나이</td><td>"+age+"</td></tr>");
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
<<숙제>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test3</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background-color:#FFFFFF; position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
font-color:#081C58; position:absolute; top:40px; left:310px; }
#container{width:800px; height:600px; position: relative;}
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
.top1{float: left;}
.top2{float: right;}
.group{float: left; font-size: 12px;}
.gray{float: left; color:#ECECEC;}
.select{float: right;}
.null{float: right;}
.center{background-color:#FBFBFB; border-bottom:1px solid #EAEAEA;
border-top:2px solid #000000; width:800px; height:25px; position:absolute; top:25px;
padding-top:5px; padding-left:5px;}
.table{float: left;position:absolute; top:55px;}
table{}
td{text-align: center; }
.col4{width:85px; }
.box{float: left; width:65px; height:17px; border: 1px solid #333;}
.colred{}
.colblue{}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">교보 문고</div>
</div>
<div id="container">
<div>
<div class="top1">전체 <span>'자바'</span> 검색결과 (1 ~20 / 총5,883건)</div>
<div class="top2"><input type="Button" value="결과내재검색/상세검색"/> <input type="Button" value="장바구니 담기"/></div>
</div>
<div class="center">
<div class="group">정확도</div>
<div class="gray"> | </div>
<div class="group">판매량</div>
<div class="gray"> | </div>
<div class="group">신상품</div>
<div class="gray"> | </div>
<div class="group">낮은가격</div>
<div class="gray"> | </div>
<div class="group">높은가격</div>
<div class="gray"> | </div>
<div class="group">할인율</div>
<div class="gray"> | </div>
<div class="group">리뷰수</div>
<div class="null"> </div>
<select class="select" size="1" name="select">
<option value="옵션선택" selected="selected">옵션선택</option>
<option value="옵션선택" selected="selected">옵션선택</option>
<option value="옵션선택" selected="selected">옵션선택</option>
</select>
</div>
<div class="table">
<table>
<tr><!-- 이미지 크기 80*110 -->
<td>
국내도서<br/>
<img src="../common/images/wh3_1.png" style="border:2px solid #E2E2E2"/>
<div>새창보기</div><div class="gray"> | </div><div>미리보기</div></td>
<td>
<div class="box">MD의선택</div><div class="box">무료배송</div><div class="box">소득공제</div>
<br/>
<div>[컴퓨터/IT]이팩티브 자바 3/E : 프로그래밍인사이트</div>
<br/>
<div>조슈아 블로크 지음</div><div class="gray"> | </div><div>게임맵시(이복연) 옮김</div><div class="gray"> | </div>인사이트<div class="gray"> | </div>2018년 11월
<div>#JAVA</div><div>#자바언어</div>
<div class="colblue">[당일배송]</div> 지금 주문하면 오늘(1일, 금) 도착 예정 <div class="box">안내</div>
<div class="colred">경품</div><div>IT분야 공식 SNS 리드잇 팔로우하고 선물받으세요! 5건▼</div>
</td>
<td>36,000원<br/>32,400원 [10%↓]<br/>1,800원P</td>
<td>
<input class="col4" type="button" value="바로드림"/><br/>
<input class="col4" type="button" value="장바구니 담기"/><br/>
<input class="col4" type="button" value="바로구매"/><br/>
<input class="col4" type="button" value="보관함 담기"/><br/>
<input class="col4" type="button" value="스펙비교"/><br/>
</td>
</tr>
</table>
</div>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 75일차-Javascript_함수(function) (0) | 2019.02.14 |
|---|---|
| 74일차-JavaScript_제어문과 배열(2차원 배열) (0) | 2019.02.13 |
| 72일차-JavaScript (0) | 2019.02.02 |
| 71일차-CSS,JavaScript (0) | 2019.02.01 |
| 70일차-CSS_정렬,디자인,배치 (0) | 2019.01.31 |