728x90
한국정보기술연구원(KITRI)에서 교육받고 있는지 어느덧 3개월이란 시간이 흘렀다.
Oracle Database 부터 시작해서 Java와 JDBC 그리고 JSP와 Servlet을 지나 요즘은 JavaScript를 배우고 있다.
그리고 이제 곧 jQuery를 배우겠지. 비전공자이긴 나에게 하루하루 배우는양들이 너무너무 많고, 이해도 잘 되지 않아서 힘든 나날들을 보내고 있다. 복습에 대해 조금 더 강조하고자 약간 반강압적인 자세로 블로그에 하루하루를 기록하고자 한다.
그렇기때문에 이 글을 읽기전에 알아야할점
- 나는 KITRI의 교육생 신분으로 내가 공부한것을 작성한다. 잘못된 정보가 있을수도 있다.
- 나는 비전공자이고, 아직 시작한지 얼마 안됬기 때문에 용어의 선택이 조금은 어색 할 수 가 있다.
그전에 먼저 자바 스크립트란?
자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.(위키피디아)
즉 쉽게 말하면 웹페이지의 동적인 기능들을 담당하고 있으며, 풍부한 기능들을 보유하고 있는 스크립트 프로그래밍 언어라고 보면 될 것 같다.
<%@ 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>
//document.write("<h1>안녕하세요~</h1>");
window.alert("안녕하세요2~");
//window.prompt("안녕하세요? prompt 출력", '안녕');
//window.confirm("확인하세요 confirm 출력");
window.console.log("log 출력");
</script>
<script>
//window.aler("안녕하세요 ~ aler 출력");
</script>
<script type="text/javascript" src="js/javascript1.js">
</script>
</head>
<body>
한국정보기술연구원 입니다.
<button onclick="window.alert('버튼출력');">버튼</button>
</body>
</html>- 출력하는 방법. document.write를 이용해 출력한다. window 이후 prompt나 confirm를 통해 다양한 기능 역시 적용 할 수 있음. alert를 적용하면 알람까지 출력 완료.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
// 주석
/* 범위 주석 */
/* 데이터 타입
정수, 실수, 논리, 문자열(문자하나는 없음), 객체, null or undefined, NaN
*/
//window 생략가능
//var a;
//alert(a==undefined);
/* 변수 */
//int
//boolean
//String
var test = new number(3);
var test1 = '문자열';
var test2 = 1.1;
//alert(test1+test2);
function testFunction() {
var test3; // 자동으로 추가됨
alert(test3); // test3 없어서 에러가 나야함
var test3 = '지역변수';
// 산술, 증감, 대입, 비교, 논리 등 모든 연산이 가능
// +-*/%,++,--,=,== => <, && ||
// ===
var test4;
alert(undefined === null);
//if, for 문 동일
/*
if("문자열"=="문자열") {
//== 으로 문자열 비교
}
for (var i=0; i<10; i++) {
}
*/
//for(var a in linst) {}
//for(var a of list) {}
// 5. 함수
//public int function(매개변수) {}
function funcName(out) {
alert(out);
return 0; // return 타입에 맞춰서 반환됨
}
var funcName2 = function(a, b) {
return a + '익명함수 출력' + b;
}
// alert(funcname2('전','후')); // 익명함수는 호출하기 위해 변수명에 () 를 붙여야함
var funcName3 = function(a) {
var args1 = arguments[0];
var args2 = arguments[1];
var args2 = arguments[2];
alert(a+"출력"+arg2+","+arg3);
}
funcname3('매개변수1','매개변수2');
}
</script>
</head>
<body>
<button onclick="testFunction();">버튼</button>
</body>
</html>앞서 말했던 window는 생략이 가능하며, 변수는 var로 지정.
데이터 타입은 정수, 실수, 논리, 문자열 등이 가능하다.
function () { 를 통해 자바에 해당되는 메소드값들을 출력 할 수 있다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
var obj = new Object();
obj.id = 'admin';
obj.pwd = '1234';
obj.name = '관리자';
obj.age = '99';
// alert(obj.id);
alert(obj['id']);
var obj2 = {id: 'admin', pwd: '4321', name: '관리자1', //JSON 형태
age : 99
func : function(){
alert(this.id)+","+this.pwd+","
+this.name+","+this.age)
}
obj2.func();
}
}
//obj2.func();
//alert(obj2['age']);
//2. JSON 객체 사용방법
//var json = [{a:"aa1", b:"bb1", c:"cc1"}, {a:"aa2", b:"bb2", c:"cc2"}, {a:"aa3", b:"bb3", c:"cc3"}]
var json = '[{a:"aa1", b:"bb1", c:"cc1"}]';
var jsonResult = JSON.parse(json);
alert(jsonResult);
var jsonStringify= JSON.stringify(jsonResult);
alert(jsonStringify);
//alert(json[0].a+","+json[1].a","+json[2].a);
alert(jsonResult[0].a);
</script>
</head>
<body>
</body>
</html>JS기반의 JSON 객체 또한 사용가능. JSON을 통해 간결하게 객체를 지정 할 수가 있다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
/*
BOM - 브라우저 컨트롤 객체
*/
// window.alert();
window.open("${pageContext.request.contextPath}/javascript" "width=500 height=600");
</script>
</head>
<body>
부모창
<button onclick = "pageMove();">이동</button>
function print() {
alert("출력");
}
//정해진 시간마다 반복 실행, 1초마다 print() 호출
window.setInterval(time(), 1000);
function time() {
alert("a");
}
</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>
// window > document 윈도우는 생략 가능
// 가져온 객체는 변수 안에 넣어줄 수 있다.
window.onload = function() {
//body에 있는 태그들을 로드한 후 자바스크립트를 실행
var hello = window.document.getElementById("hello");
console.log(hello.innerHTML);
//var hellodiv = document.hello-div;
//id값에 - 사용시 javascript에서 사용할 수 없기 때문에 getElementByID를 사용한다.
var hello2 = document.getElementById("hello-div")
//innerHTML은 태그안의 내용을 읽어오거나 값을 넣을 때 사용
var hello2 = document.hello2 // getElement를 쓰지 않고 바로 id값을 넣어줘서 출력 할 수 있음.
console.log(hell2.innerHTML);
hello2.innerHTML="안녕하세요 호오우 innerHTML로 값을 변경했습니다.";
};
function helloFuncttion() {
//document는 body안의 노드, 엘리먼트들을 다루기 위한 객체
//ID 속성값을 읽기 읽어올때는 getElementById(id값);
var hello1 = window.document.getElementById("hello1");
console.log(hello.innerHTML);
}
</script>
</head>
<body>
<div id="hello">안녕하세요. 자바스크립트 예제 입니다.</div>
<div id="hello1" onclick="helloFunc();">
안녕하세요. 자바스크립트 예제 입니다. 우와와와와와와와왕
</div>
<div id="hello2">안녕하세요. 자바스크립트의 신입니다.</div>
</body>
</html>앞서 말한것 처럼 window > document로 윈도우는 상략이 가능하다. Id 값을 사용시 Javascript에서는 사용 할 수가 없기 때문에 getElementById를 사용하게 된다. innerHTML은 태그안의 내용을 읽어오거나 값을 넣을떄 사용하며,
getElemenet를 쓰지 않고 바로 id값을 넣는것은 document를 통해 출력 할 수 있다.
document는 body안의 노드, 엘리먼트들을 다루기 위한 객체로서 ID의 속성값을 읽기 위해 읽을올때는 getElementById(id값)을 지정 할 수가 있다.
<%@ 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">
onload = function() {
//버튼 엘리먼트값을 가져와서 onclick 이벤트 호출
var loginBtn = document.getElementById("login-btn");
loginBtn.onclick = function() {
//console.log("loginBtn 호출")
//input 태그의 값을 가져올때는 value를 사용
var id = document.getElementById("id").value;
var pwd = document.getElementById("pwd").value;
var idCheck = document.getElementById("id-check");
var pwdCheck = document.getElementById("pwd-check");
if (idCheck == ""||id==null) {
idCheck.innerHTML = "아이디를 입력해주세요."
} else {
idCheck.innerHTML="";
}
if (pwdCheck == "")||pwd==null) {
pwdCheck.innerHTML = "패스워드를 입력해주세요."
} else {
pwdCheck.innerHTML="";
}
}
}
// function btnClick() {
// console.log("btnClick() 호출");
// }
</script>
</head>
<body>
ID :
<input type="text" name="id">
<br>
<div id="login-check"></div>
PWD :
<input type="password" name="pwd" id="pwd">
<br>
<div id="pwd-check"></div>
<input type="submit" value="로그인" id="login-btn" onclick="btnClick();">
</body>
</html>콘솔 출력은 cosole.log를 통해서 진행 할 수가 있고, input 태그값을 가져올떄에는 value를 사용해야한다.
<%@ 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>
onload = function() {
//태그이름 >> 배열형태로 읽어옴
var div = document.getElementsByTagName("div");
for (var i = 0; i < div.length; i++) {
console.log(div[i].innerHTML);
}
//클래스 이름 >> 배열형태로 읽어옴
var className = document.getElementsByClassName("class-name");
console.log(className[0].innerHTML);
console.log(className);
//name 속성
var name = document.getElementsByName("input-name");
console.log(name[0].value);
//선택자 >> 중요!!!
var selectId = document.querySelector("#id-select");
var selectClass = document.querySelector(".class-name");
var selectAttr = document.querySelector("input[name='input-name']");
// var selectAttr = document.querySelector("input[type='text']");
console.log("id:" + selectId.innerHTML + ", class:"
+ selectClass.innerHTML + "," + "attr:" + selectAttr.value)
// #id
//.class
//노드 이용
var node = document.getElementById("node");
//var nodes = node.childNodes // 주석 및 빈공백도 node로 인식됨
var nodes = node.children;
console.log(nodes[1].innerHTML);
}
</script>
</head>
<body>
<div>태그 형태</div>
<div class="class-name">클래스이름 형태</div>
<input type="text" name="input-name" value="name 형태">
<div id="id-select">선택자를 이용한 형태</div>
<div id="node">
<!-- 실제 노드들은 빈칸들도 값이 있는것으로 처리함 -->
<span>Node1</span>
<span>Node2</span>
<span>Node3</span>
</div>
</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">
//dom 얼리먼트를 추가하는 방법
window.onload = function() {
var node = document.getElementById("node");
var input = node.createElement("input"); //<input>
input.type = "text"; //<input type="text">
input.name = "id"; //<input type="text" name="id>
input.value = "admin"; //<input type="text" name="id" value="admin">
node.appendChild(input);
node.innerHTML+="<br>"
var addBtn = document.querySelector("#addBtn");
addBtn.onclick = function() {
/*
var input = document.createElement("input");
var br = document.createElement("br");
input.type = "text"; //<input type="text"> // 거의 사용하지 않는 표현 방법
node.appendChild(input);
node.appendChild(br); */
//node.innerHTML+="<input type='text'>"<br>;
node.innerText="<input type='text'><br>";
//html 태그가 동작하지 않음
}
}
</script>
</head>
<body>
<div id="node"></div>
<input type="button" value="추가" id="addBtn">
</body>
</html>window.onload = function() { 를 통해 출력
var node = document.getElementById()를 통해 ID의 객체 값. 즉 속상을 가져오게 된다.
<%@ 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">
onloand = function() {
//이벤트
//click, dbclick(더블클릭), mousedown, mouseup, mouseover, mousemove, mouseout, drag
var clickEvent = document.getElementById("click-event");
clickEvent.onClick = function() {
console.log("onclick event")
}
var dblclickEvent = document.querySelector(".dbl-click-event");
clickEvent.ondblClick = function() {
console.log("ondblclick event")
}
var mousedownEvent = document.querySelector("#mousedown-event");
mousedownEvent.onmousedown = function() {
console.log("onmousedown event")
}
var mouseupEvent = document.querySelector("#mousedown-event");
mouseupEvent.onmousedown = function() {
console.log("onmouseup event")
}
}
</script>
</head>
<body>
<span id="clickEvent">클릭 이벤트</span>
<button class="dbl-click-event">더블 클릭이벤트</button>
<div id="mousedown-event"
style="width: 300px; height: 300px; border: 1px solid black;"></div>
</body>
</html>click event 들을 통해 웹 페이지내에 다양한 효과들을 줄 수 있음.
jQuery
jQuery란?
HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.(Wiki)
<%@ 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" src="js/jquery-3.5.1.min.js"></script>-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
//jQuery 특징
/* 모든 브라우저에 호환, 오픈소스, dom 객체를 사용하기에 강력함
*/
//onload = function(){
// $(document).ready(function(){
$(function() {
//var divId=document.getElementByIf("div-id");
var divId = $("#div-id"); //jQuery를 $로 표시
console.log(divId.text()); //text 값을 꺼내는것
var divClass=$(".div-class").html();
console.log(divClass);
var inputName=$("input[name='input-name']").val();
console.log(inputName);
var inputNameAttr = $("input[name='input']").attr("type");
console.log(inputNameAttr);
divId.text("div 아이디 태그 입니다.");
$(".div-class").html("<h1>div 클래스 태그 입니다.</h>");
});
//자바스크립트와 제이쿼리는 각각의 성질때문에 서로 호환해서 사용 할 수 없음
</script>
</head>
<body>
<div id="div-id">div 태그 입니다.</div>
<div class="div-class"> div 두번째 태그 입니다.</div>
<input type="text" name="input-id" value="초기값" readonly="readonly">
</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
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
// text, html, val, attr, prop, hide, show, toggle, after, before, addClass, removeClass, fadeOut, fadeIn
$(function(){
$("#sel-fruit").on("change",function(){
// cosole.log("chage");
cosole.log($("#sel-fruit option:selected").val());
// $("sel-fruit").prop("selected", true);
});
var div =$("#div-hide-show");
var btn =$("#btn");
btn.on("click", function(){
/* if(btn.val == "숨김"){
div.hide();
}else{
div.show();
btn.val("숨김");
} */
$("#beforeBtn").onclick(function(){
div.before("<h3>이전 내용 추가</h3>");
})
$("#classAddBtn").click(function()){
$("#div-class").addClass("font");
})
});
</script>
</head>
<body>
<select id="sel-fruit">
<option value="사과">사과</option>
<option value="포도">포도</option>
<option value="배">배</option>
<option value="벅승이">벅승이</option>
</select>
<div id="div-hide-show">
<input type="text" name="id">
</div>
<input type="button" value="숨김" id="btn">
<input type="button" value="이전추가" id="Beforebtn">
<input type="button" value="이후추가" id="Afterbtn">
<input type="button" value="클래스추가" id="ClassBtn">
</body>
</html>스크립트에 제이쿼리를 적용하여 코드 작성
처음 보는것이라 어색할뿐 자꾸 보다보면 괜찮아 질꺼야...
728x90
'배우고 익혀 널리 알리자' 카테고리의 다른 글
| V-World 2D 지도 API 매개변수 정리 (0) | 2020.08.20 |
|---|---|
| [KITRI 한국정보기술연구원] 웹 자바 플랫폼 기반 개발자 과정(수료 후기) (6) | 2020.08.02 |
| [KITRI]한국정보기술연구원 웹 자바 플랫폼을 활용한 기업 솔루션 개발자 과정(97일) - 두 번째 프로젝트 진행중 & 면접 (0) | 2020.07.20 |
| [KITRI]한국정보기술연구원 웹 자바 플랫폼을 활용한 기업 솔루션 개발자 과정(96일) - 두 번째 프로젝트 시작 (0) | 2020.07.11 |
| [KITRI]한국정보기술연구원 웹 자바 플랫폼을 활용한 기업 솔루션 개발자 과정(95일) - MyBatis (2) | 2020.07.10 |