728x90
반응형
□ 자바스크립트 기본
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
// 화면출력 // 객체.속성 객체.메소드
document.write("자바스크립트 안녕"); // 객체.메소드()
document.write("<h1>자바스크립트 안녕</h1>");
// document : 속성, 메소드, 이벤트
// 메시지박스 출력 (자바 JOption...)
window.alert('암호가 틀렸습니다.'); // 객체.메소드() // 이상한 점 : 실행하면 write보다 alert이 먼저 수행된다.
window.alert('암호가 틀렸습니다', '다시 입력해주세요.'); // 에러는 안 나지만, 구분자는 의미가 없다. '암호가 틀렸습니다'만 찍힘
window.alert('암호가 틀렸습니다 ' + '다시 입력해주세요.');
var aa = 100;
window.alert('암호가 틀렸습니다 ' + aa);
// 계층구조상 window 객체가 최상위, window 객체만 생략가능
alert('이름이 뭐야?');
confirm("이름 입력 안 했구만"); // 확인, 취소
// 확인인지 취소인지 알려면?
var bada = confirm("이름 입력 안 했구만");
document.write(bada); // 확인누르면 true, 취소면 false
// name을 쓰지 말 것 // window.name 속성이 있다.
var irum = prompt('이름을 입력하라는', '홍길동');
document.write('<h1>반가워! ' + irum + "님!</h1>");
var irum2 = prompt('이름을 입력하라는', '홍길동');
if(irum2 == null)
document.write('<h1>이름을 입력해주세요</h1>');
else
document.write('<h1>반가워! ' + irum + "님!</h1>");
aa = 30;
// alert(typeof(aa)) // number
bb = 30.5;
// alert(typeof(bb)) // number
pp = "ondal";
// alert(typeof(pp)); // string
document.write(aa + '\t' + bb + '\t' + pp + "<br>");
let hhh = 100; // let는 중복을 찾아주는 역할
let hhh2 = 200;
document.write(hhh);
// 자바 메소드 1형식
// 자바 호출문 : kaja();
// 자바 정의문 : public static void kaja() {sysout..}
// 자바스크립트 함수 1형식
// 호출문 : kaja();
// 정의문 : function kaja() {document.write()....}
// 일반적인 호출 방법 : 함수 호출문은 body에 함수 정의문은 head
function kaja(){
var irum2 = "babo"; // 지역
document.write(irum2 + '<br>');
irum3 = "hong"; // 전역
}
</script>
</head>
<body>
<script>
/* kaja();
document.write(irum3 + '<br>');
alert('네이버로 가는건가');
// bom : window.location = "url" 객체.속성 = 값
window.location = "http://www.naver.com" */
// 오늘 날짜 출력
var oneul = new Date(); // 내장객체
document.write(oneul + '\t' + oneul.getDate());
</script>
</body>
</html>
□ 자바스크립트 STMT
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
/*
입사년도를 입력받아 화면출력하는 자바스크립트 프로그램을 작성하시오
단, 추후 계산 필요를 감안하여 number로 출력
*/
bada = prompt('입사년도를 입력하시오', '2024');
year = parseInt(bada);
document.write(year + '<br>');
</script>
</body>
</html>
□ function 1
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function kaja(movie){ // 2형식
document.write("우리 모두 ", movie, " 보러 가자<br>");
}
function kaja2(play){ // 3형식
return "종로" + play + " 가서 회전목마타고 놀자";
}
</script>
</head>
<body>
<script>
/* kaja("영화")를 호출하여 "우리 모두 영화보러 가자"를 출력하는 자바스트립트 함수 2형식 프로그램을 작성하시오 */
kaja("영화");
var bada = kaja2("놀이동산") // 함수 3형식으로 작성해주세요.
document.write(bada);
</script>
</body>
</html>
□ function 2 (외부파일 호출)
* bakkat.js
/**
*
*/
function kaja(){
document.write('안녕 외부 js');
}
* html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="author" content="hong">
<meta name="discription" content="자바스크립트 외부 js파일을 호출">
<title>Insert title here</title>
<script src="bakkat.js" charset="UTF-8"></script> <!-- import -->
</head>
<body>
<script>
kaja();
</script>
</body>
</html>
□ DOM 1
bom vs dom
1. bom은
window 객체 (속성, 메소드, 이벤트)
|
document 객체 location객체 .......
image
form
<head> <html> 접근 x
2. dom (document object model)
1) bom의 일부
2) <head> <html> 접근가능, 동적변경(해당 구성원의 내용이나 색)
3) body같은 태그를 자바스크립트에서 활용할 수 있도록 객체로 인정
4) dom은 html을 tree 구조로 표현하고 인식 (어플 flutter - widget tree)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function kaja(){
/* 계층구조대로 */
alert(document.form1.irum.value);
alert(document.title.value) // undefined // 접근문제 생김
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="irum"><br>
<input type="button" value="가자 서버로" onclick="kaja()">
<!--
<input type="submit" value="가자 서버로">
submit 대신 button을 사용하고 이벤트를 걸어준다
html 이벤트방식 : on이벤트 = "이벤트처리함수"
-->
</form>
</body>
</html>
□ DOM 2
마우스를 따라다니는 이미지
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!--
-->
<script>
/* 아 안에 있는 것은 모두 자바스크립트다 */
// 객체.속성 = 값 --> 객체.이벤트 = 이벤트 처리함수(event handler)
document.onmousemove = function(){ // 값
// 그림좌표(100, 50) <-- 마우스 좌표(100, 50)
// DOM(Document Object Model) // 객체.속성 : event라는 객체
document.getElementById('krim').style.left = event.clientX + "px"; // html5에서 px입력
document.getElementById('krim').style.top = event.clientY + "px";
/* krim을 가져오기 위해 name = 'krim'을 사용하지 않는다. */
// var krim = document.getElementById('krim')
// krim.style.top = event.clientY + "px"
}
</script>
</head>
<body>
<!-- 그룹태그 -->
<!-- id= 은 css # x -->
<!-- 접근을 위한 keyword가 id --> <!-- css -->
<span id="krim" style="position:absolute;">
<img src="rabbit.jpg" border="0" name="krim2" width="50px" height="50px">
</span>
<!-- span 태그는 마우스와 맞추기 위해 사용, div는 띄어쓰기 때문에 x -->
</body>
</html>
<!--
dom의 접근방법
ms IE document.all 객체.속성 방식
document.getElementById() 객체.메소드
-->
□ if 1
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
/*
지역
*/
var na2 = prompt('회원번호 두자리 이상 입력하세요.', 12) // 전역
// alert(typeof na2) // typeof는 연산자
if(na2 >= 12)
alert('초록반으로 가세요')
else if(na2 >= 10){ // "10" 사용이 원칙이지만
alert('노랑반으로 가세요')
} else
alert('파랑반으로 가세요')
</script>
</head>
<!--
회원번호 2자리를 입력받아 12이상이 입력되면 "초록반으로 가세요"라는 메시지창 출력,
10 이상이면 노랑반, 다른 나이의 어린이면 파랑반으로 가세요.
-->
<body>
</body>
</html>
□ if 2 (삼항연산자)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
na2 = prompt('나이를 입력하세요', 35);
// alert(typeof na2);
var ban = (na2 >= 60) ? '실버반' : '일반반';
alert(ban + "으로")
</script>
</head>
<body>
<!--
자바의 3항 연산자
if(조건)
true면
else
false면
(조건) ? true면 : false면
Q) 나이가 60이상이면 "실버반"으로 다른 사람은 모두 "일반반"
단, 3항 연산자로
-->
</body>
</html>
□ switch문
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>점수를 학점으로 만들어</title>
<!-- 점수를 입력받아 학점을 출력하시오. 단 prompt와 switch 사용 -->
</head>
<body>
<script>
var jumsu = prompt("점수를 입력하세요")
if(jumsu == null)
alert("취소하셨네요");
else{
jumsu = Math.floor(jumsu/10)
switch(jumsu){
case 10:
case 9:alert("A 학점");break;
case 8:alert("B 학점");break;
case 7:alert("C 학점");break;
case 6:alert("D 학점");break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:alert("F 학점");break;
default:alert("잘못된 값을 입력하셨네요.");break;
}
}
</script>
</body>
</html>
□ lotto 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<br><br><br>
<h2>행운의 로또 번호 출력하기</h2><br><br>
<script>
document.write("<h1>로또 10게임 위해 새로고침 눌러!</h1>")
/*
(1단계)
document.write(Math.floor(Math.random() * 10000) % 45 + 1 + " ")
document.write(Math.floor(Math.random() * 10000) % 45 + 1 + " ")
document.write(Math.floor(Math.random() * 10000) % 45 + 1 + " ")
document.write(Math.floor(Math.random() * 10000) % 45 + 1 + " ")
document.write(Math.floor(Math.random() * 10000) % 45 + 1 + " ")
document.write(Math.floor(Math.random() * 10000) % 45 + 1 + " ")
(2단계)
document.write(Math.ceil(Math.random() * 45)+ " ");
document.write(Math.ceil(Math.random() * 45)+ " ");
document.write(Math.ceil(Math.random() * 45)+ " ");
document.write(Math.ceil(Math.random() * 45)+ " ");
document.write(Math.ceil(Math.random() * 45)+ " ");
document.write(Math.ceil(Math.random() * 45)+ " ");
*/
// 그룹태그를 사용하여 묶어야 디자인이 시작됨
// 이때 자바스크립트에 html을 사용하는 방법은
// 자바스크립트 문장(html문장)
// 즉, document.write("<h1>제목</h1>")
// 그렇다면 <span>태그를 사용하여 그룹으로 묶는 방법은?
document.write("<span style='font-size:80pt;color:blue;'>")
document.write(Math.ceil(Math.random() * 45)+ " ")
document.write("</span>")
document.write("<span style='font-size:80pt;color:orange;'>")
document.write(Math.ceil(Math.random() * 45)+ " ")
document.write("</span>")
document.write("<span style='font-size:80pt;color:violet;'>")
document.write(Math.ceil(Math.random() * 45)+ " ")
document.write("</span>")
document.write("<span style='font-size:80pt;color:pink;'>")
document.write(Math.ceil(Math.random() * 45)+ " ")
document.write("</span>")
document.write("<span style='font-size:80pt;color:green;'>")
document.write(Math.ceil(Math.random() * 45)+ " ")
document.write("</span>")
document.write("<span style='font-size:80pt;color:brown;'>")
document.write(Math.ceil(Math.random() * 45)+ " ")
document.write("</span>")
// 자바스크립트 문법에 맞추기 위해 자바스크립트 문장(html태그)
</script>
</body>
</html>
□ 구구단 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>구구단 중 3단만</h1>
<!--
<table>
<tr>
-->
<script>
document.write("<table border='2'>")
var j;
for(j=1; j<=9; j++){
document.write("<tr align='center'><td>") // 줄 만들고 칸 시작
document.write("3 * " + j + " = " + "</td><td>" + (3 * j) + "</td></tr>"); // j가 1부터 9까지 변할 경우를 가정해서
}
document.write("</table>")
</script>
<h1>구구단 전체</h1>
<script>
document.write("<table border='3'>")
var i;
for(i=2; i<=9; i++){
document.write("<tr><td colspan='2' align='center'>" + i + "단</td></tr>")
var j;
for(j=1; j<=9; j++){
document.write("<tr align='center'><td>") // 줄 만들고 칸 시작
document.write(i + " * " + j + " = " + "</td><td>" + (i * j) + "</td></tr>"); // j가 1부터 9까지 변할 경우를 가정해서
}
}
document.write("</table>")
</script>
</body>
</html>
□ 자바스크립트 배열
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>자바스크립트의 배열</title>
</head>
<body>
<!--
자바배열
int [] aa = new int[5];
자바스크립트의 배열
var aa = new Array();
var bb = [];
(참고) 자바스크립트 객체 만들기 중 하나
var cc = {};
-->`
<script>
var bae = []; /* 배열 */
bae[0] = "sakwa";
bae[1] = 'kam';
for(var i=0; i<bae.length; i++){
document.write(bae[i] + "\t")
}
document.write("<br><br>");
document.write("아하 여기까지 줄바꿈이 되었구만<br>");
// 자바 배열의 초기치
// int [] aa = {100, 200}
// 자바스크립트의 초기치
// var bae = ["sakwa", "kam"]
// var aa = new Array("sakwa", "kam")
// var aa = new Array(5) --> 초기치5 아님, 5칸짜리 배열 만들어
// var aa = new Array(50, 100)
// 자바스크립트의 sort(배열의 대표명.sort())
var intBae = [30, 80, 70]
intBae.sort(); // 오름차순
// 결과출력 (배열의 대표명으로 전체 출력 가능)
document.write(intBae + "<br>");
// 자바에서는 내림차순 sort가 없다.
// 그래서
// 1) 뒤에서부터 출력하거나
// 2) 배열 ==> 컬렉션 ==> 내림차순 처리하고 다시 배열로 복귀
// 자바스크립트의 내림차순 sort (배열의 대표명.reverse())
intBae.reverse();
document.write(intBae + "<br>");
// 다양한 숫자들의 sort
var intBae2 = [3, 5000, 100]
intBae2.sort();
document.write(intBae2 + "<br>"); // 100,3,5000로 sort가 됨. 1, 3, 5로 비교한 것
// 문자로 취급되기 때문에
// A > B
// 01000001 01000010
// 41 42
// 65 66
// tom toma
// tom > jerry
// 제대로 sort 하려면? 즉, 문자 style비교 > 숫자비교
// intBae2.sort(); // 오름차순 방식 즉, sort() 메소드 호출 1형식에서 2형식 호출로 변경
// intBae2.sort(aa);
// 정의문 : function sort(aa){
// 숫자방식으로 sort해
// }
var intBae3 = [3, 5000, 100];
intBae3.sort(function(ap, dui){
return ap-dui;
}); // 오름차순
document.write(intBae3 + "<br>");
// 람다식(lamda = arrow function expression)
intBae3.sort((ap, dui) => ap-dui) // 오름차순
document.write(intBae3 + "<br>");
// 출력시 for-in 필수
for(var imsi in intBae3){
document.write(imsi + "\t" + intBae3[imsi] + "<br>");
// 호수 // 내용
}
// 자바에서 객체 만들기
// new로 만든다
// 자바스크립트에서는
// var aa = "ondal"; // aa 기억창고에 "ondal" 넣어라
// var aa = {} // 객체
// 객체는 속성, 메소드, 자바인경우 private, 초기치는 setPrice()
// 자바스크립트에서 객체를 만들고 초기치를 넣는 경우
// 비동기처리는 Ajax (by 자바스크립트 언어)
// ==> 자바스크립트를 줄여서 간단히 사용가능한 것이 jQuery
// jQuery와 Ajax 코딩시 JSON 기법으로 한다.
// 자바같으면 class, 속성, 메소드
// 자바 객체는 속성, 메소드, 자바인경우 private, 초기치는 setPrice()
// 자바스크립트 객체만들고 속성에다가 값을 주겠다 할 경우
// Dogulas Clockford JSON(JaaScript Object Notation)을 사용
// var carObj={} // (1) 객체 생성
// 초기치 줄 경우 속성명:값 (key : value)
var carObj = {color:"red", door:4, price:30000000};
for(var imsi2 in carObj){
document.write(imsi2 + "\t" + carObj[imsi2] + "<br>");
} // key // value
// JSON 기법이 뭐냐? 자료교환 방식 (경량)
// jQuery와 Ajax 코딩시 // soring - spring boot - spring cloud (MSA : 마이크로서비스, 분산처리개발)
</script>
<script>
var Yeosachin = {
noon:"멋있어", // 속성
sungkyuk:"착함",
bab:function(){ // 메소드
alert("발리먹음");
}
};
</script>
<script>
// 객체.속성
alert(Yeosachin.noon + " " + Yeosachin.sungkyuk);
// 객체.메소드
Yeosachin.bab();
</script>
</body>
</html>
□ InnerHTML 1
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function kaja(){
// sysout (객체.price)
alert(document.getElementById("aa").innerText);
// id = aa는 dom. <table>에 접근 // id = aa안에 있는 text 다 나와라.
alert(document.getElementById("aa").innerHTML);
// id = aa 안에 있는 모든 태그내용 다 나와라, 즉 id = aa가 표현된 <table>부분은 안 나옴
/* <tr>
<th>love</th> <!-- 제목 -->
</tr>
<tr>
<td> <h1 onclick:"kaja()"> I love you </h1> </td>
</tr> */
alert(document.getElementById("aa").outerText);
alert(document.getElementById("aa").outerHTML);
alert(document.getElementById("aa").textContent); // innerText, 디자인 x
} // IE 4종류 w3c 2종류만 채택 (innerHTML, outerHTML), chrome은 다 서비스
// 단, text 처리를 위해서 textContent를 사용하면 된다.
/*
어떤 범위 표시를 위한 속성
inner는 그 안쪽 범위, outer는 해당 라인을 포함한 안쪽
예를 들어
<table id=aa> <tr> inner는 이 경우에 <table> 제외하고 tr부터, outer는 <table> 포함
text, html 차이점 : 글자와 태그포함의 차이
innerText
innerHTML
outerText
outerHTML
*/
</script>
</head>
<body>
<div></div>
<div></div> <!-- (1000-200) / 2 ==> 400 (400, 400) ==> 사진 왼쪽 좌표 -->
<script> /* (윈도우화면 가로 = 사진 세로) / 2 */
alert("윈도우화면크기 : " + window.screen.width + " " + screen.height)
// BOM 사용 : 윈도우객체.속성
</script>
<table id="aa"> <!-- id가 있다는 것은 css이거나 dom이라는 의미 가급적 css는 class로 dom은 id로.. -->
<tr>
<th>love</th> <!-- 제목 -->
</tr>
<tr>
<td><h1 onclick="kaja()"> I love you </h1></td>
</tr>
</table>
</body>
</html>
□ InnerHTML 2 (이미지)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function nawa(){
var coffee11 = document.getElementById("coffee1"); // coffee1 : id 이름
coffee11.innerHTML = "<img src='coffee.jpg'>"; // 객체.속성 = 값
alert(coffee11.innerHTML) // --> inner 범위에 있는 HTML 모두를 메시지로 출력
// 객체.속성
}
// 접근, 동적변경(별도 메소드 사용도 추가됨)
function kaja(){
// document.getElementById("textid1").innerHTML
var t11 = document.getElementById("textid1"); // id 이름
t11.innerHTML = "<h1>짜----잔----</h1>"; // 객체.속성 = 값
// <div id="textid1"><h1>짜----잔----</h1></div>
// t11.textContent = "짜--잔--" // 글자만, 디자인은 x
}
</script>
</head>
<!--
value를 대체하는 속성(IE)
innerHTML 표준
innerText
outerHTML 표준
outerText
----------------------------
1) 어떤 그림이나 내용이 들어갈 공간
<div></div>
2) 값을 넣는 방법은
위에 나온 innerHTML
3) 값을 대체하는 것도
<div>ondal</div>
innerHTML를 이용하여 ondal 대신에 babo로 변경대체가능
-->
<body> <!-- window > document > form > img, input -->
<form name="form1">
<img src="coffee.jpg" width="200" height="150" onclick="nawa()">
<div id="coffee1"></div><!-- 그림이 나올 공간을 준비 -->
</form>
<form>
<input type="button" value="문자를 추가하자" onclick="kaja()">
<div id="textid1"></div><!-- 글자가 나올 공간을 준비 -->
</form>
</body>
</html>
□ InnerHTML 3 (이미지 2)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
var kab; // 전역
var i = 1; // 전역
function nawa(){
kab = "coffee" + i; // 문자 + 숫자 = 문자숫자
var coffee11 = document.getElementById(kab); // coffee1 : div에 있는 id 이름
coffee11.innerHTML = "<img src='coffee.jpg' width='200' height='150'>"; // 객체.속성 = 값
i++;
}
</script>
</head>
<body>
<form name="form1">
<img src="coffee.jpg" width="200" height="150" onclick="nawa()"> <!-- 메소드 1형식 호출문 -->
<div id="coffee1"></div>
<div id="coffee2"></div>
<div id="coffee3"></div>
<div id="coffee4"></div>
<div id="coffee5"></div>
<div id="coffee6"></div>
</form>
</body>
</html>
□ appendChild (텍스트)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
/*
GUI
add()
xml : 조직적 체계적 ==> 전송, 환경설정
<food>
<name></name>
<price></price>S
</food>
food가 parent node / name, price가 child node (sibling)
*/
function kaja(){
var moonja1 = document.createTextNode("문자가 없다가 이게 들어갑니다");
document.getElementById("textid1").appendChild(moonja1)
// <div id="textid1">문자가 없다가 이게 들어갑니다</div>
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="문자를 추가하자" onclick="kaja()">
<div id="textid1"></div>
</form>
</body>
</html>
□ appendChild (그림)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
// window : alert(), confirm()
function nawa(){ // 동적처리
var krim = document.createElement("img"); // DOM < img
krim.setAttribute("src", "coffee.jpg"); // <img src="coffee.jpg"> // 객체.메소드()
krim.setAttribute("width", "200");
krim.setAttribute("height", "150");
krim.setAttribute("id", "coffeecoffee");
// <img src="coffee.jpg" width="200" height="150" id="coffeecoffee">이 만들어짐
document.form1.appendChild(krim);
// 추가된 커피그림이 기린 그린 다음에 append
}
function soomja(){
if(document.getElementById("coffeecoffee")) // 지울 그림이 있는가?
var f = document.getElementById("coffeecoffee");
f.parentNode.removeChild(document.getElementById("coffeecoffee"));
}
// 삭제는 앞에 있는 것부터 지워진다.
</script>
</head>
<body>
<form name="form1">
<img src="coffee.jpg" width="200" height="150" onclick="nawa()">
<img src="daram.jpg" width="200" height="150" onclick="soomja()">
<!--
<img...> 태그가 여기부터 add됨
필요한 것은 완성된 img 태그가 필요 == 그런 다음 add 해야 함.
그러므로 지금부터 <img src="coffee.jpg" width="200" height="150">라는 태그를 만들어야 함
-->
</form>
</body>
</html>728x90
반응형
