매료매료의 개발 이야기

'전체 글'에 해당되는 글 384건

2019.09.18 자바스크립트에서 replace를 replaceAll 처럼 사용하기
2019.09.17 미니 프로젝트
2019.09.16 12일차 jQuery
2019.09.11 11일차 jQuery
2019.09.10 JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM
2019.09.09 JavaScript - Object 객체, DOM
2019.09.08 모듈
2019.09.08 객체
2019.09.06 JavaScript - 내장함수, 객체, 생성자 함수, 캡슐화, 상속(호출), 기본자료형
2019.09.05 JavaScript - 클로저, Scope

자바스크립트에서 replace를 replaceAll 처럼 사용하기

| JavaScript 2019. 9. 18. 10:33

Posted by 매료매료

자바스크립트에서 replaceAll 은 없다.

정규식을 이용하여 대상 스트링에서 모든 부분을 수정해줄 수 있다.

ex) str.replace("#",""); -> #를 공백으로 변경한다.

하지만 첫번째 # 만 공백으로 변경하고 나머지는 변경이 되지 않는다.

str.replace(/#/gi, ""); -> #를 감싼 따옴표를 슬래시로 대체하고 뒤에 gi 를 붙이면

replaceAll 과 같은 결과를 볼 수 있다.

출처 : http://blog.naver.com/banhong?Redirect=Log&logNo=143384991

'JavaScript' 카테고리의 다른 글

정규표현식의 개념과 기초 문법 (4)	2019.09.18
innerHTML과 outerHTML 차이 (0)	2019.09.18
모듈 (0)	2019.09.08
객체 (0)	2019.09.08
누구나 한 번쯤은 띄워본 JavaScript 에러 TOP 10. (0)	2019.08.30

And

6일차 JavaScript (0)	2020.07.15
IBSheet 그리드 특강 (0)	2019.09.26
12일차 jQuery (0)	2019.09.16
11일차 jQuery (0)	2019.09.11
JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM (0)	2019.09.10

IBSheet 그리드 특강 (0)	2019.09.26
미니 프로젝트 (0)	2019.09.17
11일차 jQuery (0)	2019.09.11
JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM (0)	2019.09.10
JavaScript - Object 객체, DOM (0)	2019.09.09

미니 프로젝트 (0)	2019.09.17
12일차 jQuery (0)	2019.09.16
JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM (0)	2019.09.10
JavaScript - Object 객체, DOM (0)	2019.09.09
JavaScript - 내장함수, 객체, 생성자 함수, 캡슐화, 상속(호출), 기본자료형 (0)	2019.09.06

JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM

| Bitcamp/BITCAMP - Front Web 2019. 9. 10. 17:13

Posted by 매료매료

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0910 실습</title>
<style>
	.cls1{
		color: red;
	}
</style>

<script type="text/Javascript">

/* 0910실습 */
function LinkedList(){ // stack 생성자 함수
	var list = function(a){
		this.a = a;
		this.next = null; // 다음
	};
	var head = null; // 머리
	var length = 0; // 연결리스트에 담긴 데이터의 갯수
	
	this.append = function(a){ // 마지막에 삽입
		var node = new list(a), current; // current는 마지막 node
	
		if(head == null){ // 머리가 없으면
			head = node;  // 머리가 노드
		} else { // 머리가 있으면
			current = head; //
			while(current.next != null){ // 마지막 원소를 발견할 때까지 루프 순환
				current = current.next;
			}
			current.next = node; // 마지막 원소를 링크할 수 있게 다음 노드에 할당.
		}
		length++; // 리스트의 크기를 업데이트 한다.
	}; 
	
	this.insert = function(pos, a){ // 특정 index에 추가
		// index가 개입되면 범위체크는 필수
		if(pos>=0 && pos <= length){ // 범위 이외의 값인지 체크한다.
			var node = new list(a),
			current = head,
			pre, index=0;
			if(pos === 0){ // 첫번째로 추가
				node.next = current; // 리스트의 중간 또는 맨끝에 추가하는 경우
				head = node; // 머리가 노드
			} else { // 머리가 있으면
				while(index++ < pos){
					prev = current;
					current = current.next;
				}
				node.next = current;
				prev.next = node;
			}
				length++;
				return true;
			} else {
				return false;
		}
	}; 
	
	this.removeAt = function(pos){ // 데이터 위치를 기준으로 삭제 
			if(pos>=0 && pos <= length){ // 범위 이외의 값인지 체크한다.
				var current = head,
				pre, index=0;
				if(pos === 0){ // 첫번째 원소 삭제
					head = current.next;
				} else {
					while(index++ < pos){
						prev = current;
						current = current.next;
					}
					prev.next = current.next; // 현재의 다음 과 이전을 연결: 삭제하기 위해 건너뜀.
				} 
					length--;
					return current.a;
				} else {
					return null;
			}
	}; 
	
	this.remove = function(a){ // 데이터값을 기준으로 삭제
		var index = this.indexOf(a);
		return this.removeAt(index);
	};
	
	this.indexOf = function(a){ // value의 index를 리턴
		var current = head, index = 0;
		while(current){
			if(a === current.a){
				return index;
			}
			index++;
			current = current.next;
			}
		return -1;
	};
	
	this.toString = function(){
 		var current = head, str = '';
 		while(current){
 			str += current.a;
 			current = current.next;
 		}
        return str;
    };
	
	this.print = function(){
		var current = head, str = '';
		if(head == null){
			console.log("출력할 리스트가 존재하지 않습니다.");
		} else {
			str += '[';
			while(current.next != null){
				str += current.a + " ";
				current = current.next;
			}
			str += current.a;
			str += ']';
			console.log(str);
		}
	};
}

// 1. LinkedList 객체를 만들기
function question1(){
	var list = new LinkedList();
	list.append(15); // 맨뒤에 추가
	list.print(); // = 15
	console.log(list.indexOf(15)); // value의 index를 리턴    = 0
	list.append(10); // 15 10
	list.print(); // 15 10
	console.log(list.indexOf(10)); // 1
	list.append(13); // 15 10 13
	list.print(); // 15 10 13
	console.log(list.indexOf(13)); // 2
	console.log(list.indexOf(10)); // 1
	list.append(11); // 15 10 13 11
	list.append(12); // 15 10 13 11 12
	list.print(); // 15 10 13 11 12
	console.log(list.removeAt(1)); // 특정 index를 삭제   여기서  15=0 10=1  10을 삭제한다
	list.print() //15 13 11 12
	console.log(list.removeAt(3)); // 12를 삭제한다. 
	list.print(); // 15 13 11
	list.append(14); // 15 13 11 14
	list.print(); //15 13 11 14
	list.insert(0, 16); // 특정 index에 추가  0번째에 16을 추가한다
	list.print(); // 16 15 13 11 14
	list.insert(1, 17); // 1번째에 17을 추가한다.
	list.print(); // [16 17 15 13 11 14]
}


/* nodeType */
// 노드가 요소, 텍스트, 속성 중 어느 타입의 노드인지를 리턴
// 요소노드 : 1, 속성노드 : 2, 텍스트노드 : 3
//DOM예제
function myFunction(){
	var textnode = document.createTextNode("Water");
	var item = document.getElementById("myList").childNodes[0]; // childNodes 어레이 리턴
	item.replaceChild(textnode, item.childNodes[0]);
	// child를 바꿔라 / textnode : new / item.childNodes[0] : old
	// child가 water로 바뀜
}

// 문서의 노드순회
function countTags(n){
	var numtags = 0;
	if(n.noteType == 1) // 요소노드냐?
		numtags++; 
	var children = n.childNodes;
	for(var i=0; i<children.length; i++){
		numtags+= countTags(children[i]); // recursive 재귀호출
	}
	return numtags;
}

// 노드 아래의 모든 텍스트 얻기
// text노드를 이어 붙이고 문자열로 반환
function getText(n){
	var strings = [];
	getStrings(n, Strings);
	return strings.join(" ");
	function getStrings(n, strings){
		if(n.nodeType == 3){ // textnode면 push
			strings.push(n.data);
		}else if(n.nodeType == 1){ // 요소노드면 첫번째 자식을 찾고
			for(var m= n.firstChild; m!=null; m=m.nextSibling){ // 다음 노드를 찾으면서 재귀호출
            // 
				getStrings(m, strings);
			}
		}	
	}
}

/*Event 예제*/
function test1(){ // c b a ( 자식노드 -> 부모노드, 기본값 false)
	document.getElementById('a').addEventListener('click',function(){console.log('a')});
	document.getElementById('b').addEventListener('click',function(){console.log('b')});
	document.getElementById('c').addEventListener('click',function(){console.log('c')});
}
function test2(){ // a b c ( 부모노드 -> 자식노드, true)
	document.getElementById('a').addEventListener('click',function(){console.log('a')}, true);
	document.getElementById('b').addEventListener('click',function(){console.log('b')}, true);
	document.getElementById('c').addEventListener('click',function(){console.log('c')}, true);
}
function test3(){ // c b (stopPropagation : 이벤트 전파차단)
	document.getElementById('a').addEventListener('click',function(){console.log('a')});
	document.getElementById('b').addEventListener('click',function(evt){evt.stopPropagation(); console.log('b')}); // 이후부터 이벤트차단
	document.getElementById('c').addEventListener('click',function(){console.log('c')});
}

/*이벤트 핸들러 추가하기*/
// onload 후에 추가하고자 하는 메소드가 있을 경우엔 다음과 같이 처리할 수 있다.
window.onload = prepareGallery; // 하나의 함수등록
window.onload = function(){ // 함수가 여러개일때
	firstFunction();
	secondFunction();
}
// 위의 소스는 실체 onload와 연결된 소스를 함수가 추가될 때마다 수정해주어야한다.
// 이에 대한 해결책으로 addLoadEvent 기법을 사용하면 좋다
// ★★★★ 모든 브라우저에서 사용 가능한 이벤트 핸들러 등록방식 - 많이 응용해서 쓰인다. ★★★★
function addLoadEvent(func){
	var oldonload = window.onload; // onload event에 연결된 메소드를 얻어온다.
	if(typeof window.onload !='function'){ // type이 function이 아니면, onload에 연결된 함수없으면
		window.onload = func; // 다른 function이 연결되어 있지 않으므로 그냥 연결
	} else {
		window.onload = function(){
			oldonload(); // 이전에 onload에 연결되었던 func를 호출한다.
			func();
		}
	} 
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);


/*실행시에 마크업 코드 생성하기 - DOM사용*/
// 실습예제 : <p>이것은<em>텍스트</em>입니다.</p>
var para = document.createElement("p");
var txt1 = document.createTextNode("이것은");
console.log(para.appendChild(txt1)); // 이것은

var emphasis = document.createElement("em");
var txt2 = document.createTextNode("텍스트");
console.log(emphasis.appendChild(txt2)); //텍스트
console.log(para.appendChild(emphasis)); // <em>텍스트</em>

var txt3 = document.createTextNode("입니다.");
console.log(para.appendChild(txt3)); // 입니다.

/*DOM예제2*/
function test(){
	var sp1 = document.createElement("span");
	var sp2 = document.getElementById("childElement");
	var parentDiv = sp2.parentNode;
	parentDiv.insertBefore(sp1, sp2); // 앞에 span 태그 생김.
}

function test4(){
	var myobj = document.getElementById("demo");
	myobj.remove(); // 노드제거 
}

function test5(){
	document.getElementsByTagName("H1")[0].removeAttribute("class"); // 속성제거
}

function test6(){
	var list = document.getElementById("myList2");
	list.removeChild(list.childNodes[0]); // child제거
}

/*DOM 문제 - 모든 textNode의 데이터를 대문자로 변경*/
function upcase(n){
	if(n.nodeType == 3){ // 노드가 text노드이면 텍스트를 대문자로 바꾼다.
		n.data = n.data.toUpperCase(); // data 대신 value로 써도됨.
	} else { // 현재 노드가 text노드가 아니면 각 자식에 대해 재귀적으로 호출
		var kids = n.childNodes;
		for(var i=0; i<kids.length; i++)
			upcase(kids[i]);
	}
}

/* CSS와 DOM연동하기 -  특정 노드에 style 주기*/
function styleHeaderSiblings(){
	if(!document.getElementsByTagName) return false;
	var headers = document.getElementsByTagName("h1"); // 모든 h1 tag를 얻는다.
	for(var i=0; i<headers.length; i++){
		//첫번째 요소노드에 css지정
		var elem = getNextElement(headers[i].nextSibling); // nextSibling -> 다음 요소노드로 이동
		elem.style.fontWeight = 'bold';
		elem.style.fontSize = "1.2em";
	}
}
//다음 요소노드가 나올 때까지 재귀호출
function getNextElement(node){
	if(node.nodeType == 1)
		return node;
	if(node.nextSibling){
		return getNextElement(node.nextSibling);
	}
	return null;
}

/* CSS와 DOM연동하기 - 반복되는 style 주기 - 목록 중 짝수 번째 항목에 style을 지정*/
function stripeTables(){
	if(!document.getElementsByTagName) return false;
	var tables = document.getElementsByTagName("table"); // 모든 table에 대해서
	for(var i=0 ; i< tables.length; i++){
		var odd = false;
		var rows = tables[i].getElementsByTagName("tr"); // table내 모든 tr에 대해서
		for(var j=0; j<rows.length; j++){
			if(odd == true){ // 짝수이면 backcolor를 변경한다.
				rows[j].style.backgroundColor = "#ffc";
				odd = false;
			} else {
				odd = true;
			}
		}
	}
}

/* DOM예제 3 - Tooltip*/
var toolTip = new Tooltip();

function show(){
	toolTip.show('ToolTip입니다', 100, 100);
}

function hide(){
	toolTip.hide();
}

function Tooltip(){
	this.tooltip = document.createElement("div");
	this.tooltip.style.position = "absolute";
	this.tooltip.style.visibility = "hidden"; // hidden상태로 시작
	this.tooltip.className = "tooltipShadow"; // css 조작할 수 있게 css클래스 이름 지정
	
	this.content = document.createElement("div"); // 내용 부분을 위한 div생성
	this.content.style.position = "relative"; // 상대 위치로 지정
	this.content.className = "tooltipContent";
	
	this.tooltip.appendChild(this.content); // 그림자 위에 내용을 추가
}

Tooltip.prototype.show = function(text, x, y){
	this.content.innerHTML = text; // tooltip의 text 설정
	this.tooltip.style.left = x + 'px';
	this.tooltip.style.top = y + 'px';
	this.tooltip.style.visibility = 'visible'; // 보이게 한다.
	//아직 툴팁이 문서에 추가되지 않았다면 이를 문서에 추가한다,
	if(this.tooltip.parentNode != document.body){
		document.body.appendChild(this.tooltip);
	}
};

Tooltip.prototype.hide = function(){
	this.tooltip.style.visibility = "hidden"; // 감춘다
}

/* DOM예제 4 - sun earth moon*/
window.onload = function(){
	var sun = document.getElementById('sun'); // 변수선언
	var earth = document.getElementById('earth');
	var moon = document.getElementById('moon');
	sun.style.position = 'absolute'; // 문서 객체의 스타일 속성을 변경
	earth.style.position = 'absolute';
	moon.style.position = 'absolute';
	sun.style.left = 250 + 'px';
	sun.style.top = 200 + 'px';
	var earthAngle = 0;
	var moonAngle = 0;
	setInterval(function(){ 
		var earthLeft = 250 + 150 * Math.cos(earthAngle); // 각도로 지구와 달의 좌표를 구함.
		var earthTop = 200 + 150 * Math.sin(earthAngle);
		var moonLeft = earthLeft + 50 * Math.cos(moonAngle);
		var moonTop = earthTop + 50 * Math.sin(moonAngle);
		// 위치를 이동
		earth.style.left = earthLeft + 'px';
		earth.style.top = earthTop + 'px';
		moon.style.left = moonLeft + 'px';
		moon.style.top = moonTop + 'px';
		// 각도를 변경
		earthAngle += 0.1;
		moonAngle += 0.3;
	}, 1000/30);
};




/* Event예제 - event안에 자바스크립트 코드 넣는 예제들*/
document.f1.b1.onclick = function(){alert('Thanks!!'); }

var b = document.myform.mybutton;
var oldHandler = b.onclick;
function newHandler(){
}
b.onclick = function() { oldHandler();newHandler(); }

/*예외 예제*/
try{
	try{
		throw new Error("oops");
	}
	finally{
		console.log("finally");
	}
}
	catch(ex){
		console.log("outer", ex.message);
	}

try{
	var array = new Array(9999999999);
} catch(exception){
	console.log('11: ' + exception.message);
	console.log('22: ' + exception.description);
	console.log('33: ' + exception.name);
}

try{
	try{
		throw new Error("oops");
	}
	catch(ex){
		console.log("inner", ex.message);
	}
	finally{
		console.log("finally");
	}
}
	catch(ex){
		console.log("outer", ex.message);
}

try{
	try{
		throw new Error("oops");
	}
	catch(ex){
		console.log("inner", ex.message);
	}
	finally{
		console.log("finally");
	}
}
	catch(ex){
		console.log("outer", ex.message);
	}



</script>
</head>
<body>

	<input type="button" value="LinkedList 객체를 만들기" onClick="question1()" />

	<br><br><br>
	1. DOM예제 - 줄바꿈시 childnode값 변경됨(엔터도 포함)
	<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> 
	<button onClick="myFunction()">Try it</button> <!-- coffee가 water로 바뀜 -->
	
	<br><br><br>
	2. 문서의 노드순회
	<!-- 
	<body onload="alert(countTags(document))">this is a <i>sample</i>document. <!-- document 문서의 최상단  -->
	 -->
	<br><br><br>
	3. event예제 
	<!-- 
	<body onload='test1()'>
	<div id='a'>a Click하세요
		<div id='b'>b Click하세요
			<div id='c'>c Click하세요</div>
		</div>
	</div>
	
	
	<br><br><br>
	4. DOM예제2
	<body onload='test()'>
		<div id="parentElement">
			<span id="childElement">foo bar</span>
		</div>
	 -->
	
	<br><br><br>
	4. DOM예제2 - 노드제거
	<p>포그바</p>
	<p id="demo">click</p>
	<button onClick='test4()'>remove</button> <!-- 누르면 click 삭제 -->
	
	<br><br><br>
	4. DOM예제2 - 속성제거
	<h1 id="demo" class="cls1">click the class attribute</h1> <!-- 빨간색 속성들어간거 삭제됨 -->
	<button onClick='test5()'>remove2</button>
	
	<br><br><br>
	4. DOM예제 - child제거
	<ul id="myList2"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> 
	<button onClick="test6()">remove3</button> <!-- 누르면 목록 위부터 한개씩 삭제 -->
	
	<br><br><br>
	5. DOM문제
	<!-- 
	<body onload="upcase(document)">
	 <div>
	   <h1>aa</h1>
	   <h2>bb</h2>
	 </div>
	 <div>
	   <h1>cc</h1>
	   <h1>dd</h1>
	 </div>
	  -->
	  
 	<br><br><br>
	6. DOM문제
	<!-- 
	<body onload="styleHeaderSiblings()">
		<h1>첫번째 제목</h1>
		<p>이것은 첫번째 단락입니다.</p>
		<p>테스트1</p>
		<h1>두번째 제목</h1>
		<p>이것은 두번째 단락입니다.</p>
		<p>테스트2</p> 
	-->		
	<br><br><br>
	7. DOM예제 3 - Tooltip
	<button onClick="show()">show</button>
	<button onClick="hide()">show</button>
	
	<br><br><br>
	8. DOM예제 4 - sun earth moon
	<h1 id="sun">@</h1>
	<h1 id="earth">O</h1>
	<h1 id="moon">*</h1>
	
	<br><br><br>
	9. Event예제 - event안에 자바스크립트 코드 넣는 예제들
	<input type="button" value="9번" onclick="if(window.numclicks)numclicks++; else numclicks=1; this.value='Click#'+numclicks;">
	<!-- 누를때마다 버튼의 숫자 값 증가 -->
	<form name="f1">
 		<input name='b1' type='button' value='Press Me' >
	</form>
	<form name='action.do' onsubmit="if(this.elements[0].value.length == 0) return false;">
		<input type="text">
	</form>
	
	
	
	
	
	
	
</body>
</html>

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

12일차 jQuery (0)	2019.09.16
11일차 jQuery (0)	2019.09.11
JavaScript - Object 객체, DOM (0)	2019.09.09
JavaScript - 내장함수, 객체, 생성자 함수, 캡슐화, 상속(호출), 기본자료형 (0)	2019.09.06
JavaScript - 클로저, Scope (0)	2019.09.05

And

11일차 jQuery (0)	2019.09.11
JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM (0)	2019.09.10
JavaScript - 내장함수, 객체, 생성자 함수, 캡슐화, 상속(호출), 기본자료형 (0)	2019.09.06
JavaScript - 클로저, Scope (0)	2019.09.05
6일차 실습 (0)	2019.09.04

모듈

| JavaScript 2019. 9. 8. 17:59

Posted by 매료매료

############# 모듈(module) #############
수 많은 로직을 재사용할 수 있는 단위로 나누어,
별도의 모듈이 라는 형태로 떼어내 다른 프로그램에 부품으로 사용하는 기법.
그 기법을 모듈화(Modularization), 결과물을 모듈이라 한다.

-----main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script> // 모듈화
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

-----greeting.js

function welcome(){
    return 'Hello world';
}

############# 호스트 환경 #############
javascript가 구동되는 환경.
웹브라우저를 위한 언어로 시작했지만(클라이언트), 서버측에서 실행되는 javascript도 있다(서버사이드).
또한 구글의 App위에서도 돌아가는 것이 있으므로, 호스트 환경에 따라 모듈화 하는 방법을 알아야 한다.

############# 모듈과 라이브러리의 차이 #############
모듈이 프로그램의 작은 부품이라 하면,
라이브러리는 자주 사용되는 부품을 재사용하기 편하게 잘 정리한 코드의 집합.
특히 라이브러리는 많은사람들의 노력과 돈, 노우하우를 집중해 만들어 놓아 아주 완성도가 높다.

############# 라이브러리를 쓰는 이유 #############
자기혼자서 만드는 것이 여러가지 이유로 필연적이지 않으면,
다른사람이 이미 만들어 놓은것을 부품으로 조립해서 만들어 가는것이 소프트웨어를 만드는 '기본중의 기본'이다.

------------아래는 jQuery를 이용한 예제이다.



<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
     })
    </script>
