[JSP & Servlet] 자바스크립트(JavaScript)기초
by 무작정 개발반응형
2022.02.09(33일 차)
오늘은 오전에 javascript의 기초를 배우고 오후에는 JSP기초를 배웠다.
이번에는 javascript는 기초만 배우고 나머지는 후반부에 리엑트를 배울 때 깊게 배운다고 말씀하셨다.
그래서 javascript와 jsp를 나눠서 블로그에 나눠서 정리하기로 했다.
오늘의 수업 내용
Javascript (자바스크립트)
자바스크립트란?
자바스크립트는 정적인 HTML 문서와 달리 동적인 화면을 웹페이지에 구현하기 위해 사용하는 스크립트 언어이다. 웹 사이트는 크게 3가지로 구성되는데 HTML, CSS, Javascript(자바스크립트)이다. HTML은 뼈대를, CSS는 디자인, Javascript는 웹페이지의 동작을 담당한다. 자바스크립트는 버전이 존재하는데 ES5, ES6, ES7 등 버전이 존재한다. 자세한 내용은 다음에 다룰 예정이다.
Javascript 문법
자바스크립트 문법은 c언어, java 등이랑 크게 다른 점이 없다.
- ex) 숫자와 문자, 변수, 조건문, 반복문, 함수, 배열 등
자바스크립트에서는 변수는 var로 선언한다. 그리고 변수는 따로 자료형이 없다.
<%@ 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>
<script type="text/javascript">
//변수
var str; // 변수 선언 자바스크립트는 자료형이 없다.
str = "변수 선언 후 값 대입";
document.write(str + "<br/>"); // JS에서 출력하는 방법 / 자바의 system.out.print랑 같은 뜻
document.write("-------------<br/>");
var str1;
str = '문자열';
document.write(str + ":" + typeof(str) + "<br/>");
str = 123;
document.write(str + ":" + typeof(str) + "<br/>");
str = true;
document.write(str + ":" + typeof(str) + "<br/>");
document.write("-------------<br/>");
//alert("바보");
var hello = "hello1 전역변수"; // 변수 앞에 var를 붙이면 전역변수(멤버변수)
//js에서는 메서드라 하지 않고 함수라 한다.
function thisFunc() {
//지역 변수
var hello = "hello2 지역변수";
global = "global전역변수"; //함수 안에 전역변수를 만들때는 var를 안쓴다.
var local = "local 지역변수";
document.write(hello + "<br/>");
document.write(global + "<br/>");
document.write(local + "<br/>");
document.write("<br/><br/>");
}
//함수는 호출을 해야 실행 가능
thisFunc();
document.write(hello + "<br/>");
document.write(global + "<br/>");
//document.write(local + "<br/>"); //애는 출력안됌. / local은 지역변수이기때문
document.write("<br/><br/>");
document.write("<br/>-------------<br/>");
var num1=10, num2=3;
document.write("num1+num2=" + (num1+num2) + "<br/>");
document.write("num1-num2=" + (num1-num2) + "<br/>");
document.write("num1*num2=" + (num1*num2) + "<br/>");
document.write("num1/num2=" + (num1/num2) + "<br/>");
document.write("num1%num2=" + (num1%num2) + "<br/>");
document.write("num1>num2=" + (num1>num2) + "<br/>");
document.write("num1>num2=" + (num1>num2) + "<br/>");
document.write("num1==um2=" + (num1==num2) + "<br/>");
document.write("num1!=num2=" + (num1!=num2) + "<br/>");
document.write("<br/>-------------<br/>");
var ans;
ans = 10;
if(ans>0){
document.write(ans+": 양수입니다.");
} else if {
document.write(ans + ": 음수입니다.");
} else {
document.write(ans + ": 0 입니다.");
}
document.write("<br/>-------------<br/>");
for(var i=1; i<=10; i++) {
document.write(i + "<br/>");
}
document.write("<br/>-------------<br/>");
var j=1;
while(j<=10){
document.write(j + "\t");
j++;
}
</script>
</head>
<body>
</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>
<script type="text/javascript">
//testFunc();
document.write("함수 외부...<br/>");
function testFunc() {
alert("함수 내부...<br/>");
}
</script>
</head>
<body onload="testFunc();"> <!-- body에서 함수 호출 가능!!! -->
이부분은 HTML입니다.
</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>
<script type="text/javascript">
function idpwCheck() {
//단축 아이콘 만들기
var f = document.myForm; // 오른쪽 단어를 f로 함축시켜 놓은 것
//if(!f.id.value)이렇게 단순하게 바꿀 수 있다.
if(document.myForm.id.value == ""){
alert("아이디를 입력하세요!");
document.myForm.id.focus(); //아이디에 커서를 갖다놔라.
return; // 아이디입력을 안했는데 비밀번호로 넘어가면 안되니 return씀
}
if(f.pwd.value == ""){
alert("패스워드를 입력하세요!");
f.pwd.focus(); //아이디에 커서를 갖다놔라.
return;
}
alert("로그인 성공!!");
}
</script>
</head>
<body>
<!-- form 양식/form은 고유 이름이 있어야 한다. -->
<form action="" name="myForm">
<table style="font-size: 10pt; font-family: 돋움;" cellpadding="3">
<tr>
<td><b>아이디</b></td>
<td><input type="text" style="width: 100px; height: 22px;" name="id"/>
</td>
<td></td>
</tr>
<tr>
<td><b>비밀번호</b></td>
<td><input type="password" style="width: 100px; height: 22px;" name="pwd"/>
</td>
<td>
<a href="javascript:idpwCheck();">
<img src="../html1/image/btn_login.gif"></a></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="checkbox">아이디 저장
<input type="checkbox" checked="checked">보안 접속
</td>
</tr>
<tr height="1">
<td colspan="3" bgcolor="#dad6d7"></td>
</tr>
</table>
<a href="javascript:idpwCheck();">로그인</a>
<input type="button" value="로그인" onclick="idpwCheck();"/>
<button onclick="idpwCheck();">로그인</button>
</form>
</body>
</html>
나머지 실습 소스는 깃허브에 업로드 했다.
https://github.com/chaehyuenwoo/HTML_CSS/tree/master/WebContent/html2
GitHub - chaehyuenwoo/HTML_CSS: HTML/CSS 기초공부
HTML/CSS 기초공부. Contribute to chaehyuenwoo/HTML_CSS development by creating an account on GitHub.
github.com
반응형
'Back-End > JSP & Struts & JDBC' 카테고리의 다른 글
| [JSP] Redirect, Forward, Session(세션) (5) | 2022.02.10 |
|---|---|
| [JSP & Servlet] JSP기초, get 방식, post 방식 (0) | 2022.02.10 |
| [JSP & Servlet] HTML기초 (0) | 2022.02.08 |
| [JSP & Servlet] 톰캣(Apache Tomcat) 설치 & JSP 초기 세팅 (0) | 2022.02.07 |
| [JDBC] PreparedStatement문, CallableStatement, 성적 입력 프로그램 만들기 (0) | 2022.02.07 |
블로그의 정보
무작정 개발
무작정 개발