본문 바로가기
JSP/Java Script

2024_06_20_목

by 알케니브 2024. 6. 20.

오늘의 코딩순서

(폴더: oJavaScript)

02폴더

  • array01
  • array02
  • link
  • math03
  • object01
  • object02
  • object03
  • object04
  • object05
  • object06
  • string01
  • string02
  • string03

03폴더

  • dom01
  • dom02
  • dom03
  • dom04
  • function01 + function02
  • function03

04폴더

  • bubblingEvent
  • capturingEvent
  • domBgColor
  • domFgColor
  • domingChg2
  • domimgMenu
  • domInterval01
  • ⭐⭐⭐⭐⭐domJson

오늘의 코딩 포인트

<02폴더>

1) array01

  • document.write(<br>): 자바와의 다른점===> 순서를 밑으로 내려도 변수값이 출력된다!
  • length: 자릿수

2) array02

  •  

3) link

  • 링크넣는법
<script type="text/javascript">
	document.write("네이버".link("https://www.naver.com"));
	document.write("<p>");
	document.write("중앙".link("http://choongang.co.kr"));
	document.write("<p>");
	document.write("다음".link("https://www.daum.net"));
									
</script>

4) math03

  • Math.random()*7: 7보다 작은 i의 값이 랜덤하게 변수에 입력되어 그 값에 맞는 값(여기서는 이미지)들이 랜덤하게 출력됨
<script type="text/javascript">
	var banner = new Array();
	for(var i=0 ; i<7 ; i++)	{
		banner[i] = "../images/"+i +".jpg";
	}
	var ranNumber = Math.random()*7;	
	document.write("ranNumber = "+ranNumber);
	var ran = Math.floor(ranNumber);
	document.write("<br>ran="+ran);
	document.write("<img src="+banner[ran]+">");
	
</script>

5) object01

  • 객체: 변수의 이름은 한글말고 영어로! 한 단어면 모를까, 한 단어여도 중간에 띄어쓰기같은게 들어가면 오류가 나서 출력이 안된다

6) object02

  • 프로퍼티?: property==> 다른 값과 어떤 값이 연결되어 있을때 이 '어떤 값'을 프로퍼티라고 부름 
    데이터 구조와 연관된 속성을 나타냄
     ex) 문자열에는 length라는 property가 포함되어 있는데 이 property는 문자열 안에 있는 문자의 양을 정수로 나타낸 값을 담고 있음
<script type="text/javascript">
	var person = {
			name	: "홍길동",	 // 이름 프로퍼티를 정의
			birthday: "030219",	 // 생년월일 프로퍼티를 정의 
			pId		: "1234567", // 개인 id 프로퍼티를 정의
			/* 생년월일과 개인 id를 합쳐서 주민번호로 반환 */
			fullId	: function()	{
				return this.birthday + this.pId;
			}
	}
	document.write("person.name-->"+person.name+"<p>"); 
	document.write("person.fullId()-->"+person.fullId()+"<p>"); 

</script>

7) object03

  • Append: 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입, 선언을 한 후에 append가 가능하다
  • delete: delete 선언을 한 뒤 삭제가 가능함
<script type="text/javascript">
	var dracura = {
			name : "김준수",
			age : 38,
			addr : "드라큘라"
	}
	
	for (var key in dracura)
		document.write("1."+key+":"+dracura[key]+"<br>");
	
	//2. Append: 선언을 한 후에 append가 가능하다
	dracura.phone = "01022223333";
	document.write("<P>");
	for(var key in dracura)
		document.write("2."+key+":"+dracura[key]+"<br>");
	
	//3.Delete
	delete(dracura.addr);
	document.write("<P>");
	for(var key in dracura)
		document.write("3."+key+":"+dracura[key]+"<br>");
	
</script>