</body>
</html>

-------------  다음은 jQuery를 이용하지 않고 동일한 기능을 구현한 예제이다.

<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
    function addEvent(target, eventType,eventHandler, useCapture) {
        if (target.addEventListener) { // W3C DOM
            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
        } else if (target.attachEvent) {  // IE DOM
            var r = target.attachEvent("on"+eventType, eventHandler);
        }
    }
    function clickHandler(event) {
        var nav = document.getElementById('list');
        for(var i = 0; i < nav.childNodes.length; i++) {
            var child = nav.childNodes[i];
            if(child.nodeType==3)
                continue;
            child.innerText = 'Coding everybody';
        }
    }
    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
    </script>
</body>
</html>

'JavaScript' 카테고리의 다른 글

innerHTML과 outerHTML 차이 (0)	2019.09.18
자바스크립트에서 replace를 replaceAll 처럼 사용하기 (0)	2019.09.18
객체 (0)	2019.09.08
누구나 한 번쯤은 띄워본 JavaScript 에러 TOP 10. (0)	2019.08.30
jQuery - input 쓰기, 읽기, 활성화, 비활성화 - readonly, disabled (0)	2019.08.30

And

객체

| JavaScript 2019. 9. 8. 17:45

Posted by 매료매료

객체(object) : 이름이 있는 정리정돈 상자

