< 변수 >
변수: 변하는 값 저장
상수: 변하지 않음
- 변수 선언 해도 되고 안해도 됨.
-- 변수를 선언하지 않고 값을 할당하면 전역변수됨.
function f1() {
kkk = 10;
}
alert("kkk: " + kkk);- 변수 선언할 때 타입 지정 안함. (값의 형태에 따라 자동으로 타입 결정됨)
- 변수명 있어도 되고 없어도 되고
- ; 있어도 되고 없어도 되고
- <script></script> 태그 안에 작성함. -- <head>에 써도 되고 <body>에 써도 됨.
전역변수 -- 함수 밖에서 정의한 변수. 어느 함수에서나 사용 가능.
지역변수 -- 함수 안에서 정의한 변수. 해당 함수에서만 사용 가능.
<script>
/* 전역변수: 어느 함수나 사용 가능 */
var a = 1;
let b = 2;
function f1() {
alert("f1()a:" + a);
alert("f1()b:" + b);
/* 지역변수: 해당 함수에서만 사용 가능 */
var x = 3;
let y = 4;
alert("f1()x:" + x);
alert("f1()y:" + y);
}
function f2() {
alert("f1()a:" + a);
alert("f1()b:" + b);
alert("f1()x:" + x); //error!
alert("f1()y:" + y); //error!
}
</script>
var vs. let
<script>
var 변수명; //var -- 블록 밖 선언과 안에서 선언한 차이가 없음.
let 변수명; //let -- 블록 안에서 선언하면 블록 내에서만 사용 가능
let 배열명 = [ , , , ];
let 객체명 = { 멤버변수명 : 값 };
</script>
<script>
function f2() {
{
var v1 = 10;
alert("f2 블록 안에서 v1: " + v1);
}
alert("f2 블록 밖에서 v1: " + v1);
{
let v2 = 10;
alert("f2 블록 안에서 v2: " + v2);
}
alert("f2 블록 밖에서 v2: " + v2); //error!
}
</script>
// 전역변수: 함수 밖에서 선언한 변수. 어느 함수에서나 사용 가능.
var a = 10;
let b = 20; //정수
// js는 문자열을 묶을 때 "", ''로 묶어도 같다. (ch없음)
c = "hello"; //문자열
d = 'abc'; //문자열
let e = 2.34; //실수
// JSON(JS Object Notation): js에서 데이터 표현하는 방법.
let f = [1,2,3,4,5]; //배열[]
let g = {"name":"aaa", "tel":"111"}; //객체{멤버변수명:값}
// g.name = aaa, g.tel = 111
let h = true; //boolean 타입더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- js 파일 링크해 적용 -->
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<script type="text/javascript">
// document.write: html 문서에 출력하는 메서드
document.write("<h1>a: " + a + " / b: " + b + "</h1>")
document.write("<h1>" + c + "</h1>")
document.write("<h1>" + d + "</h1>")
document.write("<h1>" + e + "</h1>")
document.write("<h1>");
for (i = 0; i < f.length; i++) {
document.write(f[i] + ", ");
}
document.write("</h1>");
document.write("<h1> name: " + g.name + " / tel: " + g.tel + "</h1>")
document.write("<h1>" + h + "</h1>")
if (h == true) {
document.write("true<br/>");
} else {
document.write("false<br/>");
}
</script>
</body>
</html>
https://www.oracle.com/kr/database/what-is-json/
JSON이란 무엇인가?
JSON을 이용하는 프로그래머, 개발자, IT 전문가들은 어떤 언어에서든 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있습니다.
www.oracle.com
< 상수 >
- 변할 수 없는 값이기 때문에 선언할 때 값을 지정하는 것 외에 값 변경 불가.
- 보통 변수는 소문자, 상수는 대문자로 씀. (컴파일에는 소문자로 써도 영향 없음)
const 상수명 = 값;
<script>
const MAX=10;
MAX = 200; //error! 값 변경 불가
alert("MAX" + MAX); //호출가능
</script>< 연산자 >
+, -, *, /, %
++, --
&&, ||
==, !=, >, >=, <, <=
=, +=, -=, *=, /=, %=
- JAVA에서 사용하는 모든 연산자 사용 가능
- 문자열도 == 으로 비교함. (JAVA는 .equals())
< 제어문 >
if(조건1) {
실행문;
} else if (조건2){
실행문;
} else {
실행문;
}
switch (변수) {
case 1:
break;
case 2:
break;
default:
break;
}
for(i=0; i<5; i++) {
실행문;
}
▼ 구구단 테이블에 넣어 출력
더보기
<body>
<script type="text/javascript">
document.write("<br/><table border = 1px><tr>")
for (j = 2; j < 10; j++) {
document.write("<td>" + j + "단</td>");
}
document.write("</tr>")
for (j = 2; j < 10; j++) {
document.write("<td>")
for (i = 1; i < 10; i++) {
document.write(j + " X " + i + " = " + (j * i)+"<br/>");
}
document.write("</td>")
}
document.write("</tr></table>")
</script>
</body>
while (조건) {
실행문;
}
do {
실행문;
} while (조건);
continue: 루프 진행
break: 루프나 블록 빠져나감
return: 함수 종료 및 값 반환
< 함수 >
- <head>에 만든다.
1. 함수 정의
- JS의 함수는 반환타입을 정의하지 않음.
return값이 필요하면 그냥 마지막에 return 하면 됨.
function 함수명(파라메터 목록){
실행문;
return 값; // 반환할 값이 있을 경우
}
2. 함수 호출
함수명();
<head>
<script type="text/javascript">
// 함수 정의. 함수명:add, 파라메터:a, b 2개
function add(a, b) {
return a + b;
}
</script>
</head>
<body>
<script type="text/javascript">
let res = add(1, 2);
document.write("res: " + res + "<br/>");
let res2 = add("aaa", "bbb");
document.write("res2: " + res2 + "<br/><br/>");
</script>
</body>
<head>
<script type="text/javascript">
//파람으로 단수 받아서 그 한 단을 출력하는 함수
function ggdan(dan) {
for (i = 1; i < 10; i++) {
document.write(dan + " * " + i + " = " + (dan * i) + "<br/>")
}
}
</script>
</head>
<body>
<script type="text/javascript">
ggdan(2);
</script>
</body>
< 알림창 >
alert("메시지"); // 메시지와 확인버튼 하나로 구성
let val = prompt("메시지", "초기값"); // 입력박스가 있는 알림창. -- 입력값 반환(무조건 text 형태로)
let flag = confirm("메시지"); // 메시지 + 확인 버튼(true 반환) + 취소 버튼(false 반환)
더보기
<body>
<script type="text/javascript">
alert("hello javascript~ :)");
let age = prompt("당신의 나이는?", "0");
document.write("age: " + age + "<br/>");
let flag = confirm("keep going?");
if(flag==true){
document.write("yes");
} else {
document.write("nope!");
}
</script>
</body>
더보기
1. btn
<head>
<script type="text/javascript">
function b() {
alert(f.btn1.value);
}
function c() {
alert("function c")
}
function d() {
alert("function d")
}
</script>
</head>
<body>
<form name="f">
<!-- b함수에서 btn1요소의 value를 alert로 출력 -->
<input type="button" name="btn1" value="btn1" onclick="b()">
<input type="button" value="btn2" onclick="c()">
<input type="button" value="btn3" onclick="d()">
</form>
</body>
</html>
2. hello
<head>
<script type="text/javascript">
function e() {
/* form f에서 이름이 val인 타입의 value 값을 넣어라. */
f.val.value="hello";
}
function ff() {
alert(f.val.value);
}
</script>
</head>
<body>
<form name="f">
<input type="text" name="val">
<input type="button" value="확인1" onclick="e()">
<!-- 텍스트 박스에서 입력한 값을 alert로 보여줌 -->
<input type="button" value="확인2" onclick="ff()">
</form>
</body>
</html>
< 페이지 이동 >
location.href = "이동할 페이지";
<head>
<script type="text/javascript">
function a(path) {
location.href = path;
}
</script>
</head>
<body>
<input type="button" value="1페이지로 이동" onclick="a('1.html')">
<input type="button" value="2페이지로 이동" onclick="a('3.html')">
</body>- 속성값은 안전하게 따옴표("", '')로 묶어주자.
-- 안묶어줘도 실행이 되긴 하지만, 속성값에 스페이스가 있으면 하나로 인식하지 못함. 그러니까 묶어주자~
- 따옴표가 중첩이 될 경우 서로 다르게 써주자~ ("ㅎㅎ'ㅋㅋ'ㅎㅎ")
< 이벤트 핸들러 >
이벤트 -- UI(뷰 페이지)에 발생한 사건 (클릭, 드래그, 페이지로드, 입력값변경...)
이벤트 핸들러 -- 이벤트가 발생하면 자동으로 호출되는 함수
핸들러 등록 속성
on이벤트명
click (클릭 이벤트) -- onclick
load (페이지 열리자마자 발생) -- onload
focus (포커스 획득) -- onfocus
blur (포커스 빼앗김) -- onblur
change (입력값이 변경된 뒤 포커스 잃었을 때) -- onchange
mouseover (영역에 마우스가 들어갔을 때) -- onmouseover
mouseout (영역 밖으로 마우스가 나갔을 때) -- onmouseout
keydown (키보드 누를때) -- onkeydown
keyup (키보드 눌렀다 땠을 때) --onkeyup
<input type="button" value="b1" onclick="함수명('aaa')">
- parseInt("123") : 문자열 숫자를 정수 타입으로 변환
▼ onclick 예시 (계산기)
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input[type=button]{
width:30px; height:30px;
}
</style>
<script type="text/javascript">
/* 전역변수. 어디서나 사용 가능. */
let num1 = 0;
let op = "";
function nums(num) {
f.t1.value += num; // 문자열 타입이라 계산되지 않고 옆에 붙음.
}
function funOp(o){
op=o; // 선택한 연산자를 op에 저장
/* parseInt("123"): 문자열 숫자를 정수 타입으로 변환 */
num1 = parseInt(f.t1.value); // 처음 입력한 숫자
f.t1.value=""; // 공백 문자로 초기화
}
function eq(){
let num2 = parseInt(f.t1.value); // 연산자 이후에 입력한 숫자
switch(op){
case "+":
res = num1 + num2;
break;
case "-":
res = num1 - num2;
break;
case "*":
res = num1 * num2;
break;
case "/":
res = num1 / num2;
break;
}
f.t1.value = res;
}
</script>
</head>
<body>
<!-- 계산기~ -->
<h3>계산기</h3>
<form name=f>
<table>
<tr>
<td colspan="4"><input type="text" name="t1"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="nums(1)"></td>
<td><input type="button" value="2" onclick="nums(2)"></td>
<td><input type="button" value="3" onclick="nums(3)"></td>
<td><input type="button" value="+" onclick="funOp('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="nums(4)"></td>
<td><input type="button" value="5" onclick="nums(5)"></td>
<td><input type="button" value="6" onclick="nums(6)"></td>
<td><input type="button" value="-" onclick="funOp('-')"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="nums(7)"></td>
<td><input type="button" value="8" onclick="nums(8)"></td>
<td><input type="button" value="9" onclick="nums(9)"></td>
<td><input type="button" value="*" onclick="funOp('*')"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="nums(0)"></td>
<td><input type="button" value="C" onclick="javascript:f.t1.value=''"></td>
<td><input type="button" value="=" onclick="eq()"></td>
<td><input type="button" value="/" onclick="funOp('/')"></td>
</tr>
</table>
</form>
</body>
</html>
※ 익명함수
: 함수명 X. 함수 소스 코드를 변수명에 저장해서 함수를 만듦.
: 변수값을 변수에 넣은 형태 ==> 함수 코드 끝에 세미콜론
==> 익명함수를 호출할 땐 변수명(); 으로 호출
<script>
var 변수명 = function( 매개변수 ) {
실행문;
};
변수명(); // 익명함수 호출
</script>
- 이벤트 핸들러에 사용된 익명함수
==> 굳이 함수를 호출하지 않아도 이벤트가 발생하면 자동으로 호출됨.
function test(){ //load 이벤트 핸들러 정의
실행문;
}
window.onload = test; // window의 onload 속성으로 핸들러(test) 등록
//페이지가 로드될 때 한 번만 실행될 건데 이름까지 붙이기 귀찮다! => 익명함수
// 이벤트 핸들러 정의 + 핸들러 등록 동시에 작성
window.onload=function() {
실행문
}▼ onload 예시
더보기
<head>
<script type="text/javascript">
//익명함수
window.onload = function(){
alert("페이지 열리자마자 실행됨");
}
</script>
</head>
- console.log() : 개발자 툴의 콘솔에 텍스트 출력
- this : 현재 요소
▼ onfocus / onblur 예시
더보기
<head>
<script type="text/javascript">
function a(tt,str) { /* onfocus */
/* console.log : 개발자 툴 콘솔에 출력됨 */
console.log(str + " 요소가 포커스 얻음");
tt.value = "*^^*";
}
function b(tt) { /* onblur */
tt.value = "ㅠㅠ";
}
</script>
</head>
<body>
<!-- this : 현재 요소 -->
<input type="text" name="t1" onfocus="a(this, 't1')" onblur="b(this)"><br/>
<input type="text" name="t2" onfocus="a(this, 't2')" onblur="b(this)"><br/>
</body>
▼ onchange 예시
더보기
<head>
<script type="text/javascript">
function c(){ /* 가격을 수량만큼 곱한 뒤 결제금액에 넣음 */
f.total.value = 1000*f.sel.value;
}
</head>
<body>
가격: 1000원<br/>
수량: <select name="sel" onchange="c()">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br/>
결제금액: <input type="text" name="total" value="0">
</body>
▼ onmouseover / onmouseout 예시
더보기
<head>
<script type="text/javascript">
function f1(){ /* onmouseover */
//DOM(문서 객체화 후 실시간 변경)
let div = document.getElementById("mydiv"); // 문서 객체화
div.style.backgroundColor = 'yellow'; // 실시간 변경
}
function f2(){ /* onmouseout */
let div = document.getElementById("mydiv");
div.style.backgroundColor = 'green';
}
</head>
<body>
<div id="mydiv"
style="width:150px;height:150px;border:2px solid red"
onmouseover="f1()" onmouseout="f2()"> </div>
</body>
- onkeydown 을 쓰면 ""누르고 있을 때"" 카운트 됨. -> 반박자 느리게 카운팅 됨,,
- onkeyup 은 눌렀다가 ""떼는"" 것에 초점 맞춰 카운트 됨. -> 빠릿빠릿함!
▼ onkeyup 예시
더보기
<head>
<script type="text/javascript">
function f3(){ /* onkeyup */
//10(제한글자수)에서 keytest 이름의 입력창에 입력한 값(value)의 길이(1)를 뺌.
let len = 10-f.keytest.value.length;
let div = document.getElementById("ddd");
/* innerHTML : <>와 </> 사이에 쓴 내용(태그가 있으면 같이 읽음) */
div.innerHTML = len;
}
</script>
</head>
<body>
10글자 까지만 입력<div id="ddd">10</div>
<input type="text" name="keytest" onkeyup="f3()">
</body>
▼ 총 코드
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){ //익명함수: 이벤트핸들러에 주로 사용
alert("페이지 열리자마자 실행됨");
}
function a(tt,str) { /* onfocus */
/* console.log : 개발자 툴 콘솔에 출력됨 */
console.log(str + " 요소가 포커스 얻음");
tt.value = "*^^*";
}
function b(tt) { /* onblur */
tt.value = "ㅠㅠ";
}
function c(){ /* 가격을 수량만큼 곱한 뒤 결제금액에 넣음 */
f.total.value = 1000*f.sel.value;
}
function f1(){ /* onmouseover */
//DOM(문서 객체화 후 실시간 변경)
let div = document.getElementById("mydiv"); // 문서 객체화
div.style.backgroundColor = 'yellow'; // 실시간 변경
}
function f2(){ /* onmouseout */
let div = document.getElementById("mydiv");
div.style.backgroundColor = 'green';
}
function f3(){ /* onkeyup */
//10(제한글자수)에서 keytest 이름의 입력창에 입력한 값(value)의 길이(1)를 뺌.
let len = 10-f.keytest.value.length;
let div = document.getElementById("ddd");
/* innerHTML : <>와 </> 사이에 쓴 내용(태그가 있으면 같이 읽음) */
div.innerHTML = len;
}
</script>
</head>
<body>
<form name="f">
<br/><hr/><br/><br/>
<!-- this : 현재 요소 -->
<input type="text" name="t1" onfocus="a(this, 't1')" onblur="b(this)"><br/>
<input type="text" name="t2" onfocus="a(this, 't2')" onblur="b(this)"><br/>
<br/><br/><hr/><br/>
가격: 1000원<br/>
수량: <select name="sel" onchange="c()">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br/>
결제금액: <input type="text" name="total" value="0">
<br/><br/><hr/><br/>
<div id="mydiv"
style="width:150px;height:150px;border:2px solid red"
onmouseover="f1()" onmouseout="f2()"> </div>
<br/><br/><hr/><br/>
10글자 까지만 입력<div id="ddd">10</div>
<input type="text" name="keytest" onkeyup="f3()">
<br/><br/><hr/><br/>
</form>
</body>
</html>
