[JavaScript] JS 기초 (2)

개발(Web)/Web

[JavaScript] JS 기초 (2)

shinyelee 2021. 2. 2. 20:28

009.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var 배열 = [10, 20, 30, 40];
	// 여러개의 자료를 순서를 정해 저장할 때 배열 사용.
	// [10, 20, 30, 40]
	//   0   1   2   3
	
	document.write(배열[0]);
	document.write('<br>');
	// -> 10
	
	document.write(배열[1]);
	document.write('<br>');
	// -> 20
	
	document.write(배열.slice(1, 3));
	document.write('<br>');
	// 배열[1]부터 출력 시작, 배열[3] 앞에서 끊음.
	// -> 20,30
	
	document.write(배열.pop());
	document.write('<br>');
	// 배열 마지막 값(=리턴값) 꺼냄.
	// -> 40
	
	document.write(배열);
	document.write('<br>');
	// 꺼낸 40 제외한 나머지 값 출력.
	// -> 10,20,30
	
	배열.push(100);
	document.write(배열);
	document.write('<br>');
	// 배열 마지막에 ()안 값을 추가.
	// 배열[4]에 100 입력.
	// -> 10,20,30,100
	
	document.write(배열.join('!!'));
	document.write('<br>');
	// 사이마다 , 대신 !! 끼워넣어서 String으로 반환.
	// ->10!!20!!30!!100
	
	배열.sort();
	document.write(배열);
	document.write('<br>');
	// 10 100 20 30 순으로 정리
	
	배열.reverse();
	document.write(배열);
	document.write('<br>');
	// sort랑 반대 순서로 정리
	</script>
</body>
</html>

010.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var person = {
		name: {
			firstname: 'shinye',
			lastname: 'lee',
		},
		age: 10,
		married: false,
	};
	document.write(person['name']);
	document.write('<br>');
	
	document.write(person['name']['firstname']);
	document.write('<br>');
	
	document.write(person['name']['lastname']);
	document.write('<br>');
	
	document.write(person['age']);
	document.write('<br>');
	</script>
</body>
</html>

제어문

제어문		프로그램의 흐름을 제어하는 실행문
종류	조건문(분기문)	if~else(조건 만족 여부에 따라 실행 제어)
	선택문	switch~case(변수에 일치하는 경우의 값에 따라 제어)
	반복문	for, while, do while(특정 실행문 반복하도록 제어)

011.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var a = 10;
	if(false) {
		document.write('if');
	} else if(true) {
		document.write('else if one'); // 얘만 실행됨.
	} else if(true) {
		document.write('else if two'); // 실행 안 됨.
	} else {
		document.write('else');
	}
	</script>
</body>
</html>

012.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var a = 4;
	switch(a) {
		case 1:
			document.write('1');
			break;
		case 2:
			document.write('2');
			break;
		case 3:
			document.write('3');
			break;
		default:
			document.write('default');
	}
	</script>
</body>
</html>

증감연산자

증감연산자 [++, --]		변수에 앞/뒤에서 사용, 값 +1(증가) 또는 -1(감소) ;(세미콜론)을 기준으로 연산이 실행 여부 판단
전위연산	++A	변수 값 사용할 때 +1 (값 1 증가 후 연산 수행)
전위연산	--A	변수 값 사용할 때 -1 (값 1 감소 후 연산 수행)
후위연산	A++	변수 값 사용 후 +1 (연산 수행 후 값 1 증가)
후위연산	A--	변수 값 사용 후 -1 (연산 수행 후 값 1 감소)

013.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	array = [10, 20, 30, 40, 50];
	for(var i=0; i<array.length; i++) {
		document.write(array[i]);
		document.write('<br>');
	}
	// array.length = 5
	
	document.write('<br>');
	
	j = 0;
	while(j<10) {
		document.write(j);
		document.write('<br>');
		j++;
	}
	// 0~9 출력.
	</script>
</body>
</html>