객체에서의 인덱스는 문자임.

############# 객체 불러오기 #############

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
                key    value  key   value   key     value

object['egoing'];
object.egoing;

key값으로 문자열과 메소드가 올수 있고, 숫자열도 올 수 있지만,
object[1]은 실행 가능하고, object.1은 실행이 불가능하다.

object['egoing']의 'egoing'은 문자열이기 때문에, object['ego'+'ing']도 실행가능

(대괄호 사용시는 안에서 프로그래밍적으로도 구현가능)

############# for in 문 #############

배열은 순서가 존재하지만,

객체는 key와 value를 가지고 있을뿐이다.

객체,배열안의 값을 모두 가져올때 사용

for (* in **){
console.log(* + **[*]);
}
** 에는 객체의 이름이 오고,
* 에는 객체 안의 key값이 인자로써 변수(매개변수라고 해야하나?)안에 대입된다. -- 약속임★★★

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}
// 객체 안에 객체, 함수를 삽입할 수 있다.

############# this #############
this는 '소속되어 있는 객체를 가리키는 약속되어 있는 변수'

############# 객체지향 프로그래밍 #############
서로 연관되어 있는 값과 서로 연관되어 있는 처리를
하나의 그릇에 모아서 그룹핑하는 방식

'JavaScript' 카테고리의 다른 글

