JAVA Script 선언 문
내부 선언문
HTML index 내에 선언해 주는 경우
외부 선언문
.js 파일을 분리 생성해서 HTML에 연결 해 준다.
JAVA와 다른 개념
출력문 - document.write
document 객체의 write() 메서드를 사용하여 출력한다.
JAVA의 System.out.print();와 같은 동작을 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document 객체</title>
<script>
document.write("환영합니다");
//document 객체는
//window 객체의 하부객체 이다.
//document 겍체가 HTML 태그를 관장한다.
//DOM : Document Object Model
//document 객체롤 제어할 수 있는 현태가 만들어진 것.
//DOM Tree : DOM이 Tree형태로 구성된 것
document.write("환영합니다","<br>");
//document 객체의 write 메소드를 이용하여 데이터를 문서에 출력한다.
//출력문 뒤 "<br>"을 이용해 줄바꿈 해준다.
</script>
</head>
<body>
</body>
</html>자바스크립트의 객체
window 객체의 하부 객체에 DOM인 document객체가 있으므로
window 객체가 없으면 document 객체는 아무 역할도 할 수 없다.
마찬가지로 BOM객체과 javaScript 객체또한 window 객체가 있어야 한다.
변수 - var
데이터 타입을 지정해 주지 않고 var로 선언한다.
자동으로 데이터 타입이 정해진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수 지정</title>
<script>
var num1 = 10;
//var - variable : 변수
//자바의 int num = 10; 과 같은 형태
var num2 = 3.14;
//자동으로 실수형으로 선언된다.(int, double 등 필요X)
document.write(num1,"<br>"); //10출력
document.write(num2,"<br>"); //3.14출력
</script>
</head>
<body>
</body>
</html>출력문 자동 형변환 - +
출력문 안에 서로 다른 데이터 타입을 출력할때는
'+'로 자동 형변환 시켜서 붙여준다.
<script>
document.write("hello" + "world");
//문자열 끼리 + >>(concat, 접합)
document.write("hello: " + 20 , "<br>")
//문자열 + 정수
//피연산자의 불일치
//연산자: +
//피연산자: "hello", 20
//연산 당하는 데이터들의 타입이 일치하지 않음.
//+ 연산자가 자동으로 형변환을 해 준다.
//String + int >> String형
//int + double >> double형
</script>이는 자바에서 print문에 +를 붙여주는 것과 같은 역할이다.
입력창 - prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>prompt</title>
<script>
//prompt: 입력 창 생성해서 값을 입력 받는다.
//숫자를 입력해도 String형으로 받기 때문에 연산을 위해서는 형변환이 필요하다
var num1 = prompt('숫자1 입력') //"10"
var num2 = prompt('숫자2 입력') //"20"
var result = (num1 + num2) //"10" + "20"
document.write(result, "<br>") //"1020"
//prompt로 받은 숫자는 String타입으로 받기 때문에
//정수형 계산은 불가능, 강제 형변환 해줘야 한다.
var num1 = parseInt(num1) //10
var num2 = parseInt(num2) //20
var result = (num1 + num2) //10 + 20
document.write(result, "<br>") //30
//parse - 구문분석
//parseInt, parseFloat, JASON.parse, queryStirng.parse 등이 있다
</script>
</head>
<body>
</body>
</html>
확인창 - confirm(경고창 - alert)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>confirm</title>
<script>
var result = confirm("계속 하시겠습니까?")
document.write(result, "<br>")
//확인 누르면 true, 취소 누르면 false 반환
//if문등을 사용해 다음 동작 적용 가능
alert(result) //경고 표시
console.log(result) //콘솔 내부 출력(F12)
</script>
</head>
<body>
</body>
</html>
확인을 누르면 True, 취소를 누르면 False 반환
alert(경고창)을 통해 결과값을 확인창 형태로 출력 가능
표현식 삽입 - $ { }
키보드의 숫자 1 옆(탭키 위)에 있는 특수문자인 백틱(backtick)을 사용하면 ${ } 사이에 변수나 연산을 삽입할 수 있다.
함수
함수의 기본 형태
function을 사용해 함수를 정의해 준다.
매개변수가 없는 함수
매개변수가 있는 함수
재귀 함수
함수 실행 후 다시 되돌아와 다시 반복되는 함수
함수 내에 해당 함수를 다시 호출하는 형태가 특징이다.
외부에서 최소한 최초1회의 호출이 필요하다(호출 없이 함수 단독으로 실행 불가능)
횟수가 정해진 재귀함수
재귀함수의 활용
3! (3factorial) 계산
콜백 함수
setTimeout(호출할함수, 지연시간) 지연시간 후 함수 호출 1회 실행
setInterval(호출할함수, 지연시간) 지연시간 후 함수호출 무한 반복지연시간은 msec 단위(1000msec = 1sec)
다중배열
<script>
//배열에서 바로 다중 요소를 선언하는 경우
var arr1=[[10,20,30],[40,50,60]]
var arr2=[
[10,20,30],
[40,50,60]
]
//배열의 출력
for(var i=0; i<=1; i++){ //행변화
for(var j=0; j<=2; j++){//열변화
document.write(arr2[i][j]+" ")
}
document.write("<br>")
}
//1차원 배열에 1차원 배열을 추가하는 경우
var arr3 = [[10,20,30]]
var arr4 = [40, 50, 60]
arr3.push(arr4)//push를 사용해 원 배열에 공간을 만들어주며 요소 추가
//원배열에 원소 추가 하는 경우
var arr5 = new Array(0)
var element = null
var row = 2 //행
var col = 3 //열
for(var i=1; i<=row; i++){
element = new Array(0)
for(var j=1; j<=col; j++){
element.push(10) //element에 10 원소 추가
}//element=[10, 10, 10]
arr5.push(element)
element = null //원소 초기화
//초기화가 되지 않으면 [10, 10, 10] 뒤에 계속 추가됨
}
</script>내장객체
자바스크립트 내에 내장되어 있는 객체를 불러와 사용할 수 있다.
Date
<script>
var date = new Date()
//Date 객체 생성
//자바 스크립트의 내부 객체
var year = date.getFullYear()
var month = date.getMonth()+1
var day = date.getDate()
var hour = date.getHours()
var min = date.getMinutes()
var sec = date.getSeconds()
var format = year + "-" + month + "-" + day
format += " " + hour + ":" + min + ":" + sec + ""
console.log(format) //현재 날짜+시간 출력
</script>
현재 날짜와 시간 출력
Audio
<script>
var audio = new Audio()
var i=1
audio.src = "./audio/my_piano1.mp3"
//오디오 소스 지정
function next(){
if(i==3){
i=1
}else{
i++
}
audio.src = "./audio/my_piano" + i +".mp3"
start()
}
function pre(){
if(i>1){
i--
}else{
i=3
}
audio.src = "./audio/my_piano" + i +".mp3"
start()
}
function start(){
// alert(audio.duration) //오디오 길이 초단위로 출력
audio.play() //소스 재생, 내장객체 사용
alert("my_piano" + i +".mp3")
}
function pause(){
audio.pause() //일시정지
}
function stop(){
//정지하는 내부객체는 없으므로
//일시정시 후 시간을 0으로 만들어준다
audio.pause()
audio.currentTime = 0 //시간을 0으로 만들어줌
}
</script>
</head>
<body>
<button onclick="start()">시작</button>
<button onclick="pause()">일시정지</button>
<button onclick="stop()">중지</button>
<button onclick="next()">다음곡</button>
<button onclick="pre()">이전곡</button>
</body>
각 버튼을 누르면 지정된 함수가 작동한다
String 객체
<script>
var str1 = new String("Hello") //String 객체생성 정석
var str2 = "Hello" //String 객체생성 >> 약식으로도 가능
str1.concat(" World")
//concatenate 잇다
document.write(str1, "<br>") //Hello 그대로 출력
var result = str1.concat(" World")
document.write(result, "<br>") //새로운 변수에 저장 후 출력해야 됨
var index = str2.indexOf("e") //특정 문자의 인덱스값
document.write(index, "<br>") ///1
var index = str2.indexOf("llo") //해당 문자열이 시작하는 위치 출력
document.write(index, "<br>") ///2 >> 2 3 4 아님 주의, 시작하는 위치만 출력됨
var myCh = str2.charAt(1) //인덱스 번호에 해당하는 문자 출력
document.write(myCh, "<br>") ///e
document.write(result, "<br>") //Hello World
var editResult = result.replace("Hello", "Hi") //Hello를 Hi로 대체
document.write(editResult, "<br>") ///Hi World
var str3 = new String("Hello world my name")
var result = str3.split(" ") //해당 구분자(여기선 공백)로 문자열을 나눈다
document.write(result, "<br>") ///Hello,world,my,name >> result는 Array
document.write(result[3], "<br>") ///name
var str4 = " Hello " //공백 여러개여도 하나만 들어감
var start = "Hi"
var end = "world"
var result = start + str4 + end //공백이 함께 들어감
document.write(result, "<br>") ///Hi Hello world
var str5 = str4.trim() //양쪽 공백 제거
// str4.trimLeft(), str4.trimRight() //왼쪽/오른쪽 공백 제거
result = start + str5 + end
document.write(result, "<br>") ///HiHelloworld
</script>Number 객체
<script>
var num1 = new Number(3) //Number 객체 생성
var num2 = 3 //약식으로 생성 가능
// num2.toString() //String으로 변환
document.write(typeof(num1), "<br>") //object
document.write(typeof(num1.toString()), "<br>") //string
var num3 = 3.141592
var result = num3.toFixed(3) //반올림, 소수점 3번째 자리까지 표현
document.write(result, "<br>") //3.142
</script>라이브러리
moment.js
https://momentjs.com/
사이트에 접속 하면 현재 날짜, 시간 을 얻을 수 있는 라이브러리가 존재한다.
링크 연결
라이브러리 주소
https://momentjs.com/downloads/moment.js
를 직접 링크하여 사용할 수 있다.
라이브러리 서버의 상태나 인터넷 연결 상태에 영향을 받는 방식이다.
<script src="https://momentjs.com/downloads/moment.js"></script>
<!-- 외부의 라이브러리 주소를 가져오는 경우 -->
<!-- 인터넷/서버에 문제가 생기면 사용할 수 없다. -->
<script>
console.log(moment().format("YYYY-MM-DD hh:mm:ss"))
//시간은 소문자로
console.log(moment().format("YYYY-MMM-DD hh:mm:ss"))
//월이 영문약어(Jan등)으로 나옴
console.log(moment().format("YYYY-MMMM-DD hh:mm:ss"))
//월이 영문표기(January)로 나옴
//YYYY 대신 YY를 사용하면 2023 대신 23이 나옴
</script>js파일 연결
라이브러리를 다운받거나 복사한 다음, js파일로 만들어 연결할 수 있다.
서버나 인터넷의 상태에 영향을 받지 않는다.
링크 연결 보다는 js파일 연결이 안정성과 범용성이 우수하다.
<script src="./script/moment.js"></script>
<!-- 라이브러리를 js파일로 저장하고 연결하는 경우 -->
<!-- 인터넷/서버의 영향을 받지 않는다 -->
<script>
console.log(moment().format("YYYY-MM-DD hh:mm:ss"))
//시간은 소문자로
console.log(moment().format("YYYY-MMM-DD hh:mm:ss"))
//월이 영문약어(Jan등)으로 나옴
console.log(moment().format("YYYY-MMMM-DD hh:mm:ss"))
//월이 영문표기(January)로 나옴
//YYYY 대신 YY를 사용하면 2023 대신 23이 나옴
</script>JSON
<script>
//JSON
//JavaScript Object Notation
//Key-value 쌍
//파이썬의 딕셔너리, 자바의 해시맵과 같은 역할
var person = {name:"Kim", age:20, height:180.2}
document.write(person.name, "<br>") //key: name, value: "Kim"
document.write(person.age, "<br>") //key: age, value: 20
document.write(person.height, "<br>") //key: height, value: 180.2
//JSON Array
var personList = [
{name:"Kim", age:20, height: 180.2},
{name:"Lee", age:24, height: 167.5},
{name:"Park", age:21, height: 178.6}
]
//배열이기 때문에 push로 값 추가 가능
personList.push({name:"Choi", age:27, height: 160.8})
var inputName = prompt("name")
var inputAge = prompt("age")
inputAge = parseInt(inputAge)
var inputHeight = prompt("height")
inputHeight = parseFloat(inputHeight)
personList.push({name:inputName, age:inputAge, height:inputHeight})
console.log(personList) //2차 배열로 저장
for(var i=0; i<personList.length; i++){
document.write(personList[i].name, "<br>") //i번째 배열의 key의 value
document.write(personList[i].age, "<br>")
document.write(personList[i].height, "<br><br>")
}
</script>