php : Hypertext Preprocessor
html : hyper text markup language
http : hypertext transfer protocol
editplus 설치
https://editplus.softonic.kr/support?ext=1
editplus 다운
자바스크립트
html
네이버에서 책 아무거나 눌러서 보면 책의 정보는 네이버에 있지 않고 교보문고에 있는 정보를 가져오는 것.
HTML 페이지 생성
1.html
작성 후 html 파일을 저장.
이렇게 열린다.
2.html
객체, 텍스트로 이루어져있다.
테이블은 객체, border, cellpadding 등이 속성이다.
종이컵을 예시로
객체 : 재질, 높이, 지름
속성 : 종이, 15cm, 10cm
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="400" align="center">
<tr>
<td width="200" height="200" align="center">
2
</td>
<td width="200" height="200" align="center">
4
</td>
</tr>
<tr>
<td width="200" height="200" align="center">
54
</td>
<td width="200" height="200" align="center">
76
</td>
</tr>
</table>
<input type="button" value="확인" />
</body>
</html>
넓이, 높이, 중앙정렬로 2, 4, 54, 76의 값이 출력되고 아래에 확인 버튼이 생성된다.
3.html, 4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div>
<div>
<div style="border:1px solid red;">1</div>
<div>홍길동</div>
</div>
<div>
<div>2</div>
<div>전우치</div>
</div>
</div>
</body>
</html>3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<students>
<student>
<id style="border:1px solid red; display:block">1</id>
<name>홍길동</name>
</student>
<student>
<id>2</id>
<name>전우치</name>
</student>
</students>
</body>
</html>4.html
3.html
4.html
각각의 출력값이다.
display:block을 추가하면 똑같이 출력된다.
html의 태그는 의미가 없다는 뜻이다. 데이터와 데이터를 구분하는 경계이다.
5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var a = 4;
var b = "aaaa";
var c = 1.4;
var d = a + b;
alert(d);
</script>
</head>
<body>
<font size="3" color="blue">안녕</font>
</body>
</html>
자바스크립트는 정수와 문자를 +를 이용하여 합칠 수 있다.
6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function aaa(){
alert("안녕하세요");
}
</script>
</head>
<body>
<font size="3" color="blue">안녕</font>
<input type="button" value="확인" onclick="aaa();"/> <!-- 싱글태그 -->
<!--
javascript event
click event -- 마우스 좌클릭
..-->
</body>
</html>
안녕이라는 글자와 확인이라는 버튼을 누르면 안녕하세요라는 알림창이 뜬다
<script>
function aaa(){
//alert("안녕하세요");
//주석
/*
여러줄 주석
*/
// font 객체를 찾아서 그의 속성인 color 값을 red로 바꾼다.
window.document.getElementById("greeting").color = "red";
}
</script>
</head>
<body>
<font size="3" color="blue" id="greeting">안녕</font>
<input type="button" value="확인" onclick="aaa();"/> <!-- 싱글태그 -->
<!--
javascript event
click event -- 마우스 좌클릭
..-->
</body>이렇게 수정한다.
확인을 누르기 전
확인을 누르면 안녕 글자가 blue에서 red로 변경된다.
7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function aaa(){
document.getElementById("a").innerHTML = "<font size='7' color='red' >a</font>"; // innerHTML : html 안에 코딩할 수 있게
document.getElementById("b").innerHTML = "<font size='7' color='yellow' >b</font>";
document.getElementById("c").innerHTML = "<font size='7' color='#74aa34' >c</font>";
}
</script>
</head>
<body>
<div>
<div>
<span id="a">1</span> <!--a-->
<span id="b">2</span> <!--b-->
<span id="c">3</span> <!--c-->
</div>
<div>
<input type="button" value="확인" onclick="aaa();"/>
</div>
</div>
</body>
</html>해당하는 id의 값, 스타일을 변경한다.
확인을 누르기 전
확인을 누르면 크기와 글자, 색이 변경된다.
<script>
function aaa(){
document.getElementById("a").innerHTML = "<font size='7' color='red' >a</font>"; // innerHTML : html 안에 코딩할 수 있게
document.getElementById("b").innerHTML = "<font size='7' color='yellow' >b</font>";
document.getElementById("c").innerHTML = "<font size='7' color='#74aa34' >c</font>";
}
function bbb(){
var spanTags = document.getElementsByTagName("span");
spanTags[0].innerHTML = "<font size='7' color='red' >a</font>";
spanTags[1].innerHTML = "<font size='7' color='236611' >b</font>";
spanTags[2].innerHTML = "<font size='7' color='ff00dd' >c</font>";
}
</script>
</head>
<body>
<div>
<div>
<span id="a">1</span> <!--a-->
<span id="b">2</span> <!--b-->
<span id="c">3</span> <!--c-->
</div>
<div>
<input type="button" value="확인" onclick="bbb();"/>
</div>
</div>
</body>이렇게 수정한다.
span 객체를 모두 변경할 수 있다.
클릭 전
클릭 후
- html에서는 리턴 값의 데이터타입은 배열 뿐이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function ccc(){
var values = []; // new Array();
values[0] = "a";
values[1] = 12345;
values[2] = 1.2345;
var divTag = document.getElementById("list");
var spanTags = document.getElementsByTagName("span");
var strHTML = "";
for(var i=0; i<spanTags.length; i++){
strHTML += "<span><font size='7' color='red' >" + values[i] + "</span></font>";
}
divTag.innerHTML = strHTML;
}
</script>
</head>
<body>
<div>
<div id="list">
<span id="a">1</span> <!--a-->
<span id="b">2</span> <!--b-->
<span id="c">3</span> <!--c-->
</div>
<div>
<input type="button" value="확인" onclick="ccc();"/>
</div>
</div>
</body>
</html>새로운 function을 추가한다.
결과값
배열의 갯수는 내가 데이터를 넣을 때 정해진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function aaa(){ //id를 사용해서 객체를 참조하는 방법
document.getElementById("a").innerHTML = "<font size='7' color='red' >a</font>"; // innerHTML : html 안에 코딩할 수 있게
document.getElementById("b").innerHTML = "<font size='7' color='yellow' >b</font>";
document.getElementById("c").innerHTML = "<font size='7' color='#74aa34' >c</font>";
}
function bbb(){ //tagName을 사용해서 참조하는 방법
var spanTags = document.getElementsByTagName("span");
spanTags[0].innerHTML = "<font size='7' color='red' >a</font>";
spanTags[1].innerHTML = "<font size='7' color='236611' >b</font>";
spanTags[2].innerHTML = "<font size='7' color='ff00dd' >c</font>";
}
function ccc(){ //tagName을 사용해서 참조하는 방법
var values = []; // new Array();
values[0] = "a";
values[1] = 12345;
values[2] = 1.2345;
var divTag = document.getElementById("list");
var spanTags = document.getElementsByTagName("span");
var strHTML = "";
for(var i=0; i<spanTags.length; i++){
strHTML += "<span><font size='7' color='red' >" + values[i] + "</span></font>";
}
divTag.innerHTML = strHTML;
}
function ddd(){ //name을 사용해서 참조하는 방법
var tags = document.getElementsByName("a");
}
</script>
</head>
<body>
<div>
<div id="list">
<span name="a">1</span> <!--a-->
<span name="a">2</span> <!--b-->
<span name="a">3</span> <!--c-->
</div>
<div>
<input type="button" value="확인" onclick="ccc();"/>
</div>
<span>여기다</span>
</div>
</body>
</html>id, tagName, name을 사용하여 참조하는 방법이 있다.
8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
// 1. focus event : Tag(객체)에 cursor가 들어오면
// 2. blur event : focus 제거
function a_focus(){
alert("focus event");
//document.getElementById("password").blur(); // 포커스 제거
document.getElementById("jumin1").focus(); // 다른 곳에 포커스 두면 제거 필요 없음
}
// 3. keypress : 키를 눌렀을 때
// 4. keyup : 키를 뗐을 때
// 5. keydown :
function j_check(){
document.getElementById("show").innerHTML = document.getElementById("jumin1").value.length;
// id jumin1 객체의 길이가 6이 되면
if(document.getElementById("jumin1").value.length == 6){
// cursor를 id jumin2로
document.getElementById("jumin2").focus
}
}
// 숫자가 아닌 다른 값이 입력되면 지우기
function num_check(obj){
var permitVal = "0123456789";
var inputVal = obj.value; // "01a"
var perVal = "";
for(var i=0; i<inputVal.length; i++){
perVal = inputVal.substr(i, 1);
if(permitVal.indexOf(perVal) == -1){
inputVal = inputVal.substr(0, i)
}
}
document.getElementById("jumin2").value = inputVal;
}
function checkbox_check(){
// checkbox object들을 찾는다
var checkboxObjs = document.getElementsByName("hobby");
// 위에서 참조된 checkbox객체들의 checked 속성값을 검사하여 모두 false이면 ...
var isRst = true;
for(var i=0; i<checkboxObjs.length; i++){
if(checkboxObjs[i].checked == true){
isRst = false;
}
}
if(isRst){
alert("최소 하나를 체크해주세요");
}
}
function gender_func(idx){
var objs = document.getElementsByName("gender");
// 참조된 객체의 모든 checkbox를 모두 푼다.
for(var i=0; i<objs.length; i++){
objs[i].checked = false;
}
// 선택된 checkbox만 선택표시한다.
objs[idx].checked = true;
}
function gender_func2(selectedObj){
var objs = document.getElementsByName("gender");
// 참조된 객체의 모든 checkbox를 모두 푼다.
for(var i=0; i<objs.length; i++){
objs[i].checked = false;
}
// 선택된 checkbox만 선택표시한다.
selectedObj.checked = true;
}
</script>
</head>
<body>
<!-- javascript event, form tag-->
<form action="" method="">
<div>
<input type="password" id="password" name="password" onfocus="a_focus()"/>
<div id="show"></div>
</div>
<div>
<input type="text" size="15" maxlength="6" name="jumin1" id="jumin1" onkeyup="j_check()"/>
-
<input type="text" size="15" maxlength="7" name="jumin2" id="jumin2" onkeyup="num_check(this)"/>
</div>
<div>
<label><input type="checkbox" name="hobby" value="E" /> 운동</label>
<input type="checkbox" name="hobby" value="M" /> 음악 감상
<input type="checkbox" name="hobby" value="V" /> 영화
</div>
<!--
<div>
<label><input type="radio" name="gender" value="M" checked/> 남자</label>
<label><input type="radio" name="gender" value="F" /> 여자</label>
</div>
-->
<div>
<label><input type="checkbox" name="gender" value="M" onclick="gender_func2(this)"/> 남자</label>
<label><input type="checkbox" name="gender" value="F" onclick="gender_func2(this)"/> 여자</label>
<label><input type="checkbox" name="gender" value="F" onclick="gender_func2(this)"/> 기타</label>
</div>
<div><!-- combobox -->
<select name="city">
<option value="">----선택----</option>
<option value="S">----서울----</option>
<option value="P">----부산----</option>
<option value="D">----대구----</option>
</select>
</div>
<div>
<textarea name="content" style="width:700px; height:200px; border:1px solid blue;"></textarea>
</div>
<div>
<input type="button" value="확인" onclick="checkbox_check()"/>
</div>
</form>
</body>
</html>
맨 위 박스를 클릭하면 자동으로 주민번호 앞자리로 커서가 옮겨진다.
앞자리 6글자를 입력하면 자동으로 뒷자리로 커서가 옮겨진다.
운동, 음악감상, 영화를 하나도 체크하지 않으면 경고창을 띄운다.
function gender_func(idx){
var objs = document.getElementsByName("gender");
// 참조된 객체의 모든 checkbox를 모두 푼다.
for(var i=0; i<objs.length; i++){
objs[i].checked = false;
}
// 선택된 checkbox만 선택표시한다.
objs[idx].checked = true;
}
...
<div>
<label><input type="checkbox" name="gender" value="M" onclick="gender_func(0)"/> 남자</label>
<label><input type="checkbox" name="gender" value="F" onclick="gender_func(1)"/> 여자</label>
<label><input type="checkbox" name="gender" value="F" onclick="gender_func(2)"/> 기타</label>
</div>또는
function gender_func2(selectedObj){
var objs = document.getElementsByName("gender");
// 참조된 객체의 모든 checkbox를 모두 푼다.
for(var i=0; i<objs.length; i++){
objs[i].checked = false;
}
// 선택된 checkbox만 선택표시한다.
selectedObj.checked = true;
}
...
<div>
<label><input type="checkbox" name="gender" value="M" onclick="gender_func2(this)"/> 남자</label>
<label><input type="checkbox" name="gender" value="F" onclick="gender_func2(this)"/> 여자</label>
<label><input type="checkbox" name="gender" value="F" onclick="gender_func2(this)"/> 기타</label>
</div>
성별을 체크하면 다른 항목은 체크가 해제된다.
숫자가 아닌 다른 값을 입력하면 자동으로 지워진다.
password : 암호
size : 상자의 크기
maxlength : 값의 최대 길이
radio : 둘 중 하나만 선택 가능
select : 콤보박스
option : select 안에서 선택하는 값. value 값이 없으면 텍스트 값을 받음
<textarea></textarea> 사이에 공간이 있으면 안됨
-script-
focus : 포커스(커서)
blur : focus 제거
9.html
<script>
// call by value
var i = 7;
var j = 12;
var k = i;
i=9;
alert(k); // 7
// call by reference (참조)
var objs = [];
objs[0] = 12;
objs[1] = 13;
var objs2 = objs;
objs2[0] = 5;
alert(objs[0]); // 5
</script>call by reference는 참조하는 의미이므로 하나의 값이 변경되면 나머지도 변경된다.
10.html
<script>
var str = "0123456789";
var rst = str.substr(5);
alert(rst);
</script> 
<script>
var str = "0123456789";
var rst = str.substr(2,5);
alert(rst);
</script> 
<script>
var rst2 = str3.indexOf("@");
alert(rst2);
</script> 
@의 위치를 리턴
@가 없으면 -1을 리턴
11.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.col{
width:120px; height:22px; padding:3px 0px 8px 0px; text-align:center;
font-size:20px; border:1px solid #444444; float:left;
}
.row{
width:1000px; clear:both;
}
</style>
<script>
/*
아이디 이름 나이 성별 국어 수학 평균
id1 홍길동 21 M 90 90 90
id2 전우치 43 M 80 70 75
id3 강일수 22 M 90 80 85
*/
function handler_scores(){
var student = function(id, name, age, kor, eng, math){
this.id = id;
this.name = name;
this.age = age;
this.kor = kor;
this.eng = eng;
this.math = math;
this.getSum = function(){
return this.kor + this.eng + this.math;
};
this.getAvg = function(){
return(this.kor + this.eng + this.math) /3;
};
};
var stu1 = new student("id1", "홍길동", 23);
var students = [];
students[0] = new student("id1", "홍길동1", 23, 88, 65, 90);
students[1] = new student("id2", "홍길동2", 24, 77, 65, 55);
students[2] = new student("id3", "홍길동3", 28, 85, 82, 90);
students[3] = new student("id4", "홍길동4", 25, 55, 87, 65);
students[4] = new student("id5", "홍길동5", 20, 88, 90, 77);
var strHTML = "";
for(var i=0; i<students.length; i++){
strHTML += "<div class='row'>"
strHTML += "<div class='col'>" + students[i].id + "</div>"
strHTML += "<div class='col'>" + students[i].name + "</div>"
strHTML += "<div class='col'>" + students[i].age + "</div>"
strHTML += "<div class='col'>" + students[i].kor + "</div>"
strHTML += "<div class='col'>" + students[i].eng + "</div>"
strHTML += "<div class='col'>" + students[i].math + "</div>"
strHTML += "<div class='col'>" + students[i].getSum() + "</div>"
strHTML += "<div class='col'>" + students[i].getAvg() + "</div>"
strHTML += "</div>"
}
document.getElementById("scores").innerHTML = strHTML;
}
</script>
</head>
<body onload="handler_scores()">
<div id="scores">
</div>
<div class="row">
<input type="button" value="추가" />
</div>
</body>
</html>
개발자로서 성장하는 데 큰 도움이 된 글이었습니다. 감사합니다.