자바스크립트에서 replace를 replaceAll 처럼 사용하기 (0)	2019.09.18
모듈 (0)	2019.09.08
누구나 한 번쯤은 띄워본 JavaScript 에러 TOP 10. (0)	2019.08.30
jQuery - input 쓰기, 읽기, 활성화, 비활성화 - readonly, disabled (0)	2019.08.30
배열 (0)	2019.08.13

And

JavaScript - 내장함수, 객체, 생성자 함수, 캡슐화, 상속(호출), 기본자료형

| Bitcamp/BITCAMP - Front Web 2019. 9. 6. 18:22

Posted by 매료매료

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0906 실습</title>
<script type="text/Javascript">

/*구구단 만들기 실습*/
function calculate(gugu){
	// $("#gugu").val(gugu); jquery 방식
	// var gugu = $("#gugu").val(); jquery 방식
	var gugu = document.getElementById('gugu').value; // 자바스크립트로 input 값 가져오기
	gugu = Number(gugu);
	if(isNaN(gugu) || gugu <=0 ){ // isNaN : number가 NaN(숫자가 아님)인지 확인.(숫자 체크)
		alert('숫자를 입력해주세요');
	} else {
			document.write("<table border=1>");
			document.write("<tr>" + "<td>" + "X" + "</td>");
				for(var j=1; j<=9; j++){ // * 9까지
					document.write("<td>" + j + "</td>");
				}
				for(var i=1; i<=gugu; i++){ // 몇단까지
					document.write("<tr>" + "<td>" + i + "</td>");
					for(var j=1; j<=9; j++){ // * 9까지
						document.write("<td>" + i*j + "</td>");
					}
					document.write("</tr>");
			}
			document.write("</table>");
		}
}