8) object04

  • this
    • 선생님: this를 보면 new 생성자를 생각하자/ 멤버변수, 메소드, 함수들을 생성할 수 있다
    • 자기 자신의 메모리를 가리키는 역할
    • 이 주소를 참조 타입인 클래스 변수에 저장해두면 변수를 통해 객체를 사용할 수 있다
    • 동일한 클래스 내에서 객체 자신의 또 다른 생성자를 호출하는 데 사용
<script type="text/javascript">
	function Dog(color, name, age)	{
		this.color = color;
		this.name = name;
		this.age = age;		
	}	
	var myDog = new Dog("흰색", "하루", 1);
	myDog.family = "시베리안 허스키";	//품종에 관한 프로퍼티를 추가
	myDog.breed = function() {			//털색을 포함한 품종을 반환해 주는 메소드를 추가함
		return this.color + " " +this.family;
	}
	myDog.nameAge = function() {
		return this.name + " " +this.age;//나이를 포함한 품종을 반환해 주는 메소드를 추가함
	}
	document.write("우리 집 강아지는" + myDog.breed() + "입니다.");
	document.write("<p>우리 집 강아지 이름과 나이는 " + myDog.nameAge() + "입니다.");
	

</script>
</head>
<body>
	<h1>object04</h1>
	<p>생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없음. 
	<br> 다만 생성자 함수는 아래 두 관례를 따름
	<br> 함수 이름의 첫 글자는 대문자로 시작.
	<br> 반드시 'new' 연산자를 붙여 실행
	<br> 생성자 함수엔 보통 return 문이 없음. 
	<br> 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 
	<br> 반환문을 명시적으로 써 줄 필요가 없음
</body>
</html>

9) object05: 2종의 데이터를 섞어 쓰는 방법

  • length뒤에는 ()를 쓰지 않음
  • push: 배열의 끝에 하나 이상의 항목을 추가하는 함수
  • pop: 배열의 가장 마지막 요소를 제거함
  • shift: 배열의 제일 첫 요소를 제거함
  • unshift: 하나 이상의 요소를 배열의 가장 앞에 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var arr = [1, true, "JavaScript"];
	document.write("arr.length-> " + arr.length+"<br>");
									//length뒤에는 ()를 쓰지 않음
	document.write("1. arr-> " + arr+"<br>");
	document.write("arr.push('자바스크립트')-> " + arr.push("자바스크립트")+"<br>");
	document.write("2. arr-> " + arr+"<br>");
	document.write("arr.push(2.'거짓')-> " + arr.push(2,"거짓")+"<br>");
	document.write("3. arr-> " + arr+"<br>");
	
	document.write("arr.pop()-> " + arr.pop()+"<br>");
	// pop: 배열의 가장 마지막 요소를 제거함
	document.write("arr.length-> " + arr.length+"<br>");
	document.write("arr-> " + arr+"<hr>");
	
	document.write("arr.shift()-> " + arr.shift()+"<br>");
	// shift: 배열의 제일 첫 요소를 제거함
	document.write("arr.length-> " + arr.length+"<br>");
	document.write("arr-> " + arr+"<hr>");
	
	document.write("arr.unshift('servlet')-> " + arr.unshift("servlet")+"<br>");
	// unshift: 하나 이상의 요소를 배열의 가장 앞에 추가
	document.write("arr.length-> " + arr.length+"<br>");
	document.write("arr-> " + arr+"<hr>");
	
	
	
</script>
</head>
<body>
	<h1>object05</h1>
</body>
</html>

10) object06

  • join(): 배열의 모든 요소를 연결해 하나의 문자열로 만듬, space 입력값(띄어쓰기)까지 배열처리를 해줌
    하지 않으면 값이 비어버림
  • slice(): 배열의 특정 범위의 요소를 잘라내어(slice) 추출한 결과를 새로운 배열로 반환하는 함수