014.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var i = 10;
	// let k = 10000;
	const l = 100000;
	if(i>5) {
		var j = 100;
	}
	else {
		var j = 1000;
	}
	document.write(l);
	// var는 function-scoped, 중복 체크X. 
	// let과 const는 block-scoped, 중복체크O.
	</script>
</body>
</html>

추가설명

var , let , const 의 차이

var, let, const 의 차이에 대해 예제와 함께 알아보자. 개요 Javascript 에 ES2015(ES6) 가 도입되면서 , 비약적으로 많은 발전이 있었다. 그 중 하나는 scope 에 따라 달리 쓰게되는 let, const 이다. 이전에..

itseminar.tistory.com

015.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div class="one">hello world</div>
	<div class="one two" id="three">hello world two</div>
	<div class="one two four">hello world three</div>
	<script>
	// 1. 단일 element를 반환하는 함수
//	document.getElementById('id')
//	document.querySelector('query')
	// 2. elements를 반환하는 함수
//	document.getElementsByName('name')
//	document.getElementsByClassName('className')
//	document.querySelectorAll('query')

	k = document.getElementsByClassName('one');
	console.log(k);
	
	document.write(k['0']['innerHTML']);
	document.write('<br>');
	
	document.write(k['2']['className']);
	document.write('<br>');
	</script>
</body>
</html>

016.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
p {background-color: skyblue;}
</style>
</head>
<body>
	<h1 id="one">hello world</h1>
	<p>hello world</p>
	<button onclick="f()">클릭!</button>
	<script>
	function f() {
		document.getElementById('one').innerHTML = '반갑습니다';
		document.getElementById('one').style.backgroundColor = 'yellow';
	}
	</script>
</body>
</html>

017.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 id="one">hello world</h1>
	<p>hello world</p>
	<button onclick="f()">클릭!</button>
	
<!-- jQuery는 
	 1. 엘리먼트를 선택할 수 있는 강력한 방법
	 2. 선택된 엘리먼트를 효율적으로 제어할 수 있는 방법
 -->
<script 
	src="https://code.jquery.com/jquery-3.5.1.js" 
	integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
	crossorigin="anonymous">
</script>

<script >
	function f() {
		$('#one').html('반갑습니다');
		document.getElementById('one').style.backgroundColor = 'yellow';
	}
</script>
</body>
</html>

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

code.jquery.com

jQuery CDN &amp;amp;amp;rarr; jQuery 3.5.1 &amp;amp;amp;rarr; uncompressed.

018.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 id="one">hello world</h1>
	<p>hello world</p>
	<button id="two" onclick="f()">클릭!</button>
	
<!-- jQuery는 
	 1. 엘리먼트를 선택할 수 있는 강력한 방법
	 2. 선택된 엘리먼트를 효율적으로 제어할 수 있는 방법
 -->
<script 
	src="https://code.jquery.com/jquery-3.5.1.js" 
	integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
	crossorigin="anonymous">
</script>

<script >
	$('#two').click(
		function f() {
			$('p').html('반갑습니다');
		}
	);
</script>
</body>
</html>

019.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 class="one">hello world 1</h1>
	<h1 class="one two">hello world 2</h1>
	<h1 class="one two three" id="four">hello world 3</h1>
	<h1>hello world 4</h1>
	<h1>hello world 5</h1>
	<h1>hello world 6</h1>
		
	<p>hello world</p>
	<button id="two" onclick="f()">클릭!</button>
	
<script 
	src="https://code.jquery.com/jquery-3.5.1.js" 
	integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
	crossorigin="anonymous">
</script>

<script >
	$('#two').click(
		function f() {
			$('h1.one#four').html('반갑습니다');
		}
	);
	// $('h1:first').html('반갑습니다')
	// -> 첫 번째 h1만 '반갑습니다'로 바꿈.
	// $('h1:last').html('반갑습니다')
	// -> 마지막 h1만 '반갑습니다'로 바꿈.
	
	// 필터 예시
	
	// even(짝수) odd(홀수) first(처음) last(끝)
	// nth-child(2) -> 두번째
	// nth-child(2n) -> 짝수
	
	// $(#id) -> id만 선택
	// $(.class) -> class만 선택
	// $(h1.class) -> h1+class 선택
	// $(h1.class#id) -> h1+class+id 선택