/*내장함수
//타이머함수
setTimeout(function(){
	alert('3초가 지났습니다. ㅇㅂㅇ');
}, 3000) // 3초후에 함수를 실행(3000은 milesecond)

//1초마다 함수를 실행
var intervalID = setInterval(function(){
	alert('<p>' + new Date() + '</p>');
}, 1000); // 1초마다 함수를 실행 // Fri Sep 06 2019 14:25:46 GMT+0900 (한국 표준시)

//5초 함수를 실행 후, 타이머를 종료 
setTimeout(function(){
	clearInterval(intervalID);
},5000);

//인코딩과 디코딩 함수
var URI = "http://hanb.co.kr?test=한글입니다.";

document.write(escape(URI)); // 적절한 정도로 인코딩
document.write(encodeURI(URI)); // 최소한의 문자만 인코딩
document.write(encodeURIComponent(URI)); // 대부분의 문자를 모두 인코딩


//코드실행함수
var willEval = '';
willEval += 'var number = 10;';
willEval += 'alert(number);';
eval(willEval); // String을 JavaScript코드로 실행 . 결과 10 alert 출력

//JavaScript 실행순서 A->C->B
//setTimeout은 script 블록이 모두 끝난 뒤에 호출
alert('A');
setTimeout(function(){
	alert('B');
}, 0);
alert('C');*/

//반복문과 콜백함수
//0,1,2 차례로 호출을 원하지만 3만 3번 호출됨
for(var i = 0; i < 3; i++){
	// (function (closed_i){ //클로저를 통해 0,1,2 가 호출되게 처리
		setTimeout(function (){
			alert(i); // alert(closed_i);
		},0);
	// })(i) //클로저를 통해 0,1,2 가 호출되게 처리
}

