본문 바로가기
컴퓨터 프로그래밍/수업

2020.05.25_1

깝돌이 2020. 5. 25. 12:41

JQuery(javaScript library)->event

:bootstrap!!

-> ui에서 로컬 스토리지가 중요합니다. 이것을 잘 다룰줄 알아야합니다. 지금은 모르지만 앞으로 vue.js에서 또 사용 할 것입니다. session? 뷰라는 기술은 session을 못씁니다. 결론적으로 로컬스토리지를 써야합니다. 내용은 굉장히 간단합니다. 이와 관련된 내용은 JQuery후에 할 예정입니다. page를 만들면 로직을 연결할 수 있습니다. 

javascript에서 중요한것이 또 AJax: 비동기화:(acynchonized javaScript XML)입니다. 자바스크립트로 할 수 있다는 말은 JQeury로도 가능하다는 말입니다. 

 

select

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select</title>

<script type="text/javascript">
	function selectLine(){
	//alert("^^");// 실행되는지 확인
	var sub = document.subwayFrm.line;
	if(sub.value != null)
		alert(sub.value+" 노선을 선택!!");
}

</script>
</head>
<body>
	<form name ="subwayFrm"> 
		<select name = "line" onchange="selectLine()"><!-- onclick을 하면 선택하기 전에 실행이 되버림 -->
		<!-- check box는 화면에 보여지는 거는 써주는 거고, value가 전달 된다.   -->
		<!--select는 써있는게 바로 전달 될수 있습니다. 보여지는 거랑 다른걸 보내고 싶을때는 value를 써줍니다.  -->
			<option value = " ">---호선---</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
		</select>	
	</form>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select</title>

<script type="text/javascript">
	function selectLine(){
	//alert("^^");// 실행되는지 확인
	var sub = document.getElementById("sline");
	if(sub.value != null)
		alert(sub.value+" 노선을 선택!!");
}

</script>
</head>
<body>
	<form name ="subsayFrm"> 
		<select name = "line" onchange="selectLine()" id = "sline"><!-- onclick을 하면 선택하기 전에 실행이 되버림 -->
		<!-- check box는 화면에 보여지는 거는 써주는 거고, value가 전달 된다.   -->
		<!--select는 써있는게 바로 전달 될수 있습니다. 보여지는 거랑 다른걸 보내고 싶을때는 value를 써줍니다.  -->
			<option value = " ">---호선---</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
		</select>	
	</form>
</body>
</html>

 

textarea&button(not input type button)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>textArea&input type이 아닌 button타입으로 만들기</title>
<style type="text/css">
	#result{
		width:150px;
		height:100px;
		border: 1px solid red;
		font-size: 0.8em;
		margin:10px;
		position:absolute;
		top:150px;
		left:20px;
	}

</style>

<script type="text/javascript">
/*TextArea에 입력된 메세지를 받아서
result div 영역에 출력.....innerHTML
이때 \n을 사용해서 라인을 기준으로 끊을 수 있어야한다...
var strArray=string.split("\n")*/

window.onload = function(){
	Preview=document.getElementById("Preview");
	Preview.onclick = processText;//버튼을 클릭했을 때 processText함 수를 호출....
}
//textArea에 내가 입력한 값이 줄단위로 result영역에 출력.....
function processText(){
	var msg=document.getElementById("inputBox").value;
	var arrayList = msg.split("\n");
	var outMsg = "";
	for (var i=0; i<arrayList.length;i++){
		outMsg+=arrayList[i]+"<br/>";
	}
	document.getElementById("result").innerHTML=outMsg;
}
</script>
</head>
<body>
<form name ="frm" ><!--  다양한 입력을 모으는 역할-->
	<textarea rows ="5" cols = "30" id = "inputBox">
	</textarea>
	<div>
	<!--type="button"을 지정하지 않으면 새로고침이 되는데 이유가 기본 속성이 submit으로 잡힌다.-->
	<button type ="button" id = "Preview">Preview</button>
	<!--<button value = "Preview" id ="preveiw" onclick="buttonClick()">Preview</button>  --><!--디자인적으로  onclick이랑 연결 잘안함-->
	<!--input type="button" value = "Preview" id ="preveiw" onclick="buttonClick()"> --><!--자바스크립트 함수 연결하려면 이걸 써라-->
	</div>
	<div id ="result"></div>
</form>
</body>
</html>

DOM(Document Object model)

:메모리에 올라갈때 tree구조의 document로 올라가게 됩니다. 

dom방식

:하나씩 찾을 수 있음. HTML의 문서를 찾아서 특정한 태그나 내용을 찾아서 조작할때 쓰는 방식입니다. tag를 추가해도 되고 내용을 추가해도 됩니다. 문서 조작에 쓰입니다. 메모리를 많이 잡아 먹습니다. 이런 것을 자바스크립트로 합니다. 

순서가 중요하지 않습니다. 찾아서 변형을 꾀할 때 이 방식을 씁니다. 

 

