Fullstack -- back, front 동시에. 회사는 좋지만 개발자는 힘들어~ 2인이서 할 걸 혼자 해야함
JAVA -- pc app, web app back단(비즈니스로직, 요청처리), android app
Oracle -- 데이터 영구 보관
JSP/Servlet -- 웹 서버 페이지 개발. jsp(front언어를 서버언어로 변환), servlet(back-요청을 받음)
HTML/CSS/JavaScript -- front(사용자에게 화면을 예쁘게 보여줌)
JSON -- 데이터 표현 [] {}
DOM -- 웹페이지 실시간 변경 ---- document.getElementById()
AJAX -- 비동기 요청. 불필요한 페이지 이동을 줄여줌
jQuery
- 자바스크립트 라이브러리 (자주 사용하는 기능을 모듈화해놓음)
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>웹 상에 있는 스크립트를 끌어다 쓰기 위해 추가해야 하는 코드
1. 선택자
$( 요소 )
.class명
#id명
$(document) : document 객체
$(this) : 현재 객체
$('p') : p태그 요소
$('.c1') : 클래스명이 c1인 요소
$('#test') : ID가 test인 요소
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// jQuery methods go here...
});
</script>
</head>
.ready() : ready 이벤트가 발행하면 등록한 함수 실행. 페이지가 열리자마자 시작됨. 여러번 쓸 수 있음.
(.onload()와 같음)
2. 태그 사이의 값 (innerHTML과 같음)
text() -- 태그 사이의 텍스트값만 읽고 씀. (태그도 텍스트로 처리)
html() -- 태그 사이의 텍스트와 태그를 읽고 씀 (태그는 실행)
$(document).ready(function() {
let txt = $('p').text(); // 읽기
let txt2 = $('#test').text();
$('#d1').text(txt + "<br/>" + txt2); // 쓰기
$('#d2').html(txt + "<br/>" + txt2);
});
<div id='d1' style="border: 1px solid blue"></div>
<div id='d2' style="border: 1px solid blue"></div>
<p>가나다</p>
<h3 id="test">BBBB</h3>3. 입력 폼의 value 속성값 읽고 쓰기
val() -- 입력 양식의 value값을 읽고 씀.
// id가 b1인 요소에 클릭 이벤트 핸들러 붙임
$('#b1').click(function() {
let txt = $('#t1').val();
alert('입력값: ' + txt);
});
<input type="text" id="t1">
<input type="button" id="b1" value='저장'>
4. 요소 속성값 읽기/쓰기
$(요소).attr("속성명"); --- 읽기
$(요소).attr("속성명", "값"); --- 쓰기
function del(num){
let pwd = prompt('글 비밀번호');
if($('#div_'+num).attr('pwd')==pwd){
$('#div_'+num).remove();
alert(num+" 번글 삭제")
} else {
alert('비밀번호가 맞지 않습니다.');
}
}5. forEach -- for문
$(요소).each(function(){
// 각 요소 처리
});
// 전역함수
$.each(전역변수, function(idx, item){});
$(document).ready(function() {
txt='';
$('h3.c1').each(function(idx, item) { //idx:인덱스, item:요소(h3)
txt += idx + "번째 요소 txt: " + $(item).text() + "<br/>";
});
$('#d3').html(txt);
});
<div id='d3' style="border: 1px solid red"></div>
<h3 class="c1">AAAA</h3>
<h3 id="test">BBBB</h3>
<h3>CCCC</h3>
<h3 class="c1">DDDD</h3>
<h2 class="c1">EEEE</h3>
let arr = [
{"name":"daum", "addr":"http://www.daum.net"},
{"name":"naver", "addr":"http://www.naver.net"},
{"name":"google", "addr":"http://www.google.net"}
];
let txt ='';
// 전역함수 .each
$.each(arr, function(idx, item){ // item: 배열에서 꺼낸 요소
txt += '<a href="' + item.addr + '">' + item.name + '</a><br/>';
});
$('#d1').html(txt);
<div id="d1"></div>
$(document).ready(function(){
let txt='';
$('td').each(function(idx, item){
txt += idx + "번째 요소 txt: " + $(item).text() + "<br/>";
});
$('#d2').html(txt);
});
<div id="d2"></div>
<table border="1">
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
<tr><td>ddd</td><td>eee</td><td>fff</td></tr>
</table>
6. 이벤트
$(요소).이벤트명(function(){ //이벤트 처리 });
$(요소).on('이벤트명', function(){ //이벤트 처리 });
$(요소).on('이벤트명', function(){ 이벤트명:function(){}, 이벤트명:function(){} });
$(':button').click(function(){});
$(':button').on('click', function(){});
* hover -- mouseenter + mouseleave
$(document).ready(function() {
// hover : mouseenter, mouseleave 합친 이벤트
$('h3').hover(function(){
$(this).css('background-color', 'red'); // css : jquery로 css 속성 설정하는 함수
}, function(){
$(this).css('background-color', 'blue');
});
});
<h3>jQuery 이벤트 처리</h3>
* focus & blur
$(document).ready(function() {
// input type="text"인 요소
$(':text').focus(function(){ // 포커스 얻었을 때
$(this).css('background-color', 'orange');
});
$(':text').blur(function(){ // 포커스 잃었을 때
$(this).css('background-color', 'white');
});
});
<input type="text" id="t1"><br />
<input type="text" id="t2">
* click
$(document).ready(function() {
// input type="buttom"인 요소
$(':button').click(function(){ // 포커스 얻었을 때
alert($(this).val() + " 버튼이 클릭됨");
});
});
<input type="button" id="b1" value="btn1"><br />
<input type="button" id="b2" value="btn2">* $(요소).on('이벤트명', 핸들러){});
// $(요소).on('이벤트명', 핸들러)
$('#h4').on('click', function(){
alert($(this).text());
});
<h4 id='h4'>asdfasdf</h4>
* 이벤트 3개 등록
// 실행될 이벤트 3개 등록..
$('h1').on({click:function(){alert($(this).text());},
mouseenter:function(){$(this).css('background-color', 'yellow');},
mouseleave:function(){$(this).css('background-color', 'white');}
});
<h1>가나다라</h1>
7. show/hide
$(요소).show();
$(요소).hide();
$(요소).toggle(); // show + hide
$(document).ready(function() {
$('h2').click(function() {
$(this).hide(); // this : 이벤트가 발생한 요소
});
});
<h2>aaaa</h2>
<h2>bbbb</h2>
<h2>cccc</h2>
<h2>dddd</h2>
$(document).ready(function() {
$('#b1').click(function(){
$('h3').show();
});
$('#b2').click(function(){
$('h3').hide();
});
$('#b3').click(function(){
$('h3').toggle(); // show+hide
});
});
<input type="button" value="show" id="b1">
<input type="button" value="hide" id="b2">
<input type="button" value="toggle" id="b3">
<h3>aaa</h3>
<h3>bbb</h3>
<h3>ccc</h3>
<h3>ddd</h3>
8. 요소추가/삭제 (DOM)
$(부모요소).append(자식요소): 마지막 자식으로 요소 추가 (맨 끝에 추가)
$(부모요소).prepend(자식요소): 첫번째 자식으로 요소 추가 (맨 앞에 추가)
remove(): 요소 삭제
$(document).ready(function() {
let cnt = 0;
let arr = ["aaa", "bbb", "ccc", "ddd"];
$.each(arr, function(idx, item){
cnt = idx;
$('#list').append("<h3 id='h"+cnt+"'>"+item+"</h3>");
});
$('#b1').click(function(){
$('#h'+cnt).remove();
cnt--;
});
});
<input type="button" id="b1" value="삭제">
<div id="list"></div>
(bonus) jQueary로 간단 방명록 만들기
<%@ 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>
<style>
div{
border:1px solid black;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
let cnt = 1;
$('#editForm').hide();
$('#b1').click(function(){
// input type=button 은 input type="button"과 같음. 띄어쓰기 없이 쓰면 ""없어도 인식함.
let txt = '<div id=div_'+cnt+' pwd=' + $('#pwd').val() + '>';
txt += '<h4 id=writer_'+cnt+'> writer: '+$('#writer').val()+'</h4>';
txt += '<h4 id=content_'+cnt+'> content: '+$('#content').val()+'</h4>';
txt += '<input type=button value=수정 onclick=editForm('+cnt+')>';
txt += '<input type=button value=삭제 onclick=del('+cnt+')>';
txt += '</div>';
$('#list').prepend(txt);
$('#pwd').val("");
$('#writer').val("");
$('#content').val("");
cnt++
});
$('#cancelbtn').click(function(){
$('#editcont').val('');
$('body').append($('#editForm'));
$('#editForm').hide();
});
$('#editbtn').click(function(){
let num = $(this).attr("num");
$('#content_'+num).text('content: '+$('#editcont').val());
$('#editcont').val('');
$('body').append($('#editForm'));
$('#editForm').hide();
})
});
function editForm(num){
let pwd = prompt('글 비밀번호');
if($('#div_'+num).attr('pwd')==pwd){
$('#div_'+num).append($('#editForm'));
let c = $('#content_'+num).text().split(":")[1];
$('#editcont').val(c);
$('#editbtn').attr("num", num);
$('#editForm').show();
} else {
alert('비밀번호가 맞지 않습니다.');
}
}
function del(num){
let pwd = prompt('글 비밀번호');
// attr("속성명"): 속성값 읽기
// attr("속성명", "값"): 속성값 쓰기
if($('#div_'+num).attr('pwd')==pwd){
$('#div_'+num).remove();
alert(num+" 번글 삭제")
} else {
alert('비밀번호가 맞지 않습니다.');
}
}
</script>
</head>
<body>
<h3>방명록</h3>
<table border="1">
<tr><td>작성자</td><td><input type="text" id="writer"></td></tr>
<tr><td>글비밀번호</td><td><input type="password" id="pwd"></td></tr>
<tr><td>내용</td><td><input type="text" id="content"></td></tr>
<tr><td>작성</td><td><input type="button" id="b1" value="작성"></td></tr>
</table><br/>
<table border="1" id=editForm>
<tr><td>내용</td><td><input type="text" id="editcont"></td></tr>
<tr><td>수정완료</td>
<td><input type="button" id="editbtn" value="수정" num="">
<input type="button" id="canclebtn" value="취소">
</td></tr>
</table><br/>
<div id="list"></div>
</body>
</html>