/*객체*/
//속성과 메소드
var person = {
		name: '홍길동',
		friend: '임꺽정',
		eat: function(food){
			alert(this.name + '이 ' + this.friend + '과 ' + food + '을 먹습니다.');
		}
};
person.eat('밥'); // 메소드 호출 : '홍길동이 임꺽정과 밥을 먹습니다.'
var output = '';
for(var item in person){ // 객체와 반복문
	output += item + ': ' + person[item] + '\n';
	// item은 name, friend, eat / person은 value
}

/*객체관련 키워드*/
// in 키워드 : 객체 내 속성존재여부 확인
output += "'name' in person: " + ('name' in person) + '\n'; // 결과 : true
// with 키워드 : 객체명 생략
with(person){
	output += 'name: ' + name + '\n'; // name: 홍길동
	output += 'friend: ' + friend + '\n'; // friend: 임꺽정
}

/*객체의 속성 추가와 제거*/
var stu = {};
stu.이름 = '피구'; // 속성 추가
stu.장래희망 = '날강두';
stu.toString = function(){ // 메소드 추가
	var answer = '';
	for(var key in this){
		if(key != 'toString'){ // toString 메소드는 출력하지 않게함.
			answer += key + '\t' + this[key] + '\n';
		}
	}
	alert(answer);
};
delete(stu.이름); // 속성제거. 배열에서의 delete는 undefined로 만드는 것.

//객체실습
var students = [];
students.push({ 이름 : '포그바', 국어: 99, 수학:88, 영어:77, 과학: 55});
students.push({ 이름 : '드록바', 국어: 89, 수학:78, 영어:67, 과학: 95});
students.push({ 이름 : '바밤바', 국어: 79, 수학:98, 영어:87, 과학: 15});
//모든 students 배열 내의 객체에 메소드를 추가합니다.
for(var i in students){
	//총점 구하는 메소드를 추가
	students[i].getSum = function(){
		return this.국어 + this.수학 + this.영어 + this.과학;
	}
	//평균을 구하는 메소드를 추가
	students[i].getAverage = function(){
		return this.getSum() / 4;
	};
}
//출력
var output = '이름\t총점\t평균\n';
for(var i in students){
	with(students[i]){
		output += 이름 + '\t' + getSum() + '\t' + getAverage() + '\n';
	}
}/*이름	총점	평균
포그바	319	79.75
드록바	329	82.25
바밤바	279	69.75*/

/*생성자 함수 : 자바의 class 와 같다. return 값이 없음. new를 통해서 생성가능. */
//객체실습 : 함수를 사용한 객체생성
function makeStudent(name, korean, math, english, science){
	var willReturn = {
			//속성
			이름 : name, 국어 : korean, 수학 : math, 영어 : english, 과학 : science,
			
			//메소드
			getSum: function(){
				return this.국어 + this.수학 + this.영어 + this.과학;
			},
			getAverage: function(){
				return this.getSum() / 4;
			},
			toString: function(){
				return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
			}
	};
	return willReturn;
}

//1. 객체의 Property를 배열로 반환
function getPropertynames(o){
	var a = [];
	for(property in o) a.push(property); // 객체 o의 속성을 a 배열에 넣어라.
	return r;
}

// 2. from의 객체를 to로 Copy ( from의 프로퍼티를 to에 넣으면 됨.)
function copyProperties(from, to){
	if(!to) to = {};
	for(p in from) to[p] = from[p]; // from 에 있는 p를 반복해서 to 배열에 넣어라.
	return to;
}

// 3. From의객체를 to로 Copy하되 to에 없는 속성만 Copy 
function copyUndefineProperties(from, to){
	for(p in from){ // from에 있는 p를 반복
		if(!(p in to)) to[p] = from[p]; // to에 있는 p가 아닌 경우에만 -> from의 p를 to의 p에 넣어라.
	}
}

/*생성자함수
//생성자 함수 예제1
//Circle 클래스
function Circle(radius){ // 생성자 함수 정의
	this.r = radius;
}
//클래스 프로퍼티, 생성자함수의 프로퍼티
Circle.PI = 3.14159;
//인스턴스 메소드
Circle.prototype.area = function(){return Circle.PI * this.r * this.r;}
//클래스 메소드
Circle.max = function(a,b){
	if(a.r > b.r) return a;
	else return b; 
}
var c = new Circle(1.0); //인스턴스 생성
c.r = 2.2; //인스턴스 프로퍼티
var a = c.area(); // 인스턴스 메소드
var x = Math.exp(Circle.PI); // 클래스 프로퍼티
var d = new Circle(1.2); // 다른 인스턴스
var bigger = Circle.max(c, d); // 클래스 메소드

/*캡슐화*/
function Rectangle(w,h){// 변수를 선언
	var width = w;
	var height = h;
	//메소드선언
	this.getWidth = function(){return width;};
	this.getHeight = function(){return height;};
 // this.area = function(){return this.width * this.height;} // 생성자 함수에 메소드 속성 추가
	this.setWidth = function(w){
		if(w<0){
			throw '길이는 음수일 수 없습니다.';
		} else {
			width = w;
		}
	};
	this.setHeight = function(h){
		if(w<0){
			throw '길이는 음수일 수 없습니다.';
		} else {
			height = h;
		}
	}
}
Rectangle.prototype.getArea = function(){ // prototype에서 객체의 this에 접근가능
	return this.getWidth() * this.getHeight();
};
// var a = r.area(); //각 인스턴스들이 공유해야 하는 Property나 메소드를 정의(생성자 함수를 더 효율적으로 개선 :prototype사용)
var rectangle = new Rectangle(5, 7); //변수를 선언. property를 초기화하며 new와 함께 사용된다.
rectangle.setWidth(5); // 음수면 '길이는 음수일 수 없습니다.' 출력
alert('AREA : ' + rectangle.getArea()); // AREA : 35

