KH/JavaScript
JS_ 이미지 리스너 & 연산자
오늘의 진
2022. 9. 19. 15:10
body내부에 Javascript 작성하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 리스너 속성에 자바스크립트 코드</title>
</head>
<body>
<h3>마우스를 클릭하세요 </h3>
<img src="../images/apple.png" alt="이미지" title="my image"
onclick="this.src='../images/banana.png'" onmouseout="src='../images/apple.png'">
<!--this는 생략이 가능하다. onmouseout 에서도 this.src인데 생략한 것이다. -->
</body>
</html>| 처음 화면 | 클릭 했을때 | 클릭 후 사진 밖으로 마우스 움직였을 때 |
 |
 |
 |
" ' ' " 과 ' " " ' 형태 모두 작성 가능하다. 하지만 교차는 불가능. " ' " ' 이런식으로 교차하면 실행은 된다.
디버깅을 할려고 보면 그 구문이 아니라 그 아랫줄에서 오류가 발생했다고 뜬다.
<script> 태그를 이용하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>script 태그에 자바스크립트 작성</title>
<script>
function over(obj){
obj.src="../images/banana.png";
}
function out(obj){
obj.src="../images/apple.png";
}
function click2(obj){
obj.src="../images/back.png";
}
</script>
</head>
<body>
<h3>마우스를 올려 보세요</h3>
<hr>
<img src="../images/apple.png" alt="이미지"
onmouseover="over(this)" <!--this 는 img를 가르킴 -->
onmouseout="out(this)"
onclick="click2(this)">
</body>
</html>| 처음, out | over | click |
 |
 |
 |
function 으로 함수를 작성한다. funtion 함수이름( 변수 ) { 실행내용 }
<javascript>를 바디부분에 작성하여도 정상적으로 작동한다. 하지만 head 부분에 작성하는 것이 좋다.
외부 파일에 자바스크립트 작성하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 파일에 자바스크립트 작성</title>
<script src="fruit.js"></script>
</head>
<body>
<h3>마우스를 올려 보세요</h3>
<hr>
<img src="../images/apple.png" alt="이미지"
onmouseover="over(this)"
onmouseout="out(this)"
onclick="click2(this)">
</body>
</html>js코드
function over(obj){
obj.src="../images/banana.png";
}
function out(obj){
obj.src="../images/apple.png";
}
function click2(obj){
obj.src="../images/back.png";
}
document.write( ) 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write()활용</title>
</head>
<body>
<h3>document.write() 활용</h3>
<hr>
<script>
document.write("<h3>Welcom!</h3>");
document.write("2+5는 <br>");
document.write("<mark>7 입니다.</mark>");
</script>
<!--mark 태그는 참조목적으로 강조된 문서의 텍스트, 인용문 일부에 주위를 끌기 위해 사용-->
</body>
</html>
document 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수와 전역변수</title>
</head>
<body>
<h3>지역변수와 전역변수</h3>
<hr>
<script>
var x=100; // 전역변수
function f(){ //함수 f() 선언
var x=1; // 지역변수
document.write("지역변수 x="+x);
document.write("<br>");
document.write("전역변수 x="+this.x);
}
f(); // 함수 f() 호출
</script>
</body>
</html>
this는 script 전체를 말한다.
그냥 x 라고 하면 내부에 있는것 (지역변수)를 우선한다.
document를 이용해서 script를 작성하면서
그 내부에서 바로 글을 작성 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바 스크립트 코드</title>
<script>
function over(obj) {
obj.style.background = "yellow";
}
function out(obj) {
obj.style.background = "white";
}
function over2(obj) {
obj.style.background = "#cccc66";
}
function out2(obj) {
obj.style.background = "#aa6699";
}
function over3(obj){
obj.style.background="pink";
obj.style.border="dotted red";
}
function out3(obj){
obj.style.background="green";
}
</script>
</head>
<body>
<h3>마우스를 올려보세요</h3>
<hr>
<div onmouseover="over(this)" onmouseout="out(this)">
여기에 마우스를 올리면 배경색이 노랑으로 변합니다.</div>
<p>
<div onmouseover="over2(this)" onmouseout="out2(this)">
여기에 마우스를 올리면 배경색이 바뀝니다.
</div>
</p>
<p>
<div onmouseover="over3(this)" onmouseout="out3(this)">
여기에 마우스를 올리면 배경색이 바뀝니다.
</div>
</p>
</body>
</html>| over | out |
 |
 |