</script>
</body>
</html>

020.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 class="one">hello world 1</h1>
	<h1 class="one two">hello world 2</h1>
	<h1 class="one two three" id="four">hello world 3</h1>
	<h1>hello world 4</h1>
	<h1>hello world 5</h1>
	<h1>hello world 6</h1>
		
	<p>hello world</p>
	<button id="two" onclick="f()">클릭!</button>
	
<script 
	src="https://code.jquery.com/jquery-3.5.1.js" 
	integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
	crossorigin="anonymous">
</script>

<script >
	$('#two').click(
		function f() {
			// html -> 태그 적용O, 형광펜 효과
			$('h1:first').html('<mark>반갑습니다</mark>').fadeOut(3000).fadeIn(3000);
			// text -> 태그 적용X, 텍스트 처리
			$('h1:last').text('<mark>반갑습니다</mark>');
		}
	);
	
	// 메서드 예시(속성값 변경, DOM 탐색, CSS, 이벤트, 효과 등)
	// text html val hide show fadeIn fadeOut
</script>
</body>
</html>

JSON Generator – Tool for generating random data

Generate any random data you want with power of agile templates and save it to our servers for later use.

www.json-generator.com

JSON Generator의 왼쪽 화면에서 불필요한 정보 삭제, repeat 숫자 변경.

user.js

var user = [
	  {
		    "_id": "60196646767256e4e4e2e00e",
		    "age": 32,
		    "eyeColor": "green",
		    "name": "Annie Dodson",
		    "gender": "female",
		    "company": "MIRACLIS",
		    "email": "anniedodson@miraclis.com",
		    "phone": "+1 (950) 538-3095"
		  },
		  {
		    "_id": "601966463cbdc83c5d0c287e",
		    "age": 22,
		    "eyeColor": "green",
		    "name": "Reilly Strong",
		    "gender": "male",
		    "company": "PROXSOFT",
		    "email": "reillystrong@proxsoft.com",
		    "phone": "+1 (827) 492-3038"
		  },
		  {
		    "_id": "601966465b36c4962b241d31",
		    "age": 24,
		    "eyeColor": "blue",
		    "name": "Roth Daniels",
		    "gender": "male",
		    "company": "TERRAGO",
		    "email": "rothdaniels@terrago.com",
		    "phone": "+1 (834) 538-3456"
		  },
		  {
		    "_id": "60196646b66ce2dbbf64cb61",
		    "age": 29,
		    "eyeColor": "green",
		    "name": "Jessica Rojas",
		    "gender": "female",
		    "company": "DIGIQUE",
		    "email": "jessicarojas@digique.com",
		    "phone": "+1 (811) 402-2443"
		  },
		  {
		    "_id": "601966468e88307cbcc306a2",
		    "age": 25,
		    "eyeColor": "green",
		    "name": "Roslyn Stanley",
		    "gender": "female",
		    "company": "PURIA",
		    "email": "roslynstanley@puria.com",
		    "phone": "+1 (805) 527-2068"
		  },
		  {
		    "_id": "60196646a3780b922436b734",
		    "age": 26,
		    "eyeColor": "brown",
		    "name": "Craft Salazar",
		    "gender": "male",
		    "company": "ZAJ",
		    "email": "craftsalazar@zaj.com",
		    "phone": "+1 (952) 567-3759"
		  },
		  {
		    "_id": "60196646b922f79fa4d364e1",
		    "age": 21,
		    "eyeColor": "green",
		    "name": "Latasha Dickerson",
		    "gender": "female",
		    "company": "VERTON",
		    "email": "latashadickerson@verton.com",
		    "phone": "+1 (822) 595-3277"
		  },
		  {
		    "_id": "601966461cf03d8a789d0cb0",
		    "age": 40,
		    "eyeColor": "green",
		    "name": "Vazquez Sloan",
		    "gender": "male",
		    "company": "TERASCAPE",
		    "email": "vazquezsloan@terascape.com",
		    "phone": "+1 (955) 499-2940"
		  },
		  {
		    "_id": "601966468766487af34f061b",
		    "age": 39,
		    "eyeColor": "blue",
		    "name": "Hinton Mathews",
		    "gender": "male",
		    "company": "ENQUILITY",
		    "email": "hintonmathews@enquility.com",
		    "phone": "+1 (909) 562-2866"
		  },
		  {
		    "_id": "6019664622536c78d2e28f61",
		    "age": 26,
		    "eyeColor": "brown",
		    "name": "Anna Thomas",
		    "gender": "female",
		    "company": "OCTOCORE",
		    "email": "annathomas@octocore.com",
		    "phone": "+1 (938) 500-2437"
		  },
		  {
		    "_id": "601966468c821e4c5847a226",
		    "age": 38,
		    "eyeColor": "blue",
		    "name": "Henderson Lott",
		    "gender": "male",
		    "company": "BILLMED",
		    "email": "hendersonlott@billmed.com",
		    "phone": "+1 (886) 509-2251"
		  },
		  {
		    "_id": "60196646ff9a6f4a63f2a547",
		    "age": 40,
		    "eyeColor": "blue",
		    "name": "Kris Vincent",
		    "gender": "female",
		    "company": "FLYBOYZ",
		    "email": "krisvincent@flyboyz.com",
		    "phone": "+1 (841) 492-3407"
		  },
		  {
		    "_id": "6019664679b5e561c5935daa",
		    "age": 27,
		    "eyeColor": "blue",
		    "name": "Horn House",
		    "gender": "male",
		    "company": "PROVIDCO",
		    "email": "hornhouse@providco.com",
		    "phone": "+1 (838) 420-2198"
		  }
		]