/*상속 - JavaScript에서 정확한 상속방법은 없다.
instanceof 키워드로 특정 객체의 instance인지 확인 */ 
function Square(length){
	this.base = Rectangle; // 생성자로 Rectangle를 속성으로
	this.base(length, length); // 생성자 함수 Rectangle 호출
}
Square.prototype = Rectangle.prototype;
Square.prototype.constructor = Square; // 생략가능. constructor : 자신의 원소를 물어볼때 쓰임.
var square = new Square(5);
alert(square instanceof Rectangle); // 상속확인 : 결과값 true

/*상속예제
//모든 함수는 apply(), call() 메소드가 존재한다.
// 함수는 f()에 두 숫자를 전달하고 이 함수가 객체 o의 메소드 인 것처럼 호출할 경우
// 첫번째인자 : 함수가 소속되어 호출될 객체
// 나머지인자 : 함수의 전달인자
f.call(0, 1, 2);

//다음코드와 동일
o.m = f;
o.m(1,2);
delete o.m;

//apply()는 call()과 유사하지만 전달인자를 배열로 지정하는 것이 다름
f.apply(o, [1.2]);*/
//===============================
/*prototype(원형) : 상속의 구체적인 수단*/
// prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결됨(prototype chain)
function MyParent(){
	this.property1 = "부모속성";
	console.log('Parent');
}
MyParent.prototype.info = function(){
	console.log('property1: ' + this.property1);
};
function MyChild(){
	this.property2 = "자식속성";
	console.log('Child');
}
MyChild.prototype = new MyParent(); //부모클래스 상속
MyChild.prototype.constructor = MyChild(); // 생성자 설정
MyChild.prototype.info = function(){ // 오버라이딩을 통한 기능확장 MyChild.prototype 은 MyParent를 가리킨다.
	MyParent.prototype.info.call(this); // 부모클래스의 info함수 호출
	console.log('info기능확장');
}
var child = new MyChild(); // 자식인스턴스 생성
child.info(); // 자식정보출력

/*기본자료형과 객체*/
// 기본자료형에 메소드 추가
var primitiveNumber = 273;
var objectNumber = new Number(273);
// Number 객체에 메소드를 추가하면 number dataType인 primitiveNumber도 추가된 메소드 사용가능
Number.prototype.method = function(){
	return 'Method on Prototype';
};
// 메소드 실행
var a1 = '';
a1 += primitiveNumber.method() + '\n';
a1 += objectNumber.method();

/*자료형 구분*/
//객체의 속성인 Constructor를 이용하면 같은 Type인지 비교하는 것이 명확함
var numberFromLiteral = 273;
var numberFromObject = new Number(273);
//자료형 확인
if(numberFromLiteral.constructor == Number){
	alert('numberFromLiteral은 숫자입니다.'); // 얼럿뜸
}
if(numberFromObject.constructor == Number){
	alert('numberFromObject는 숫자입니다.'); // 얼럿뜸
}

</script>
</head>
<body>

	몇단을 만들까요?<input type="text" id="gugu" name="gugu" >
	<input type="hidden" id="gugu" name="gugu" />
	<input type="button" id="make" name="make" value="구구단 만들기" onClick="calculate(gugu)"/>
	
</body>
</html>

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM (0)	2019.09.10
JavaScript - Object 객체, DOM (0)	2019.09.09
JavaScript - 클로저, Scope (0)	2019.09.05
6일차 실습 (0)	2019.09.04
JavaScript - 자료형 (0)	2019.09.03

And

JavaScript - 클로저, Scope

| Bitcamp/BITCAMP - Front Web 2019. 9. 5. 17:58

Posted by 매료매료

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0905실습</title>
<script type="text/javascript">

//1. 단어 s의 가운데 글자를 반환하는 함수 (단어의 길이가 짝수라면 가운데 두 글자를 반환)

function calculate1(s) {
	var input = prompt("가운데 글자 반환함수", "글자 s를 입력해주세요.");
	if (input.length % 2 == 0){
		alert(input.substring((input.length/2)-1, (input.length/2)+1));		
	}else{
		alert(input.substring((input.length/2), (input.length/2)+1));
	}
}


//2. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 
// 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하여 리턴하는 함수
function calculate2(arr) {
	var arr = [0,1,1,2,3,4,5,7,7,9];
	var answer = [];
	var length = arr.length;
	// for문에서 arr.length 사용하면 왜곡이 되므로 
	// length 변수 받아서 쓰던가 var i in arr 로 써라.
	for(i=0; i<length; i++){ // var i in arr 로 쓰면 작동안됨.
		if(arr[i] !== arr[i+1]){
			answer.push(arr[i]);
		}
	}
	alert(answer);	
}


//3. 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수
function calculate3(a, b) {
	var input = prompt("a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수", "a를 입력해주세요.");
	var input1 = prompt("a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수", "b를 입력해주세요.");
	var arr = [input, input1];
	var answer = 0;
	if(arr[0] == arr[1]){
		answer = arr[0];
	} else {
		for(var i = arr[0]; i<=arr[1]; i++){
			answer += Number(i); // Number로 변환해야 숫자로 인식됨.
		}
		
	}
	alert(answer);
}


//4. 정수를 담고 있는 배열 arr의 평균값을 return하는 함수
function calculate4(arr) {
	var arr = [1,2,3,4,5,6,7,8,9,10];
	let result = 0; // let은 변수에 재할당이 가능
	for(let i = 0; i<arr.length; i++){
		result += arr[i];
	}
	alert(result/arr.length);
}

/* ★★★★★★★★★★★★★★★★ 클로저 ★★★★★★★★★★★★★★★ */
// 실행이 끝난 함수의 스코프를 참조할 수 있는 함수
function parent() {
  var a = 'Parent is done';
  function child() {
    console.log(a);
  }
  return child;
}
var closure = parent();
closure();

위 내부함수의 정의대로라면 parent 의 내부함수인 child() 는 외부에서 접근이 불가능하다.
하지만 return 값에 child 를 넘김으로써 외부에서도 child 를 호출할 수 있게 된다.
따라서, child() 에서 parent 의 값을 참고하고 있다면,
child() 를 밖에서 호출함으로써 parent() 의 변수에 접근이 가능하게 된다. 이것이 클로져

