[js,jQuery]JavaScript,jQueryベース
こんにちは!😀 今日はJavaScriptベースとjQueryベースをご紹介します.
javascript
javascript
JavaScriptは、WebブラウザのJavaScriptソースコードを読み取り、処理するための解析器によって駆動されます.
JavaScriptはタグを使用してWebドキュメントに作成されます.
JAvascript:オブジェクト
JavaScriptでは、オブジェクトはプログラムが認識できるすべてのターゲットを指します.JavaScriptは,WebサイトやWebアプリケーションによって開発された言語であるため,Web関連のすべてのターゲットが対象とされている.ドキュメントオブジェクトモデル:Documentオブジェクトモデル、Webドキュメント自体(ドキュメント)、画像imgなど... ブラウザ関連オブジェクト:ブラウザモデルオブジェクト:BOM、Webブラウザで使用される情報画面、navigatorなど... 内蔵オブジェクト:Webプログラミングでよく使われる要素(オブジェクト、String...) その他対象:JSON等 javascript : Browser Model Object(브라우저 객체 모델)
ソース:레드아이님의 블로그 : JavaScript 브라우저 객체 모델2 ✔JavaScriptのブラウザオブジェクトモデルの最上位要素はwindowです.ブラウザウィンドウを開くたびに作成されます.
Windowsオブジェクトコンポーネント説明navigatorが現在使用しているブラウザの「情報履歴」現在ウィンドウで、ユーザーのアクセス履歴を現在ページのURL情報screenが現在使用している画面情報ドキュメントWebドキュメントの各ドキュメントに1つずつ保存し、bodyタグに遭遇すると1つ作成します.
Windowsオブジェクトコマンドバーopen("URL", "새창이름","새창옵션")
alter(data)
prompt("질문", "답변")
confirm("질문내용")
moveTo(x,y)
resizeTo(sidth, height)
setInterVal(function(){자바스크립트 코드}, 일정시간 간격)
setTimeout(function(){자바스크립트 코드}, 일정시간 간격)
navigatorオブジェクトコマンドnavigator.userAgent // 브라우저와 운영체제 정보
historyオブジェクトコマンドhistory.length // 방문 기록에 저장된 목록의 개수
history.back(n) // 이전 방문 사이트로 이동
hitory.go(n) // n번째로 이동. +,-
locationオブジェクトコマンドlocation.href // URL을 반환한다
location.hash // URL 해시값(#에 명시된 값)
location.hostname // 호스트 이름
location.protocol // 프로토콜
location.search // 쿼리 스트링
location.reload() // 브라우저 F5 새로고침 기능
screenオブジェクトコマンドscreen.width // 화면 너비
screen.height // 화면 높이
screen.availWidth // 작업 표시줄 제외한 화면 너비
screen.availHeight // 작업 표시줄 제외한 화면 높이
screen.colorDepth // 사용자 모니터 컬러 bit
javascript : Document Object Model(문서 객체 모델)
Document Object Model
Document Object Model(DOM)では、JavaScriptを使用してWebドキュメントにアクセスおよび制御できます.
オブジェクトを使用してWebドキュメントを整理する方法.
DOMは、Webドキュメントをオブジェクトとして定義します.Webドキュメント全体がドキュメントオブジェクトであり、テキスト、画像、テーブルなどのすべての要素がオブジェクトです.
DOM要素へのアクセス
HTML要素(HTML Collection)の関数をインポートします.
✔idセレクタ:document.getElementById(「id名」)
✔classセレクタ:document.getElementById(「クラス名」)
✔ラベル名セレクタ:document.getElementById(「ラベル名」)
javascript의 변수와 함수
JavaScriptのデータ型にはvar、let、constがあります.letは関数ブロックでのみ使用可能な変数であり、contは定数として機能する変数である.
java vs javascriptString s="a";
char c='a';
int i=2000;
Javaでは、文字列変数はString、文字変数はchar、整数変数はintまたはlongを使用しますが、javascriptではvarを統一的に使用できます.var i=2000;
var s="a";
var c='a';
JAvascript:変数の例<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script 연습</title>
<script type="text/javascript">
window.alert("자바스크립트 연습 시작");
</script>
<style type="text/css">
*{
margin:30;
width:500;
}
</style>
</head>
<body>
<script type="text/javascript">
window.document.write("자바스크립트 변수 연습 시작");
// 자바스크립트에서 변수는 var로 통일한다.
// 자바와는 다르게 변수를 따로 선언해주지 않아도, 알아서 변수 타입을 지정해준다.
var i=2000;
console.log("i >>> : "+i);
console.log("typeof(i) >>> : "+typeof(i));
var s="a";
console.log("s >>> : "+s);
console.log("typeof(s) >>> : "+typeof(s));
var c='a';
console.log("c >>> : "+c);
console.log("typeof(c) >>> : "+typeof(c));
</script>
</body>
</html>
開発者ツールコンソール出力結果i >>> :
typeof(i) >>> : number
s >>> : a
typeof(s) >>> : string
c >>> : a
typeof(c) >>> : string
特に、Javaでは、単一クエリー("")がchar、二重クエリー("")がStringとなります.
JavaScriptでは両方ともstringです.
JAvascript:各種関数の使用
JavaScriptは複数の関数をサポートします.
JavaScript関数の例は、関数の関数名(){文;}を示します.関数を宣言するときは、関数保持語とカッコ{}を使用します.function(){}関数名のない関数(匿名関数).var変数=関数(){}はテキストとして定義できます.(関数(){コマンド}();関数を即時実行します.(パラメータ)=>{関数内容}矢印関数
JAvascript:各種関数の使用例<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script 연습</title>
<script type="text/javascript">
window.alert("자바스크립트 연습 시작");
</script>
<style type="text/css">
*{
margin:30;
width:500;
}
</style>
</head>
<body>
<script type="text/javascript">
window.document.write("자바스크립트 함수 연습 시작");
function add(a, b){
return a+b;
}
function minus(a,b){
return a-b;
}
function multiply(a, b){
return a*b;
}
function devide(a,b){
return a/b;
}
document.write("두 수의 합 (10, 5) >>> : "+add(10, 5)+"<br>");
document.write("두 수의 차 (10, 5) >>> : "+minus(10, 5)+"<br>");
document.write("두 수의 곱 (10, 5) >>> : "+multiply(10, 5)+"<br>");
document.write("두 수의 나눗셈 (10, 5) >>> : "+devide(10,5)+"<br>");
</script>
<br>
<hr>
<br>
<script type="text/javascript">
window.document.write("자바스크립트의 다양한 함수들");
document.write("익명 함수는 함수의 이름이 없다."+"<br>");
// 익명 함수
var vadd=function(a,b){
return a+b;
}
document.write("익명 함수 더하기 (10, 5) >>> : "+vadd(10, 5)+"<br>");
document.write("즉시 실행 함수는 함수의 결과로 변수로 할당하지 않고 바로 실행한다."+"<br>");
// 즉시 실행 함수
(function(){console.log("즉시 실행 함수")})
document.write("화살표 함수는 호출 하면 바로 return 값이 호출 된다."+"<br>");
var hi = () => {return "저는 화살표 함수 입니다.";}
document.write("화살표 함수 호출 >>> hi() >>> : "+hi()+"<br>");
document.write("let은 함수 블럭에서만 사용이 가능하다. "+"<br>");
let say=()=>alert("hi!!");
say();
// 함수 줄여서 쓰기
var add=(a,b)=>a+b;
var minus=(a,b)=>a-b;
var multiply=(a,b)=>a*b;
var devide=(a,b)=>a/b;
document.write("add(10,5) >>> : "+add(10,5)+"<br>");
document.write("minus(10,5) >>> : "+minus(10,5)+"<br>");
document.write("multiply(10,5) >>> : "+multiply(10,5)+"<br>");
document.write("devide(10,5) >>> : "+devide(10,5));
</script>
</body>
</html>
ドキュメント出力結果
JavaScriptオブジェクト文字でオブジェクトを作成するJavaScriptオブジェクト文字でオブジェクトをさくせいする:文字オブジェクトもじおぶじぇくと// 앞뒤 생략
console.log("자바스크립트의 객체 : 객체 리터럴로 객체 생성하기");
var card={suit:"하트",rank:"A"};
var card1={"suit":"하트", "rank":"A"};
// 객체 리터럴, 리터럴 객체 : {....}
// 변수 card
// property 이름 : suit, "suit"
// property 값 : "하트", "A"
console.log("typeof(card) >>> : "+typeof(card));
console.log("typeof(card1) >>> : "+typeof(card1));
console.log("card의 suit 키의 값 >> : "+card.suit);
console.log("card1의 suit 키의 값 >> : "+card1.suit);
console.log("card의 rank 키의 값 >> : "+card.rank);
console.log("card1의 rank 키의 값 >> : "+card1.rank);
JavaScriptでは、オブジェクト文字を使用してオブジェクトを作成できます.オブジェクトテキストは{}でkeyとvalue形式に設定できます.
属性値を{属性名:[属性値]}に、属性値を{属性名:[属性値]}に設定できます.
開発者ツールコンソール出力結果자바스크립트의 객체 : 객체 리터럴로 객체 생성하기
typeof(card) >>> : object
typeof(card1) >>> : object
card의 suit 키의 값 >> : 하트
card1의 suit 키의 값 >> : 하트
card의 rank 키의 값 >> : A
card1의 rank 키의 값 >> : A
jQuery
jQueryはJavaScriptを関数とするライブラリです.
jQuery 공식 홈페이지 바로가기 CDN : Content Deliveery Network
CDNは、Webサイトの訪問者がコンテンツをダウンロードする際に、最近のサーバから自動的にコンテンツをダウンロードできるようにする技術です.// jQuery 불러오기
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
jQueryコマンド起動例
jQueryは$(ドキュメント)です.使用可能なフォーマットはready()であり、それ以外にも様々な方法があります.$(document).ready(function(){});
window.jQuery(document).ready(function(){});
jQuery(document).ready(function(){});
window.$(document).ready(function(){});
jQuery 함수 체이닝 기법
jQueryは、スクリプトブロックready関数ブロックに関数を接続および使用することができる.
jQuery使用例// 앞뒤 생략..
// $(document).ready(function(){});
$(document).ready(function(){
// $("#아이디명").click(function({});
$("#아이디명").click(function({
// $("#아이디명).attr({}).submit();
$("#아이디명).attr(
{
"action":"#",
"method":"GET"
}
).submit();
});
// $("#아이디명").click(function(){});
$("#아이디명").click(function(){
var 변수명=$("#아이디명");
변수명.attr("action", "#");
변수명.attr("method", "GET");
변수명.submit();
});
});
jQuery起動のキーワード$ : jQuery를 시작하는 키워드
#아이디명 : css 선택자에서 #아이디명 : 태그의 id 속성의 이름을 가르킵니다.
$("#아이디명") :jQuery 함수를 이용해서 CSS 선택자를 이용해서 DOM Tree Node List(태그 요소 노드, 내용 텍스트 노드, 속성 노드)에서 아이디 속성의 값을 찾습니다.
$("#노드명") : html 웹 문서의 DOM Tree 노드 리스트에서 아이디 속성값이 노드명인 노드를 찾습니다.
$("#노드명").click(); : html 웹 문서의 DOM Tree 노드 리스트에서 아이디 속성값이 노드명인 노드를 찾아서 click 이벤트를 수행합니다.
jQuery 활용 예제
HTML FORMタグを使用してIDとパスワードを入力し、jQueryを使用してJSPファイルに移動します.
JSPファイルは、WebサーバからWebアプリケーションサーバ(WAS)にデータを転送し、JDBCがOracleDBに関連付けられているJAVAクラスにジェネレータを作成し、情報を表示します.
html, css, javascript, jQuery <=> JSP <=> java <=> Oracle DB
今回のリリースでは、あなたのIDとパスワードを受信し、jQueryのJSPファイルに移動して、JSPファイルに入力したIDとパスワードを出力します.
jQueryPractice.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 테스트</title>
<style type="text/css">
*{
width:500px;
margin:10px auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login_btn").click(function(){
$("#login").attr(
{
"action":"/firstWeb/cgiForm/jQueryPractice.jsp",
"method":"GET"
}
).submit();
});
});
</script>
</head>
<body>
<fieldset>
<h3>로그인서비스</h3>
<hr>
<form name="login" id="login">
아이디 : <input type="text" name="uid" id="uid"/>
<hr>
비밀번호 : <input type="password" name="upw" id="upw"/>
<hr>
<input type="button" id="login_btn" value="로그인하기">
<input type="reset" value="취소">
</form>
</fieldset>
</body>
</html>
画面
jQueryPractice.html<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Check</title>
</head>
<body>
<h3>Login Check</h3>
<hr>
<%= "Login Check를 시작합니다." + "<br>"%>
<%
String uid=request.getParameter("uid");
String upw=request.getParameter("upw");
%>
<%= "입력된 아이디는 : "+uid+"입니다."+"<br>" %>
<%= "입력된 비밀번호는 : "+upw+"입니다."+"<br>" %>
</body>
</html>
ログイン結果
この値は、データベースでアイデンティティとパスワードをクエリーした後、エラーが発生した場合はjavascriptのhistoryです.go(-1)コマンドを使用して後退することもできます.
正しい場合、JavaScriptのlocation.hrefコマンドで次のホームページに移動することもできます.
JavaScript、jQuery、JSP、javaは、データベースクエリから画面出力までさまざまな用途で使用できます.
ここまで[js,jQuery javascript,jQuery基礎位置決めを完了する.😀
Reference
この問題について([js,jQuery]JavaScript,jQueryベース), 我々は、より多くの情報をここで見つけました
https://velog.io/@yunyoseob/js-jQuery-javascript-jQuery-기초
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
JAvascript:オブジェクト
JavaScriptでは、オブジェクトはプログラムが認識できるすべてのターゲットを指します.JavaScriptは,WebサイトやWebアプリケーションによって開発された言語であるため,Web関連のすべてのターゲットが対象とされている.
javascript : Browser Model Object(브라우저 객체 모델)
Windowsオブジェクトコンポーネント説明navigatorが現在使用しているブラウザの「情報履歴」現在ウィンドウで、ユーザーのアクセス履歴を現在ページのURL情報screenが現在使用している画面情報ドキュメントWebドキュメントの各ドキュメントに1つずつ保存し、bodyタグに遭遇すると1つ作成します.
Windowsオブジェクトコマンドバー
open("URL", "새창이름","새창옵션")
alter(data)
prompt("질문", "답변")
confirm("질문내용")
moveTo(x,y)
resizeTo(sidth, height)
setInterVal(function(){자바스크립트 코드}, 일정시간 간격)
setTimeout(function(){자바스크립트 코드}, 일정시간 간격)navigator.userAgent // 브라우저와 운영체제 정보history.length // 방문 기록에 저장된 목록의 개수
history.back(n) // 이전 방문 사이트로 이동
hitory.go(n) // n번째로 이동. +,-location.href // URL을 반환한다
location.hash // URL 해시값(#에 명시된 값)
location.hostname // 호스트 이름
location.protocol // 프로토콜
location.search // 쿼리 스트링
location.reload() // 브라우저 F5 새로고침 기능screen.width // 화면 너비
screen.height // 화면 높이
screen.availWidth // 작업 표시줄 제외한 화면 너비
screen.availHeight // 작업 표시줄 제외한 화면 높이
screen.colorDepth // 사용자 모니터 컬러 bitjavascript : Document Object Model(문서 객체 모델)
Document Object Model
Document Object Model(DOM)では、JavaScriptを使用してWebドキュメントにアクセスおよび制御できます.
オブジェクトを使用してWebドキュメントを整理する方法.
DOMは、Webドキュメントをオブジェクトとして定義します.Webドキュメント全体がドキュメントオブジェクトであり、テキスト、画像、テーブルなどのすべての要素がオブジェクトです.
DOM要素へのアクセス
HTML要素(HTML Collection)の関数をインポートします.
✔idセレクタ:document.getElementById(「id名」)
✔classセレクタ:document.getElementById(「クラス名」)
✔ラベル名セレクタ:document.getElementById(「ラベル名」)
javascript의 변수와 함수
JavaScriptのデータ型にはvar、let、constがあります.letは関数ブロックでのみ使用可能な変数であり、contは定数として機能する変数である.
java vs javascript
String s="a";
char c='a';
int i=2000;var i=2000;
var s="a";
var c='a';<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script 연습</title>
<script type="text/javascript">
window.alert("자바스크립트 연습 시작");
</script>
<style type="text/css">
*{
margin:30;
width:500;
}
</style>
</head>
<body>
<script type="text/javascript">
window.document.write("자바스크립트 변수 연습 시작");
// 자바스크립트에서 변수는 var로 통일한다.
// 자바와는 다르게 변수를 따로 선언해주지 않아도, 알아서 변수 타입을 지정해준다.
var i=2000;
console.log("i >>> : "+i);
console.log("typeof(i) >>> : "+typeof(i));
var s="a";
console.log("s >>> : "+s);
console.log("typeof(s) >>> : "+typeof(s));
var c='a';
console.log("c >>> : "+c);
console.log("typeof(c) >>> : "+typeof(c));
</script>
</body>
</html>i >>> :
typeof(i) >>> : number
s >>> : a
typeof(s) >>> : string
c >>> : a
typeof(c) >>> : stringJavaScriptでは両方ともstringです.
JAvascript:各種関数の使用
JavaScriptは複数の関数をサポートします.
JavaScript関数の例は、関数の関数名(){文;}を示します.関数を宣言するときは、関数保持語とカッコ{}を使用します.function(){}関数名のない関数(匿名関数).var変数=関数(){}はテキストとして定義できます.(関数(){コマンド}();関数を即時実行します.(パラメータ)=>{関数内容}矢印関数
JAvascript:各種関数の使用例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script 연습</title>
<script type="text/javascript">
window.alert("자바스크립트 연습 시작");
</script>
<style type="text/css">
*{
margin:30;
width:500;
}
</style>
</head>
<body>
<script type="text/javascript">
window.document.write("자바스크립트 함수 연습 시작");
function add(a, b){
return a+b;
}
function minus(a,b){
return a-b;
}
function multiply(a, b){
return a*b;
}
function devide(a,b){
return a/b;
}
document.write("두 수의 합 (10, 5) >>> : "+add(10, 5)+"<br>");
document.write("두 수의 차 (10, 5) >>> : "+minus(10, 5)+"<br>");
document.write("두 수의 곱 (10, 5) >>> : "+multiply(10, 5)+"<br>");
document.write("두 수의 나눗셈 (10, 5) >>> : "+devide(10,5)+"<br>");
</script>
<br>
<hr>
<br>
<script type="text/javascript">
window.document.write("자바스크립트의 다양한 함수들");
document.write("익명 함수는 함수의 이름이 없다."+"<br>");
// 익명 함수
var vadd=function(a,b){
return a+b;
}
document.write("익명 함수 더하기 (10, 5) >>> : "+vadd(10, 5)+"<br>");
document.write("즉시 실행 함수는 함수의 결과로 변수로 할당하지 않고 바로 실행한다."+"<br>");
// 즉시 실행 함수
(function(){console.log("즉시 실행 함수")})
document.write("화살표 함수는 호출 하면 바로 return 값이 호출 된다."+"<br>");
var hi = () => {return "저는 화살표 함수 입니다.";}
document.write("화살표 함수 호출 >>> hi() >>> : "+hi()+"<br>");
document.write("let은 함수 블럭에서만 사용이 가능하다. "+"<br>");
let say=()=>alert("hi!!");
say();
// 함수 줄여서 쓰기
var add=(a,b)=>a+b;
var minus=(a,b)=>a-b;
var multiply=(a,b)=>a*b;
var devide=(a,b)=>a/b;
document.write("add(10,5) >>> : "+add(10,5)+"<br>");
document.write("minus(10,5) >>> : "+minus(10,5)+"<br>");
document.write("multiply(10,5) >>> : "+multiply(10,5)+"<br>");
document.write("devide(10,5) >>> : "+devide(10,5));
</script>
</body>
</html>JavaScriptオブジェクト文字でオブジェクトを作成するJavaScriptオブジェクト文字でオブジェクトをさくせいする:文字オブジェクトもじおぶじぇくと
// 앞뒤 생략
console.log("자바스크립트의 객체 : 객체 리터럴로 객체 생성하기");
var card={suit:"하트",rank:"A"};
var card1={"suit":"하트", "rank":"A"};
// 객체 리터럴, 리터럴 객체 : {....}
// 변수 card
// property 이름 : suit, "suit"
// property 값 : "하트", "A"
console.log("typeof(card) >>> : "+typeof(card));
console.log("typeof(card1) >>> : "+typeof(card1));
console.log("card의 suit 키의 값 >> : "+card.suit);
console.log("card1의 suit 키의 값 >> : "+card1.suit);
console.log("card의 rank 키의 값 >> : "+card.rank);
console.log("card1의 rank 키의 값 >> : "+card1.rank);属性値を{属性名:[属性値]}に、属性値を{属性名:[属性値]}に設定できます.
開発者ツールコンソール出力結果
자바스크립트의 객체 : 객체 리터럴로 객체 생성하기
typeof(card) >>> : object
typeof(card1) >>> : object
card의 suit 키의 값 >> : 하트
card1의 suit 키의 값 >> : 하트
card의 rank 키의 값 >> : A
card1의 rank 키의 값 >> : AjQuery
jQueryはJavaScriptを関数とするライブラリです.
CDNは、Webサイトの訪問者がコンテンツをダウンロードする際に、最近のサーバから自動的にコンテンツをダウンロードできるようにする技術です.
// jQuery 불러오기
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */jQueryは$(ドキュメント)です.使用可能なフォーマットはready()であり、それ以外にも様々な方法があります.
$(document).ready(function(){});
window.jQuery(document).ready(function(){});
jQuery(document).ready(function(){});
window.$(document).ready(function(){});jQuery 함수 체이닝 기법
jQueryは、スクリプトブロックready関数ブロックに関数を接続および使用することができる.
jQuery使用例
// 앞뒤 생략..
// $(document).ready(function(){});
$(document).ready(function(){
// $("#아이디명").click(function({});
$("#아이디명").click(function({
// $("#아이디명).attr({}).submit();
$("#아이디명).attr(
{
"action":"#",
"method":"GET"
}
).submit();
});
// $("#아이디명").click(function(){});
$("#아이디명").click(function(){
var 변수명=$("#아이디명");
변수명.attr("action", "#");
변수명.attr("method", "GET");
변수명.submit();
});
});$ : jQuery를 시작하는 키워드
#아이디명 : css 선택자에서 #아이디명 : 태그의 id 속성의 이름을 가르킵니다.
$("#아이디명") :jQuery 함수를 이용해서 CSS 선택자를 이용해서 DOM Tree Node List(태그 요소 노드, 내용 텍스트 노드, 속성 노드)에서 아이디 속성의 값을 찾습니다.
$("#노드명") : html 웹 문서의 DOM Tree 노드 리스트에서 아이디 속성값이 노드명인 노드를 찾습니다.
$("#노드명").click(); : html 웹 문서의 DOM Tree 노드 리스트에서 아이디 속성값이 노드명인 노드를 찾아서 click 이벤트를 수행합니다.jQuery 활용 예제
HTML FORMタグを使用してIDとパスワードを入力し、jQueryを使用してJSPファイルに移動します.
JSPファイルは、WebサーバからWebアプリケーションサーバ(WAS)にデータを転送し、JDBCがOracleDBに関連付けられているJAVAクラスにジェネレータを作成し、情報を表示します.
html, css, javascript, jQuery <=> JSP <=> java <=> Oracle DB
今回のリリースでは、あなたのIDとパスワードを受信し、jQueryのJSPファイルに移動して、JSPファイルに入力したIDとパスワードを出力します.
jQueryPractice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 테스트</title>
<style type="text/css">
*{
width:500px;
margin:10px auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login_btn").click(function(){
$("#login").attr(
{
"action":"/firstWeb/cgiForm/jQueryPractice.jsp",
"method":"GET"
}
).submit();
});
});
</script>
</head>
<body>
<fieldset>
<h3>로그인서비스</h3>
<hr>
<form name="login" id="login">
아이디 : <input type="text" name="uid" id="uid"/>
<hr>
비밀번호 : <input type="password" name="upw" id="upw"/>
<hr>
<input type="button" id="login_btn" value="로그인하기">
<input type="reset" value="취소">
</form>
</fieldset>
</body>
</html>
jQueryPractice.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Check</title>
</head>
<body>
<h3>Login Check</h3>
<hr>
<%= "Login Check를 시작합니다." + "<br>"%>
<%
String uid=request.getParameter("uid");
String upw=request.getParameter("upw");
%>
<%= "입력된 아이디는 : "+uid+"입니다."+"<br>" %>
<%= "입력된 비밀번호는 : "+upw+"입니다."+"<br>" %>
</body>
</html>この値は、データベースでアイデンティティとパスワードをクエリーした後、エラーが発生した場合はjavascriptのhistoryです.go(-1)コマンドを使用して後退することもできます.
正しい場合、JavaScriptのlocation.hrefコマンドで次のホームページに移動することもできます.
JavaScript、jQuery、JSP、javaは、データベースクエリから画面出力までさまざまな用途で使用できます.
ここまで[js,jQuery javascript,jQuery基礎位置決めを完了する.😀
Reference
この問題について([js,jQuery]JavaScript,jQueryベース), 我々は、より多くの情報をここで見つけました https://velog.io/@yunyoseob/js-jQuery-javascript-jQuery-기초テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol