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