<script type="text/javascript">

	//Index		0	1			2			3
	var arr = [1,	true,	"JavaScript",	'End'];	
	//join을 하지 않으면 값이 비어버린다
	document.write("arr.join()->" +arr.join() + "<br>");
	//join을 하면  space입력값(띄어쓰기)까지 배열처리를 해준다
	document.write("arr.join(' + ')->" +arr.join(' + ') + "<br>");
	document.write("arr.join(' ')->" +arr.join(' ') + "<br>");
	document.write("arr.join('')->" +arr.join('') + "<hr>");
	
	document.write("arr.slice(1, 2)->" +arr.slice(1, 2) + "<br>");
	//join을 하지 않으면 끝까지 나와버린다
	document.write("arr.slice(1, 3)->" +arr.slice(1, 3) + "<br>");
	
	document.write("arr.slice(1)->" +arr.slice(1) + "<hr>");
	
	document.write("arr.toString()->" +arr.toString() + "<hr>");
	
</script>

11) string01

  • \: \ 다음에 나오는 특수문자를 인식해줌
  • ||: 논리연산자, 둘 중 하나 이상이 참이면 참을 반환
  • ==: 동등 연산자, 피연산자들끼리 비교해서 서로 동일한지 확인하는 연산자
  • do-while문: 조건문을 판단하기 전에 do 블록의 코드를 참과 거짓을 따지지 않고 일단 먼저 실행, 그 다음에 조건문을 판단하여 결과가 true면 do 블록을 다시 실행 ===> 이 과정을 계속해서 반복함
    다만, while문이 false면 실행되지 않음
do{
	//반복할 코드
}
while(조건문);
<script type="text/javascript">
	var len = 0;
	do {
		var str = prompt("6자 이하 입력하세요","");
		len = str.length;
		if(len==0)
			alert("입력 안 했네");
		
	}while(len> 6 || len<1);
	document.write("입력한 글 : \" " + str +"\", 길이 : " + len + "<p>");	
</script>

 

12) string02

  • toUpperCase: 전부 대문자로 변환하기
  • toLowerCase: 전부 소문자로 변환하기
  • substring (x,y): 인덱스 x부터 y바로 앞인 y-1의 값까지 자른다 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	//컴퓨터언어는 인덱스 순서를 매길 때 0이 아닌, 1부터 시작!
	//					012345678
	var a = "Girl's Generation";
	var b = a.toUpperCase();	//전부 대문자로 변환하기
	document.write(b+"<p>");
	var c = a.toLowerCase();	//전부 소문자로 변환하기
	document.write(c+"<p>");
	var d = a.substring(3,8);	//인덱스 3부터 8바로 앞인 7의 값까지 자른다
	document.write(d);
	

</script>
</head>
<body>
	<h1>string02</h1>
</body>
</html>

13) string03

  •  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//			01234567890
//띄어쓰기까지 인덱스 값으로 쳐줌
	var str	=	"처음엔 친구였어. 친구 풋풋한 동갑내기 친구";
	document.write("<center>");
	document.write("indexOf( '친' ) : " + str.indexOf( '친' )+"<hr>");
	document.write("lastIndexOf('친') : " + str.lastIndexOf(' 친 ')+"<hr>");
	document.write("</center>");

</script>
</head>
<body>
	<h1>string03</h1>
</body>
</html>

 

<03폴더>

14) dom01 (document object model)

  • function: function을 먼저 만들어야 even 자리의 값이 제대로 실행됨, function이 없다면 이 자리를 건너뛰고 아래의 even으로 건너가버림
  • getElementById: 엘리먼트를 반환하는 메소드, HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환
  • element: node의 한 종류, 주로 <p>, <div> 같은 태그를 사용해서 작성된 노드
  • innerHTML: innerHTML은 'Element'의 속성으로, element내에 포함 된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다
    innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function chgItem() {
	//function을 먼저 만들어야 even자리의 값이 제대로 실행됨
	//function이 없다면 이 자리를 건너뛰고 아래의 even으로 건너가버림 
		var setItemId = document.getElementById("even");
		//해당 ID를 가지고 있는 첫번째 요소만 선택
		//setItemId: 태그객체 자기 자신을 선언
		setItemId.style.color = "orange";
		//해당 name를 가지고 있는 요소 선택
	}
	
	function chgText()	{
		var setPId = document.getElementById("changeText");
		setPId.innerHTML = "changeText 문장 대체";
	}
