JavaScript Basic [KOR]

Javascript


html 에서 프로그래밍을 가능하게 하도록 한다. Ajax 기능을 제공한다.
javascript는 <script type ="text/javascript">와 </script>사이에 작성을 한다.


javascript의 변수정의 html출력, 콘솔 출력
 // 변수 정의 법
let aaa = 123, bbb = 45.6;

// html 출력 법
document.write(aa, ' ', bb, "<br>");

// 콘솔 출력 법
console.log(aa, ' ', bb);


조건 판단문 if
let jumsu = prompt("평균 정수 입력", "80")  // 키보드로 소량의 자료 입력하는 대화상자

if (jumsu >= 90){
	document.write("<br><b style='font-size:30px;color:blue;'>90 이상</b>")
}else if (jumsu >= 70){
	document.write('<br>70이상');
}else{
	document.write('<br>70미만');
}


조건 판단문 switch
let jumsu = 80;

switch (jumsu){
case 90:
	document.write('<br>나이스');
	break;
case 80:
	document.write('<br>베리굿');
	break;
case 70:
	document.write('<br>원더풀');
	break;
default:
	document.write('<br>기타');
	break;
}


순환문 for
document.write('<table border="1">');
for (let a = 2; a < 10; a++){
	if (a % 2 === 0){
		document.write('<tr class="my">');
	}else{
		document.write('<tr>');
	}
	for (let b = 1; b < 10; b++){
		document.write('<td>');
		document.write(a + "*" + b + "=" + a * b);
		document.write('</td>');
	}
	document.write('</tr>');


순환문 while
while (k <= 10){
	k++;
	if(k === 3 || k === 5) continue;  // ||는 and
	document.write(k + ' ');
	if (k === 7) break;
}
document.write('<br>');


array (python의 list)
// array 정의
let cc = new Array();

// array에 원소 집어넣기
for (let k = 0; k < 10; k++){
	cc[k] = k + 1;
}

// array 원소 출력
for (let m = 0; m < cc.length; m++){
	document.write(m + " ");
}
document.write("<br>");


내장 함수
//문자 함수
let str = "javascript language";
document.write(str.charAt(2));      // 문자의 3번째 요소 반환
document.write(str.indexOf("v"));   // 문자에서 v의 위치 반환
document.write(str.toLowerCase());  // 문자를 소문자로 변환

// 스타일 함수
document.write(tr.bold().fontcolor('#ff0000').fontsize(20));
document.write(str.strike().italics());

// 수학 함수
document.write(Math.abs(-7));    // 절대값
document.write(Math.round(3.6)); // 소숫점 반올림
document.write(Math.random());   // 0부터 1까지 랜덤 실수 반환

// 날짜 함수
let d = new Date();
document.write(d);
document.write(d.getFullYear() + " " + d.getMonth() + " " + d.getMonth() + " " + 
		d.getDate() + " " + d.getHours());


정의 함수
let count = 0;
function aa(){
	count += 1;
	document.write(count + "코드의 재활용이 목적<br>");
};
aa();  // 함수 실행

//화살표 함수 : 모던 자바스크립트에서 지원
let sum = (a, b) => a + b;
document.write('<br>', sum(1, 2));


이벤트 처리
function func(){
	let data = prompt("날짜 입력 : ", "2021-5-27");
	let arrData = data.split("-");
	let y = arrData[0];
	let m = arrData[1];
	let d = arrData[2];
	document.write(y + "년" + m + "월" + d + "일");
}
<!-- 이벤트 실행  -->
<a href = "javascript:func();">이벤트 처리 1</a>

<a href = "javascript:;" onclick = "func()">이벤트 처리 2</a>

<button onclick="func()">이벤트 처리 3</button>

<input type='button' onclick="func()" value="이벤트 처리 4">
}


외부 css, javascript 불러오기
<link rel="stylesheet" href="css폴더위치/css파일명.css"> 
<script type="text/javascript" src="js폴더위치/js파일명.js"></script>  


window.onload : 클라이언트가 웹서버에게 html문서를 요청해서 그 결과가 모두 수신되면 자동발생되는 이벤트
window.onload = function(){
	document.getElementById("btn1").onclick=function(){
		document.getElementById("show").innerHTML="클릭1 선택";
	}
<input type="button" value="클릭1" id="btn1">
<div id="show">결과 출력 지역</div>


form
window.onload = function(){
	document.getElementById("btnSend").onclick = chkData;
}

function chkData(){
	if (frm.name.value ==="" || isNaN(frm.name.value) == false){
		frm.name.focus();  // 커서가 frm -> name 으로 간다
		alert("이름을 입력하시오")
		return;
	}
}
<form name="frm">
<table border="1">
	<tr>
		<td>이름</td>
		<td><input type="text" name="name"></td>
	</tr>
	<tr>
		<td colspan="2" style="text-align:center;">
			<input type="button" id="btnSend" value="자료전송">
		</td>
	</tr>
</table>
</form>


AJAX : XML에 기반으로 하여 서버와의 통신을 비동기 방식으로 연결함으로써 시스템 자원의 불필요한 시간낭비를 줄이고, 사용자 환경은 자바스크립트가 지원하는 대화형 웹 Application을 구현한 기술이다.
let xhr;

function createXhr(){
	if (window.ActiveXObject){
		xhr = new ActiveXObject("Msxml2.XMLHTTP");  // 인터넷 익스플로러8 이하
	}else{
		xhr = new XMLHttpRequest();  // AJAX 지원 클래스
	}
}


Categories : Practice