021.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table, tr, td, th {
	border: solid 1px black;
	border-collapse: collapse;
}
th {
	width: 15vw;
}
</style>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>id</th>
				<th>age</th>
				<th>eyeColor</th>
				<th>name</th>
				<th>gender</th>
				<th>company</th>
				<th>email</th>
				<th>phone</th>
			</tr>
		</thead>
		<tbody></tbody>
		<tfoot></tfoot>
	</table>
	
	<script 
	src="https://code.jquery.com/jquery-3.5.1.js" 
	integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
	crossorigin="anonymous">
	</script>
	
	<script src="user.js"></script>
	
	<script>
	for(var i=0; i<user.length; i++) {
		$('tbody').append('<tr>');
		$('tbody').append('<td>'+user[i]['_id']+'</td>')
		$('tbody').append('<td>'+user[i]['age']+'</td>')
		$('tbody').append('<td>'+user[i]['eyeColor']+'</td>')
		$('tbody').append('<td>'+user[i]['name']+'</td>')
		$('tbody').append('<td>'+user[i]['gender']+'</td>')
		$('tbody').append('<td>'+user[i]['company']+'</td>')
		$('tbody').append('<td>'+user[i]['email']+'</td>')
		$('tbody').append('<td>'+user[i]['phone']+'</td>')
		$('tbody').append('</tr>');
	}
	</script>
</body>
</html>

출처

'개발(Web) > Web' 카테고리의 다른 글

[Node.js ] 'concurrently'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. (0)	2021.02.17
[Node.js] npm WARN optional/notsup SKIPPING OPTIONAL DEPENDENCY: 어쩌구 (0)	2021.02.08
[JavaScript] JS 기초 (1) (0)	2021.02.02
[HTML] 에밋(Emmet) 설치 (0)	2021.02.01
[CSS] CSS 기초 30분 요약 (0)	2021.01.31

현재글[JavaScript] JS 기초 (2)

나의 코딩 삽질 연대기

JavaScript, git, error, syntax, Github Pages, java, node.js, Spring, MySQL, Kotlin, Jekyll 기반의 GitHub Page 생성, Internet, Eclipse, grid, antd, CSS, Android, oracle, github, Android Studio,

Today :
Yesterday :

신예리의 개발자취