// 클로저 : 지역변수의 범위를 벗어나서 사용가능하게 해줌.
function test(name){
	var output = 'Hello' + name + '...!'; //private 멤버변수
	//내부 메소드에서는 private 멤버변수 사용가능
	return function(){ // 내부메소드를 통해서 메모리 할당됨
		alert(output);
	};
}

// 지역변수 output은 test()가 호출될때 생성(메소드가 끝났음에도 사용가능)
test('JavaScript')(); // 결과값 : HelloJavaScript...! ( 함수가 리턴되므로)

// 전역변수는 var문을 생략해도 되지만 지역변수는 반드시 var문을 써야한다.
scope = "global";
function checkscope(){
	scope = "local"; // 전역변수를 바꾸어버림
	myscope = "local"; // 새로운 전역변수 생성
}

//클로저를 사용하여 Counter 만들기
//아래소스는 외부에서 counter값을 변경할 수 있는 문제 존재
uniqueInteger.counter = 0;
function uniqueInteger(){
	return uniqueInteger.counter++;
}	
//클로저를 이용해 해결한 소스
var uniqueID = (function(){
	var id = 0; // private 속성을 가진다. 함수만이 접근가능
	// uniqueID에 저장되는 것은 값이 아닌 중첩된 함수이다.
	return function(){return id++;} // 값을 증가시켜서 반환
})();

for(var i=0; i<3; i++){
	alert(uniqueID()); // 결과값 : 0, 1, 2 
}

// 클로저 : 중첩함수
function makefunc(x){
	return function(){return x;}
}
	//리턴된 함수를 배열요소에 저장
	var a = [makefunc('x'), makefunc('y'), makefunc('z')];
	alert(a[0]()); // x출력
	alert(a[1]()); // y출력
	alert(a[2]()); // z출력

// 클로저를 사용한 private 멤버변수
function makeProperty(o, name, predicate){ // o는 object
		var value; //private 변수
		//getter메소드
		o['get'+ name] = function(){return value;};
		//setter메소드
		o['set'+ name] = function(v){
			if(predicate && !predicate(v)) // 메소드가 존재하고 false를 리턴하면
				throw 'set'+name+': invalid value' + v;
			else
				value = v;
		}
	}
	var o = {};
	//Name Property 추가, set은 string만 가능
	makeProperty(o, 'Name', function(x){return typeof x == 'string';});
	o.setName('Frank'); // 값 설정
	console.log(o.getName()); // 값 출력 : Frank 찍힘.

// 클로저 문제
var counter = (function(){
		var a = 0;
		return {
		inc : function(){return a++;}, // 메소드 선언시 ':' 을 사용한다.
		dec : function(){return a--;},
		val : function(){return a;}
		};
	})();
counter.inc(); // 1증가
counter.inc(); // 1증가
counter.dec(); // 1감소
console.log(counter.val()); // 1출력

/* Scope 예제 */
// 함수단위 유효범위
function scopeTest(){
	var a = 0;
	if(true){
		var b = 0;
		for(var c=0; c<5; c++){
			console.log("c1= " + c); // 0, 1, 2, 3, 4, 5
		}
		console.log("c2 = " + c); // 5
	}
	console.log("b = " + b); // 결과값 0. block외부에서 b에 접근가능 => 블록단위 유효범위가 없다.
}
scopeTest();

// 변수명이 동일할 때는 가장 가까운 범위의 변수를 참조한다.
var scope = 10;
function scopeExam(){
	var scope = 20;
	console.log("scope = " + scope);
}
scopeExam(); // 20. 20이 더 가까움

// var 키워드를 생략하면 전역변수로 설정된다.
function scopeExam(){
	scope = 20; // var가 없으므로 전역변수화 됨.
	console.log("scope = " + scope);
}
function scopeExam2(){
	console.log("scope = " + scope);
}
scopeExam(); // 20
scopeExam2(); // 20

// 변수 선언문을 끌어 올린다.
function hoistingExam(){
	console.log("value = " + value); // 아래 선언된 변수를 사용, undefined 출력
	var value = 10;
	console.log("value = " + value); // 10출력
}
hoistingExam();
	

</script>
</head>
<body>

	<input type="button" value="문제1번" onClick="calculate1()"><br><br>
	<input type="button" value="문제2번" onClick="calculate2()"><br><br>
	<input type="button" value="문제3번" onClick="calculate3()"><br><br>
	<input type="button" value="문제4번" onClick="calculate4()"><br><br>
	
	<input type="button" value="실습" onClick="makeProperty()"><br><br>

</body>
</html>

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

JavaScript - Object 객체, DOM (0)	2019.09.09
JavaScript - 내장함수, 객체, 생성자 함수, 캡슐화, 상속(호출), 기본자료형 (0)	2019.09.06
6일차 실습 (0)	2019.09.04
JavaScript - 자료형 (0)	2019.09.03
5일차 (0)	2019.09.03

And

| 1 | ··· | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ··· | 39 |

매료매료의 개발 이야기

Article Category

Notice

Recent Article

Recent Comment

'전체 글'에 해당되는 글 384건

자바스크립트에서 replace를 replaceAll 처럼 사용하기

'JavaScript' 카테고리의 다른 글

미니 프로젝트

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

12일차 jQuery

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

11일차 jQuery

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

JavaScript - Object 객체, DOM

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

모듈

'JavaScript' 카테고리의 다른 글

객체

'JavaScript' 카테고리의 다른 글

JavaScript - 내장함수, 객체, 생성자 함수, 캡슐화, 상속(호출), 기본자료형

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

JavaScript - 클로저, Scope

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

Tag Cloud

Calendar

Archive

My Link

티스토리툴바