본문 바로가기
JSP

230206_기본

by 경 훈 2023. 2. 6.

html : 문서  : 정적

css  : 포장  : 정적

자바스크립트  :  동적

*자바와는 무관

인터프리터

 : 라인을 입력하고 엔터를 치면 결과가 나오는 방식

컴파일러

 : 처음부터 종료시까지 한꺼번에 실행하는 방식

 

자바스크립트 프로그램에서 출력하는 3가지 방식

1. DOCUMENT.WRITE : 자바스크립트 프로그램 내에서 출력

2. ALERT()

3. CONSOLE.LOG() : 개발도구의 콘솔에서 확인

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
	let a=3; // var a=3;
	document.write("a ="+a); // 프로그램 내에서 출력
	console.log(a); // 개발자 도구에서 확인
	alert(a); // 경고장
	//키보드로 두개의 수를 입력
	let a = parseInt(prompt("첫번째 입력",));
	let b = parseInt(prompt("두번째 입력",));
	let hap = a+b;
	var aa= confirm("정답입니까?"); //확인과 취소
	if(aa)
		{
			document.write("정답이 맞습니다!");
		}
	else
		{
			document.write("틀렸어요!");
		}
        
        
    var id = "easy";
	var pw = "1234";
	var user_id = prompt("아이디는?","");
	var user_pw = prompt("비밀번호는?","");
	if(id ==user_id) {
		if(pw == user_pw) {
			document.write(user_id+"님 반갑습니다.")
		}
		else {
			alert("비밀번호가 일치하지 않습니다.");
			location.reload();
		}
	}
	else {
		alert("아이디가 일치하지 않습니다");
		location.reload();
	}
    
    let a = parseInt(prompt("첫번째 입력",));
	let b = parseInt(prompt("두번째 입력",));
	let c = parseInt(prompt("세번째 입력",));
	var result = (a>b)?((a>c)?a:c):(b>c)?b:c;
	document.write(result);
    
    //객체만들기 my 객체가 생성 키:값 => map구조와 동일
	let my ={ //ajax 비동기전송..json방식이용
			name:"홍길동",
			age:33,
			kor:78,
			eng:90}
	
	document.write("이름 : "+my.name+"<br>나이 : "+my.age+"<br>국어 : "+my.kor+"<br>영어 : "+my.eng+"<br>");
	document.write("총점 : "+(my.kor+my.eng));
</script>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//실행부
function aaa(a,b) {
	var sum = 0;
	for(var i=a;i<=b;i++) {
		sum = sum +i;
	}
	return sum;
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
//호출부 1-100까지의 합을 알려달라는 함수를 작성해서 결과를 출력
var hap = aaa(1,50);
document.write("1~50 합은 :"+hap);
</script>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//실행부
function aaa(a,b) {
	var sum = a+b;
	return sum;
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
//키보드에서 임의의 수 2개를 입력받아 합을 돌려받아 출력하는 프로그램
	var a = parseInt(prompt("첫번째 입력",));
	var b = parseInt(prompt("두번째 입력",));
	var hap = aaa(a,b);
	document.write(a+"+"+b+"합은 "+hap)
</script>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type="text/javascript">
//실행부
function aaa() {
	var f=document.form1;
	/*
	//자바스크립트 방식
	var a = parseInt(f.first.value);
	var b = parseInt(f.second.value);
	*/
	//Jquery 제이쿼리 방식 ..1. 제이쿼리 다운 2.CDN
	var a=parseInt($("#first").val());
	var b=parseInt($("#second").val());
	document.write(a+b);
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form name="form1" action="">
		첫번째수 : <input type="text" name="first" id="first"><br>
		두번째수 : <input type="text" name="second" id="second"><br>
		<input type="button" value="입력전송" onclick="aaa()">
	</form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function call1() {
	document.write("1번 눌렀습니다");
	location.reload();
}
function call2() {
	document.write("2번 눌렀습니다");
	window.location='js2.jsp';
}
function call3() {
	document.write("3번 눌렀습니다");
	location.reload();
}
function call4() {
	document.write("4번 눌렀습니다");
	location.reload();
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button onclick="call1()">1</button>
	<input type="button" value="2" onclick="call2()">
	<input type="button" value="3" onclick="call3()">
	<input type="button" value="4" onclick="call4()">
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>
	<p id="now1">현재날짜와 시간</p>
	<br><br><br><br><br><br><br>
	<p id="now2">현재날짜와 시간</p>
</h1>	
<script type="text/javascript">
	function timer1() {
		var nowtime = document.getElementById("now1");
		//nowtime.innerHTML = (new Date()).toLocaleString();		//날짜와시간
		nowtime.innerHTML = (new Date()).toLocaleDateString();	//날짜
		//nowtime.innerHTML = (new Date()).toLocaleTimeString();	//시간
	}
	function timer2() {
		var nowtime = document.getElementById("now2");
		nowtime.innerHTML = (new Date()).toLocaleTimeString();	//시간
	}
	setInterval("timer1()",1000); //timer()를 1초간격 호출해서 실행
	setInterval("timer2()",1000); //timer()를 1초간격 호출해서 실행
</script>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	var files = ["./image/dish1.jpg","./image/dish2.jpg",
		"./image/dish3.jpg","./image/dish4.jpg",
		"./image/dish5.jpg","./image/bg1.jpg",
		"./image/bg2.jpg","./image/bg3.jpg"]
	var img = new Array();
	for(var i=0;i<files.length;i++) {
		img[i]=new Image(); //그림을 인식 지원
		img[i].src=files[i];
	}
	var po=0; //파일 위치값
	function picture(obj) {
		obj.src=img[po].src
		po++; //위치값을 1씩 증가
		if(po>=files.length)
			po=0;
	}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>사진앨범</h1>
	<img src="image/fantasy.jpg" width="400px" height="300px" onclick="picture(this)">
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function change() {
	s=document.getElementById("apple");
	s.onmouseover=over;
	s.onmouseout=out;
}
function over() {
	s.style.width="50%";
	s.style.height="50%";
}
function out() {
	s.style.width="5%";
	s.style.height="5%";
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<img src="image/apple.jpg" onmouseover="change()" id="apple" width="400px" height="300px">
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function load() {
	var s = document.getElementById("site");
	window.location = s.options[s.selectedIndex].value;
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	싸이트 선택:
	<select name="site" id="site">
		<option value="http://www.google.com">구글</option>
		<option value="http://www.naver.com">네이버</option>
		<option value="http://www.daum.net">다음</option>
	</select>
	<button onclick="load()">웹사이트접속</button>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function start(time) {
	timeid = setTimeout("load('http://www.naver.com')", time);
	document.getElementById("fanta").title="시작";
}
function cancelTime() {
	clearTimeout(timeid);
}
function load(url) {
	window.location = url;
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<img src="image/fantasy.jpg" id="fanta" 
	onmouseover="start(3000)" 
	onmouseout="cancelTime()">
</body>
</html>

'JSP' 카테고리의 다른 글

230208_서블릿  (0) 2023.02.08
230207_기본  (0) 2023.02.07
230203_DB  (0) 2023.02.03
230202_DB  (0) 2023.02.02
230201_DB  (0) 2023.02.01

관련글

댓글

티스토리툴바