세번째 것을 보면 over에서 dotted를 하고나서 out을 했을때 dotted가 사라지지 않는다.
out에서 변화를 준 것만 변화되고 나머지는 남아있게 된다.
상수 & 여러가지 연산들
상수의 표현들
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상수</title>
</head>
<body>
<h3>상수</h3>
<hr>
<script>
var oct =015; // 015는 8진수, 10진수로는 13이다.
var hex=0x15; // 0x15는 16진수, 10진수로는 21
var condition = true;
document.write("8진수 015는 십진수로"+oct+"<br>");
document.write("16진수 0x15는 십진수로"+hex+"<br>");
document.write("condition은"+condition+"<br>");
document.write('문자열 : 단일인용부호로도 표현'+"<br>");
document.write('그녀는 "누구세요"라고 했습니다.');
</script>
</body>
</html>| 출력 모습 | true 를 True로 적을경우 에러가 발생한다. True는 정의되지 않았다고 뜬다. js는 대소 문자를 구분한다. |
 |
 |
산술연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>산술 연산</title>
</head>
<body>
<h3>산술 연산</h3>
<hr>
<script>
var x=32;
var total=100+x*2/4-3; //total은 113
var div =x/10 // 3.2
var mod = x%2; //0
document.write("x : "+x+"<br><br>");
document.write("100+x*2/4-3 = "+total+"<br>");
document.write("x/10 = "+div+"<br>");
document.write("x%2 = "+mod+"<br>");
</script>
</body>
</html>
대입연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>대입 연산</title>
</head>
<body>
<h3>대입 연산</h3>
<hr>
<script>
var x=3, y=3, z=3;
document.writeln("x = "+x+", y = "+y);
document.write(", z= "+z+"<br><br>");
x+=3 ; //6
y*=3;//9
z%=2;//1
document.write("x+=3; 실행후, x = "+x+"<br>");
document.write("y*=3; 실행후, y = "+y+"<br>");
document.write("z%=2; 실행후, z = "+z+"<br>");
</script>
</body>
</html>
write 와 writeln의 차이점
: <pre> 태그안에 감싸면 writeln은 개행이 이루어진다.
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>대입 연산</title>
</head>
<pre>
<h3>대입 연산</h3>
<hr>
<pre>
<script>
var x=3, y=3, z=3;
document.writeln("x = "+x+", y = "+y);
document.write(", z= "+z+"<br><br>");
x+=3 ; //6
y*=3;//9
z%=2;//1
document.write("x+=3; 실행후, x = "+x+"<br>");
document.write("y*=3; 실행후, y = "+y+"<br>");
document.write("z%=2; 실행후, z = "+z+"<br>");
</script>
</pre>
<pre>
<script>
document.writeln("줄바뀜1, ");
document.writeln("줄바뀜2, ");
document.write("안바뀐다, ");
document.write("안바뀐다2, ");
</script>
</pre>
</body>
</html>
비교연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비교 연산</title>
</head>
<body>
<h3>비교연산</h3>
<hr>
<script>
var x=13, y=7;
document.write("x = "+x,", y = "+y+"<br><br>");
document.write("x==y : "+(x==y)+"<br>");
document.write("x!=y : "+(x!=y)+"<br>");
document.write("x>=y : "+(x>=y)+"<br>");
document.write("x>y : "+(x>y)+"<br>");
document.write("x<=y : "+(x<=y)+"<br>");
document.write("x< y : "+(x<y)+"<br>");
</script>
</body>
</html>
논리연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>논리 연산자</title>
</head>
<body>
<h3> 논리 연산자</h3>
<hr color="green">
<script>
var x = true, y = false;
document.write("x = " + x + ", y = " + y + "<br><br>");
document.write("x&&y : " + (x && y) + "<br>");
document.write("x||y : " + (x || y) + "<br>");
document.write("!x : " + (!x) + "<br>");
document.write("<hr color=red size=5>");
document.write("(3>2)&&(3<4) : " + ((3 > 2) && (3 < 4)) + "<br>");
document.write("(3==-2)||(-1<0): " + ((3 == -2) || (-1 < 0)) + "<br>");
</script>
</body>
</html>
조건연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>조건 연산</title>
</head>
<body>
<h3>조건연산</h3>
<hr>
<script>
var a=33, b=55;
var ccc =(a>b)?(a-b) : (b-a);
document.write("a = "+a+", b = "+b+"<br><br>");
document.write("두수의 차이1 : "+((a>b)?(a-b) : (b-a)) +"<br>");
</script>
</body>
</html>
(문제) 45,67,89,27,78,93 중에서 가장 큰 수와 가장 작은 수를 추출하시오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--45,67,89,27,78,93 중에서 가장 큰 수와 가장 작은 수를 추출하시오-->
<script>
var a=45,b=67,c=89,d=27,e=78,f=93;
var max =a, min=a;
function maxval(num){
max=(max>num)? max : num;
}
function minval(num){
min=(min<num)? min : num;
}
maxval(a); maxval(b); maxval(c); maxval(d);
maxval(e);maxval(f);
document.write("최대값 : "+max);
document.write("<br><br>")
minval(a); minval(b); minval(c); minval(d);
minval(e); minval(f);
document.write("최소값 : "+min);
</script>
</body>
</html>
제일 처음 들어가는 수 a를 기준으로 연산
사실 a에 대해서는 함수를 불러주지 않아도 된다.
이방법이 아니더라도 삼항연산자를 모든 수에 대해서 차례로 적어주는 방법도 있다.
비트연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비트 연산</title>
<script>
function digit8(v) {// 숫자v를 8비트 2진수로 변환
var str = "";
for (i = 0; i < 8; i++, v <<= 1) { //v<<=1 : 1칸씩(1비트씩) 앞으로 밀어내면서 연산
if ((v & 0x80)) str += "1";
else str += "0";
}
return str;
}
</script>
</head>
<body>
<h3>비트 논리 연산과 시프트연산</h3>
<hr>
<script>
var x = -1, y = 3;
document.write("<pre>");
document.write("x = " + x + ", y = " + y + "<br>");
document.write("x : " + digit8(x) + "<br>");
document.write("y : " + digit8(y) + "<br>");
document.write("<hr>");
document.write("x & y : " + digit8(x & y) + "<br>"); // & 값이 같을때 참 1
document.write("x | y : " + digit8(x | y) + "<br>"); // 값이 다르때 참 1
document.write("x ^ y : " + digit8(x ^ y) + "<br>");
document.write("~x : " + digit8(~x) + "<br>"); // 1과 0을 바꿈
document.write("<hr>")
document.write("x << 1 : " + digit8(x << 1) + "(" + (x << 1) + ")<br>"); // 1바트씩 우에서 좌로 이동
document.write("x >> 1 : " + digit8(x >> 1) + "(" + (x >> 1) + ")<br>"); // 1비트씩 좌에서 우로 이동
document.write("x >>> 1 : " + digit8(x >>> 1) + "(" + (x >>> 1) + ")<br>");
/* false, undefined, null, 0,NaN, 또는 빈 스트링("")이 아닌 모든 값,
그리고false 값인 블린형 객체를 포함하는
모든 객체는 조건으로 사용 될 때 truthy로 간주된다. */
</script>
</body>
</html>
문자열 연산
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열 연산</title>
</head>
<body>
<h3> 문자열 연산 </h3>
<hr>
<script>
document.write("abc" + 23 +"<br>"); //abc23
document.write(23 + "abc" +"<br>"); //23abc
document.write( 23 +"35"+"<br>"); //2335
document.write(23+ 35 +"<br>");//58
document.write( 23+35+"abc" +"<br>"); //58abc
document.write("abc" + 23 +35+"<br>"); //abc2335
var name ="seoul";
document.write(name == "korea"); //false
document.write("<br>");
document.write(name < "seout"); //false
/*
!=, ==, >, <, <=, >= 는 문자열 비교에 그대로 사용되며
사전에서 나오는 뒤에 나오는 문자열을 크다고 판단한다. (사전 순서 기준)
*/
</script>
</body>
</html>
문자열과 숫자 연산은 문자열 취급
숫자 숫자 문자열 이면 앞에서 부터 연산하므로 숫자연산을 먼저 하고 문자열이 연산됨
(자바와 동일)