</script>
</head>
<body>
	<h1>dom01</h1>
	<h4>id 이용 선택</h4>
	<ul>
		<li>			첫번째 Item</li>
		<li id="even">	두번째 Item</li>
		<li>			세번째 Item</li>
		<li>			네번째 Item</li>
		<li>			5번째 Item</li>
	</ul>
	<p id="changeText">교환</p>	
	
	<button onclick="chgItem()">even</button><p>
	<button onclick="chgText()">changeText</button><p>
	
</body>
</html>

 

15) dom02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function chgRedColor(pColotText) {
		var str = document.getElementById("text");
		str.style.color = "red";
		str.innerHTML = pColotText
	}
	function chgOrangeColor(pColotText) {
		var str = document.getElementById("text");
		str.style.color = "orange";
		str.innerHTML = pColotText
	}
</script>
</head>
<body>
	<h1>dom02 Event 통해 수행</h1>
	<p id="text">기본색 검정</p>	<!-- 위의 str이 이거 -->
	<button ondblclick="chgRedColor('빨간색')">빨간색</button><p>
	<!-- ondblclick: 더블클릭해라 -->
	<button onclick="chgOrangeColor('오렌지색')">오렌지색</button>
</body>
</html>

'빨간색' 버튼 더블클릭하면 빨간색 나옴, '오렌지색' 버튼 한 번 클릭하면 오렌지색 나옴

16) dom03

  • var setFirstItem = document.getElementsByName("first");
    : name 속성값이 "first"인 모든 요소를 선택
  • for (var i = 0; i < setFirstItem.length; i++)
    : 선택된 모든 요소의 텍스트 색상을 변경함
  • setFirstItem.item(i).style.color  :   객체배열, 배열값처럼 설정 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function chgColor()	{
		var setFirstItem = document.getElementsByName("first");
		//name 속성값이 "first"인 모든 요소를 선택
		console.log('setFirstItem'+setFirstItem);
		for (var i = 0; i < setFirstItem.length; i++)	{
			//선택된 모든 요소의 텍스트 색상을 변경함
			setFirstItem.item(i).style.color = "red";
			//객체배열, 배열값 처럼 설정 가능
			
		}
	}
</script>
</head>
<body>
	<h1>dom03</h1>
	<h4>name 속성을 이용한 선택</h4>
	<p name="first">첫 번째 단락이예요!</p>
	<ul>
		<li name="first">첫 번째 아이템이예요!</li>
		<li>두 번째 아이템이예요!</li>
		<li name="first">세 번째 아이템이예요!</li>
		<li>네 번째 아이템이예요!</li>
		<li>다섯 번째 아이템이예요!</li>
	</ul>
	<button onclick="chgColor()">first색상 Red 변경</button>
	
</body>
</html>

17) dom04

  • addEventListener: 선택한 요소에 이벤트 리스너를 등록

 

18) function01 + function02

  • addNum

19) function03

 

<04폴더>

20) bubblingEvent

  • bubbling: 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작함, 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작
  • Listener: listener의 앞의 값을 미리 등록하는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#divBox	{
		width: 100%;
		height: 100px;
		border: 2px solid red;
		
	}
	#paraBox	{
		width: 80%;
		height: 50px;
		border: 2px solid orange;
	}
	
	#spanBox	{
		border: 2px solid green;
	} 
