- HTML(Hyper Text Markup Language), CSS(Cascading Style Sheets)
ex01.html
<head>
<meta charset="UTF-8">
<title>html, css ex1</title>
<style>
body{
width: 800px;
margin: 0px auto;
}
#top {
background-color: yellow;
border: 1px solid black;
margin: 10px;
padding: 10px;
}
#middle {
background-color: skyblue;
border: 1px solid black;
padding: 10px;
margin: 10px;
overflow: hidden;
}
#left{
background-color: red;
border: 1px solid black;
margin: 10px;
float: right;
width: 200px;
}
#right{
background-color: salmon;
border: 1px solid black;
margin: 10px;
float: right;
width: 500px;
}
#bottom {
background-color: wheat;
border: 1px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.</div>
<div id="middle">
<div id="left">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>
<div id="right">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
(The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of
ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
comes from a line in section 1.10.32.</div>
</div>
<div id="bottom">It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop
publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for
'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the like).</div>
</body>
- jQuery 라이브러리
ex02 - 텍스트를 입력받아
1. 특정 버튼을 클릭했을때 원하는 함수의 결과를 특정 tag에 출력하고 싶을때
<!-- 특정 버튼을 클릭했을때 결과를 특정 div에 넣기 위해 id를 지정 -->
<button id="btn">1 ~ 100까지 합계</button>
<div id="result">여기에 결과 출력</div> // btn 버튼을 클릭할 경우
$('#btn').on('click', function () {
let sum = 0;
// 1씩 증가
// for (let i = 1; i <= 100; i++) {
// // sum += i;
// sum = sum + i;
// };
// $('#result').html(sum);
// 2씩 증가
for (let i = 2; i <= 100; i=i+2) {
// sum += i;
sum = sum + i;
};
// $('#result').html(sum);
// let str='<h1>'+sum+'</h1>';
let str=`<h1 style="color:blue">${sum}</h1>`;
$('#result').html(str);
});
2. 특정 버튼을 클릭했을 때 특정 div에 문자열을 출력하고 싶을때 (대체하는것이 아닌 추가)
// btnName 버튼을 클릭할 경우
$('#btnName').on('click', function(){
let name = $('#txtName').val();
if(name.length==0){
alert("이름을 입력하세요.");
$('#txtName').focus();
return;
};
alert(name);
let str=`<h2>${name}</h2>`;
// html은 기존값 초기화 후 입력, append는 추가해서 입력
$('#names').append(str);
$('#txtName').val('');
$('#txtName').focus();
});
2-1. 엔터로 값을 입력받을 때
// txtName에서 이름을 enter로 받을 수 있게
$('#txtName').on('keypress',function(event){
if(event.keyCode==13){
$('#btnName').click();
};
});
ex03 - 성적 관리 프로그램
<body>
<div id="top">
<h1>[성적관리]</h1>
</div>
<div id="content"></div>
<div>
<!-- 입력받은 양식은 form tag를 통해서 -->
<!-- action은 어디로 이동할건지 -->
<form action="ex02.html" name="frm">
<table>
<tr>
<th>이름</th>
<td><input type="text" placeholder="이름입력" name="txtName"></td>
</tr>
<tr>
<th>국어</th>
<td><input type="text" placeholder="국어점수" name="txtKor"></td>
</tr>
<tr>
<th>영어</th>
<td><input type="text" placeholder="영어점수" name="txtEng"></td>
</tr>
<tr>
<th>수학</th>
<td><input type="text" placeholder="수학점수" name="txtMath"></td>
</tr>
</table>
<!-- submit과 reset은 하나 -->
<div style="width: 700px; margin: 10px; text-align: center;">
<input type="submit" value="성적등록" />
<input type="reset" value="등록취소" />
</div>
</form>
<hr>
<div>
<h1 style="color: cadetblue; text-align: center;">[성적출력]</h1>
<table id="result">
<tr> <!-- table row-->
<td>이름</td> <!-- table data-->
<td>국어</td>
<td>영어</td>
<td>수학</td>
<td>총점</td>
</tr>
</table>
</div>
</div>
<div id="bottom">
<h3>인천일보 아카데미 이주성</h3>
</div>
</body>
ex03.css - css 외부에서 파일을 받을때
body {
width: 800px;
margin: 0px auto;
}
#top h1 {
color:cadetblue;
text-align: center;
}
#bottom {
margin-top: 10px;
border-top: 1px solid black;
padding-right: 20px;
text-align: right;
}
table{
width: 700px;
margin: 0px auto;
border-collapse: collapse;
}
td,th {
border: 1px solid rgb(65, 158, 158);
padding: 5px;
}
#content {
margin: 20px;
}
th{
background: turquoise;
color: white;
}
tr:hover{
background-color: black;
color: hotpink;
}
+ 입력 유효성 검사 및 데이터 입력
<script>
// submint 버튼을 클릭한 경우
$(frm).on('submit',function(event){
event.preventDefault(); // submit을 되지 않도록 한다.
// frm에서 입력받은 값을 변수에 넣는다.
let name =$(frm.txtName).val();
let kor=$(frm.txtKor).val();
let eng=$(frm.txtEng).val();
let mat=$(frm.txtMath).val();
let tot= parseInt(kor) + parseInt(eng) + parseInt(mat);
// 조건을 설정한다.
if(name.length==0){
alert('이름을 입력하세요.');
$(frm.txtName).focus();
}else if(kor.length==0){
alert('국어점수를 입력하세요.');
$(frm.txtKor).focus();
}else if(eng.length==0){
alert('영어점수를 입력하세요.');
$(frm.txtEng).focus();
}else if(mat.length==0){
alert('수학점수를 입력하세요.');
$(frm.txtMath).focus();
}else{
if(!confirm('성적을 등록하시겠습니까?')){
return;
};
// frm.sumbit(); 서밋은 안하고 div안에 넣어보도록 하자.
let str ='<tr>';
str+=`<td>${name}</td><td>${kor}</td><td>${eng}</td><td>${mat}</td><td>${tot}</td>`;
str+='</tr>';
$('#result').append(str);
}
});
</script>
- json(비동기적으로 파일을 주고 받을때)을 이용한 DB서버와의 연결
<.ajax 기본틀>
<script>
// 데이터를 호출할때는 .ajax의 형태로 호출해야한다.
$.ajax({
type:"get",
url:"https://jsonplaceholder.typicode.com/posts", // 데이터를 가지고올 주소
dataType:"json",
success: function(data){
}
});
</script>
<head>
<meta charset="UTF-8">
<title>DB에서 데이터 받아서 출력받는 웹</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
#content {
width: 500px;
margin: 0px auto;
}
#divbutton {
width: 500px;
margin: 0px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="divbutton">
<button id="prev">이전</button>
<span id="page">1</span>
<button id="next">다음</button>
</div>
</body>
<script>
let page = 1;
getList();
// prev 버튼을 눌렀을때
$('#prev').on('click', function () {
page = page - 1;
$('#page').html(page);
getList();
});
// next 버튼을 눌렀을때
$('#next').on('click', function () {
page = page + 1;
$("#page").html(page);
getList();
});
function getList() {
// 데이터를 호출할때는 .ajax의 형태(jquery 형식)로 호출해야한다.
$.ajax({
type: "get",
url: "https://jsonplaceholder.typicode.com/posts", // 데이터를 가지고올 주소
dataType: "json", // 사이트의 데이터 타입
success: function (data) { // 사이트에서 데이터를 가지고 오는걸 성공했을때 data에 넣음
let str = '';
$(data).each(function () {
let id = this.id; // this.(사이트 DB 속성명)
let title = this.title;
let body = this.body;
if (id >= (page - 1) * 3 + 1 && id <= page * 3) {
str += `<h2>${id} : ${title}</h2>`;
str += `<p>${body}</p>`;
};
});
$('#content').html(str);
// 페이지가 1인 경우 prev 버튼이 클릭되지 않도록 설정
if(page==1){
$('#prev').attr('disabled',true);
}else{
$('#prev').attr('disabled',false);
}
}
});
};
</script>
ex05
- checkbox prev next page set
<head>
<meta charset="UTF-8">
<title>checkbox prev next page set</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
#content {
width: 800px;
margin: 0px auto;
}
input[type=checkbox] {
transform: scale(2);
margin-right: 20px;
}
#divbutton {
text-align: center;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="divbutton">
<button id="prev">이전</button>
<span id="page">1</span>
<button id="next">다음</button>
</div>
</body>
<script>
let page = 1;
getList();
// prev 버튼을 눌렀을때
$('#prev').on('click', function () {
page = page - 1;
$('#page').html(page);
getList();
});
// next 버튼을 눌렀을때
$('#next').on('click', function () {
page = page + 1;
$("#page").html(page);
getList();
});
function getList() {
$.ajax({
type: 'get',
url: 'https://jsonplaceholder.typicode.com/todos',
dataType: 'json',
success: function (data) {
let str = '';
$(data).each(function () {
let id = this.id;
let title = this.title;
let completed = this.completed;
if (id >= (page - 1) * 5 + 1 && id <= page * 5) {
if (completed) { // completed : true일 경우
str += `<h1><input type='checkbox' checked/>${id} : ${title}</h1>`;
} else { // completed : false일 경우
str += `<h1><input type='checkbox'/>${id} : ${title}</h1>`;
};
};
});
$('#content').html(str);
if (page == 1) {
$('#prev').attr('disabled', true);
} else {
$('#prev').attr('disabled', false);
}
}
});
};
</script>
ex06
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href='./ex06.css' />
</head>
<body>
<div id="content"></div>
<div id="pagination">
<button id="prev">이전</button>
<span id="page">1</span>
<button id="next">다음</button>
</div>
</body>
<script>
let page = 1;
getList();
// prev 버튼을 눌렀을때
$('#prev').on('click', function () {
page = page - 1;
$('#page').html(page);
getList();
});
// next 버튼을 눌렀을때
$('#next').on('click', function () {
page = page + 1;
$("#page").html(page);
getList();
});
//목록출력 함수
function getList() {
$.ajax({
type: 'get',
url: 'https://jsonplaceholder.typicode.com/photos',
dataType: 'json',
success: function (data) {
let str = '';
$(data).each(function () {
let id = this.id;
let title = this.title;
let url = this.url;
if (id >= (page - 1) * 10 + 1 && id <= page * 10) {
str += '<div class="box">';
str += `<div><img src='${url}'></div>`;
str += `<div class="title">${title}</div>`;
str += '</div>';
};
});
$("#content").html(str);
//1페이지인 경우 prev 버튼의 disabled 속성을 true로 설정한다.
if (page == 1) {
$('#prev').attr('disabled', true);
} else {
$('#prev').attr('disabled', false);
};
}
});
};
</script>
</html>
'ICIA 수업일지' 카테고리의 다른 글
| 2021.08.03 수업일지(MySQL, jQuery, node.js) (0) | 2021.08.07 |
|---|---|
| 2021.08.02 수업일지(HTML, CSS, JAVA SCRIPT,MySQL) (0) | 2021.08.07 |
| 2021.07.29 수업일지 (0) | 2021.07.31 |
| 2021.07.28 수업일지 (0) | 2021.07.31 |
| 2021.07.27 수업일지 (0) | 2021.07.31 |