sax방식

: html을 처음부터 끝까지 쭊 읽어 내려가는 것: serial하게 순차적으로 읽어갑니다.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<!--Document Object Modeling 
tree 구조로 메모리에 올라간 html문서를 조작할 때 사용한다. 
 -->
 <script type="text/javascript">
	window.onload = function() {
		//1. 노드 생성(태그, 내용) 
		var h1 = document.createElement('h1');
		var text = document.createTextNode('Hello Dom!!');
		
		//2. 노드 연결....기존 태그에 연결
		h1.appendChild(text);
		document.body.appendChild(h1);
	};
 
 
 </script>
 
</head>
<body>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>image!!</title>
<script type="text/javascript">
	window.onload = function(){
	var img = document.createElement('img');
	// <img src(속성이름) = ""(속성값)>//속성은 tree구조에 반영되는 노드가 되지 않는다. 반면에 내용은 tree구조에 반영됩니다.
	img.setAttribute('src','../img/panda.jpg');// 이건 노드를 만드는게 아니라 적용하는 겁니다.
	img.setAttribute('width', 300);
	img.setAttribute('height', 350);
	//body에 img를 붙인다.
	document.body.appendChild(img);
	
};

</script>

</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	window.onload = function(){
	/* //1. 
		var header1 = document.getElementById("header1");
		var header2 = document.getElementById("header2");
		header1.innerHTML = '<H2><font color = red>Using getElementById</H2>';
		 */
		 
	   //2.
	   var headers=document.getElementsByTagName('h1');
		for (var i =0; i<headers.length;i++){
			headers[i].innerHTML = "using getElementByTagName....";
		}
		alert(headers);
		alert(headers.length);
	}
</script>

</head>
<body>
	<h1 id = "header1">header-1</h1>
	<h1 id = "header2">header-2</h1>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <script type="text/javascript">
 	window.onload=function(){
 		//1. 
 		var cityarr = document.getElementsByName('city');
 		for(var i=0; i<cityarr.length;i++){
 			cityarr[i].innerHTML = 'getElementsByName['+i+']번째 접근...';
 		}

 		//2. querySelector('#p1')-보통 아이디, querySelectorAll('.region')-주로 클래스
 		var queryAll = document.querySelectorAll('.region');
 		for (var i = 0; i<queryAll.length;i++){
 			queryAll[i].style.color = 'red';
 		}
};
 </script>
</head>
<body>
	<p name ="city">서울 남부</p>
	<p name ="city">서울 서초</p>

	<p id = "p1">Encore Academy 남부</p>
	<p id = "p2">Encore Academy 서초</p>
	
	<p class ="region">남부지점은 3호선 남부터미널열 2번 출구에서 200m 지점에 있습니다.</p>
	<p class ="region">서초지점은 2호선 서초역 1번 출구에서 150m 지점에 있습니다.</p>
</body>
</html>

 

 

JQuery

https://jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

JQuery

- javascript 라이브러리(so, jar파일을 가져와야함)

- html-> 이벤트 처리하는데 파워풀 하게 쓰인다.

- Ajax

 

라이브러리를 쓰는데, 커스터마이징 하면서 씁니다. 

부트스트랩의 bug가 있습니다. 

 

 

압축 하고 안하고 차이입니다. 

개발할때는 uncompressed를 씁니다. 배포할 때는 compressed로 합니다. 

다운로드 클릭하고 오른쪽 마우스 클릭하고 다른이름으로 저장 합니다. 

여기에 다운 받은 파일을 넣습니다.

 

CDN방식으로 연결

이걸로 해도됨!

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ready</title>
<!--1. 다운받아서 연결 하는 방법<script type="text/javascript" src="js/jquery-3.5.1.js"></script> -->
<!--2.CDN 방법으로<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>-->
<!--3.CDN 방식 구글: 더 짧아요...--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	//window.onload = function(){//한번만 쓸수 있고, 로딩이 느릴경우에는 조금 문제가 될 수 있습니다. }
	//$(document).ready(function(){
	//Jquery(document).ready(function(){
	//Jquery(function(){
	$(function(){
		//alert("JQuery......")
		$('#header').css('color','red');
		$('.content').css('background','yellow').css('border','2px solid green');
		
	});
</script>
</head>
<body>
	<h2 id = "header">What is JQuery</h2>
	<p class = "content">jQuery is a fast, small, and feature-rich JavaScript library.</p>
</body>
</html>

 

template 만들기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

});
</script>
</head>
<body>

</body>
</html>

이렇게 template가 완성 됩니다.

 

'컴퓨터 프로그래밍 > 수업' 카테고리의 다른 글

2020.05.26_1  (0) 2020.05.26
2020.05.25_2  (0) 2020.05.25
2020.05.22_2  (0) 2020.05.22
2020.05.22_1  (0) 2020.05.22
2020.05.21_3  (0) 2020.05.21

'컴퓨터 프로그래밍/수업' Related Articles

티스토리툴바