</style>
</head>
<body>
	<h1>버블링(bubbling) 이벤트 전파</h1>
	<h5>한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 
		이어서 부모 요소의 핸들러가 동작함</h5>
	<div id="divBox">
		<p id="paraBox">박스 안의 여러 곳을  <span id="spanBox">클릭</span>해 보세요!</p>
	</div>
		<p id="text"></p>
		
		<script type="text/javascript">
		
			function clickDiv(event)	{
				document.getElementById("text").innerHTML += "div 요소를 click 하셨네요!<br>";
			}
			function clickPara(event)	{
				document.getElementById("text").innerHTML += "p 요소를 click 하셨네요!<br>";
			}
			function clickSpan(event)	{
				document.getElementById("text").innerHTML += "span 요소를 click 하셨네요!<br>";
			}
		
		
		// 각 요소마다 버블링 방식으로 click 이벤트 리스너를 등록함.
			document.getElementById("divBox").addEventListener("click" , clickDiv);
				// divBox 영역 안에서 click이벤트가 시작되면 clickDiv를 발생시켜라
			document.getElementById("paraBox").addEventListener("click" , clickPara);
			document.getElementById("spanBox").addEventListener("click" , clickSpan);
		</script>
</body>
</html>

21) capturingEvent (↔ bubblingEvent)

  • bubbling으로 할지 capturing으로 할지는 true값이냐 옵션이냐로 정한다

22) domBgColor: 마우스 커서를 색깔판에 올리면 그에 맞는 색으로 배경색이 변함

  • 전역변수:
  • ㅇㅇ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//	index		0		1		2			3		4		5		6		
	var color = ["red", "orange", "yellow", "green", "blue", "navy", "violet"];
	//전역변수
	function chk(num)	{
		document.body.style.backgroundColor = color[num];
	}
</script>
</head>
<body bgcolor="black">
	<h1>dom 색상 바꾸기</h1>
	<table border="1"	width="200"	height="80"> 
		<tr>
			<td bgcolor="red"		onmouseover="chk(0)"></td>	
			<td bgcolor="orange"	onmouseover="chk(1)"></td>	
			<td bgcolor="yellow"	onmouseover="chk(2)"></td>	
			<td bgcolor="green"		onmouseover="chk(3)"></td>	
			<td bgcolor="blue"		onmouseover="chk(4)"></td>	
			<td bgcolor="navy"		onmouseover="chk(5)"></td>	
			<td bgcolor="violet"	onmouseover="chk(6)"></td>	
		</tr>	
	</table>
</body>
</html>

23) domFgColor: 마우스 커서를 색깔판에 올리면 폰트와 배경색이 변함

 

24) domingChg2(HTML 4.0 설정)

 

25) domimgMenu

26) domInterval01

 

27) ⭐⭐⭐⭐⭐domJson >>spring까지 나오는 개념

 

오늘의 숙제

  • 04>>domFgColor: domBgColor 응용해서 자기 위치의 전 위치의 값의 색이 나오게 하기
    내가 한 것↓↓↓  
<script type="text/javascript">
	//index		0		1		2			3		4		5		6		
	var color = ["red", "orange", "yellow", "green", "blue", "navy", "violet"];
	function chk(num)	{
		document.body.style.backgroundColor = color[num];
	}
	function chk(num)	{
		document.body.style.color = color[num];
	}

 

     정답

<script type="text/javascript">
	//index		0		1		2			3		4		5		6		
	var color = ["red", "orange", "yellow", "green", "blue", "navy", "violet"];
	function chk(num)	{
		document.fgColor = color[num];
		if(num==0)	document.bgColor = color[6];
		else		document.bgColor = color[num-1];
	}
	
</script>

'JSP > Java Script' 카테고리의 다른 글

2024_07_10_수  (0) 2024.07.10
2024_07_09_화  (0) 2024.07.09
2024_07_08_월  (0) 2024.07.08
2024_06_21_금  (0) 2024.06.21
2024_06_19_수  (0) 2024.06.19

관련글

티스토리툴바