parisangsoo
JS 02/27 본문
자바스크립트는 HTML에서 <head>태그 안에 <script></script>태그 안에서 사용할 수 있다.
자바스크립트 : 함수,변수 등을 사용가능한 스크립트 언어
1. 자료형
var
//var : 중복된 변수명에서 오류를 발생하지 않아, 코드가 길어졌을때 다소 효율성이 떨어질 수 있다.
var name = "hong";
var name = "park";let
//let : 가장 많이 사용하는 자료형으로써 중복된 변수명을 허용하지 않는다.
let name = "hong"; // 정수,실수,문자열 모두 담을수 있다.
//let name = 10;const
//const : 자바의 final(상수) 역할을 하는 자료형
const a1 = "hi";
//a1 = "hello";
document.write(a1);
document.write();
document.write(name);
document.write("<hr>"); // 구분선 태그 "" , '' 두가지 모두 문장을 넣을수 있다. 구분하지 않음
document.write('"안녕"하세요<br>'); //''로 묶인 문장
document.write("'안녕'"); // ""로 묶인 문장자바에서 system.out.println과 비슷한 역할이지만 차이점이 있다.
2. 산술연산자
+,-,/,%,*
let a = 10;
let b = 3;
let result;
result = a + b;
document.write('result : ' + result + "<br>"); // + 를 이용한 문장 출력
result = a - b;
document.write('result : ',result,"<br>"); // ,를 이용한 문장 출력 (자바스크립트에서만 가능)
result = a/b;
document.write("result : ",result+"<br>");
document.write(result.toFixed(2),"<br>"); // toFixed()의 함수를 통해 소수점 2번째 자리까지 나타냄toFixed() 함수를 사용하여 소수점의 자릿수를 나타내고 싶을때 사용.
3. 비교연산자
let a = 10;
let b = 3;
let result;
result = a>b;
document.write("a > b : " , result); // let 변수는 모든 값을 가질수 있기 때문에 true 출력
result = 100;
document.write ("<br>" , result, "<br>") // let 변수의 값을 100으로 지정하여 100 출력
result = a <= b;
document.write('a <= b : ' + result); // let 변수는 다시 false 출력
result = a != b;
alert(); // 경고창을 출력하는 함수 () 안에 텍스트를 작성할 수 있다.4. 논리연산자
let lastName = prompt("당신의 성은?"); // prompt() 명령창을 통해 사용자에게 값을 입력받을 수 있다
let age = prompt("당신의 나이는?"); // prompt() 명령창을 통해 사용자에게 값을 입력받을 수 있다
let result = age >= 20 && age < 30 && lastName == "김"; //조건식을 통해 result는 true,false 값을 가진다.
if (result) {
document.write("합격입니다."); // result가 true 인 경우
}
else {
document.write("불합격 입니다."); // result가 false 인 경우
}prompt() 함수를 통해 사용자에게 값을 입력 받을 수 있으며 let 변수를 통해 문자열,정수,실수등 모든값을 저장 할수 있다.
4. 삼항연산자
let n1 = prompt("값1");
let n2 = prompt("값2");
// ? alert() : alert() // 경고창 표시를 통해도 결과를 출력할 수 있다는 것을 보여줌
n1 < n2 ? document.write("참") : document.write("거짓");
document.write("<hr>");
//prompt로 값을 받으면 문장으로 값이 넘어 오지만 // 기본적으로 정수도 문자로 인식하여 값이 들어옴
//if문 등에서 비교연산자와 사용할경우 알아서 정수형태로 인지
n1 = prompt("수1");
n2 = prompt("수2");
if(n1 >= 50 && n2 >= 50) {
document.write("합격");
}else {
document.write("불합격");
}5. switch 구문
let code = prompt("값");
switch(code) {
case "1": // prompt로 값을 받아 오기때문에 정수여도 문자열로 인식하여 ""를 사용
document.write("1을 입력 받으셨군요");
break;
case "2": // prompt로 값을 받아 오기때문에 정수여도 문자열로 인식하여 ""를 사용
document.write("2를 입력 받으셨군요");
break;
default :
document.write("1이나 2를 입력하세요");
break;
}6. for 구문
n1 = prompt("수1");
n2 = Number(n1); // Number() 함수를 이용하여 prompt로 받은 문자형 정수를 연산이 가능한 정수로 변환
for(let i = 1; i<10; i++) {
document.write(n2 ,"*", i, "= ",n2*i , "<br>"); // prompt로 사용자에게 값을 입력받아 구구단 만들기
}
// <for문을 활용한 태그 만들기>
for( var i = 6; i>=1; i--) { // h1~h6까지의 태그를 for문을 통해 만들기
document.write( '<h',i,'>' + "자바스크립트 h태그" + '</h',i,'>');
}
document.write("<ul>"); // for문을 이용한 ul 및 li 만들기
for(var i = 0; i<5; i++) {
document.write("<li>메뉴", i, "</li>");
}
document.write("</ul>");Number() 함수를 이용하여 문자형 정수를 실제 연산이 가능한 정수형 데이터로 변환 가능하게 해준다.
6. 다중 for문
for(let i = 2; i<10; i++ ) {
document.write("<h1>" + i + "</h1>");
for( let j = 1; j <10; j++) {
document.write( i + " * " ,j , " =" , i*j ,"<br>");
}
}7. 배열
let arr1 = [1,2.2,"홍길동",4,5]; // 배열의 index마다 같은 타입의 자료형을 넣을 필요가 없다.
// let형 배열이기 때문에 가능하다. 자바는 불가능
arr1[5] = 10; // 존재하지 않는 index에도 공간할당이 가능 (자바는 불가능) 다만 늘릴수는 있으나 줄일수는 없다.
arr1[10] = true; // 오류는 나지 않지만 6,7,8,9번 방 은 값이 존재 하지 않은 상태로 10번 index에 값이 추가
for (let i =0; i < arr1.length; i++ ){ // arr1.length를 통해 배열의 길이를 알 수 있다.
document.write( arr1[i] + " ");
}
document.write("<hr>");
//int [] arr2 = new int [3]; 자바의 배열 선언
let arr2 = new Array(3); // 스크립트에서의 배열 선언 , 배열 이름에 []를 추가하지 않아도 가능
for (let i = 0; i<arr2.length; i++ ) { // arr2 배열에 데이터를 추가
arr2[i] = (i+1) * 10;
document.write(arr2[i]," ")
}8. 2차원 배열
let arr3 = new Array(); // 배열의 크기를 지정하지 않고 선언
let first = [10,20]; // first라는 1차원 배열을 만들고 값을 초기화
let second = [30,40,50]; // second라는 1차원 배열을 만들고 값을 초기화
arr3[0] = first; // arr3의 0번째 인덱스에 first배열을 저장
arr3[1] = second; // arr3의 2번째 인덱스에 second 배열을 저장
// arr3는 2차원 배열이 만들어짐
for (let i = 0; i<arr3.length; i++) {
for (let j=0; j<arr3[i].length; j++){
document.write(arr3[i][j]+" ");
}
document.write("<br>");
}자바스크립트에서 2차원 배열은 잘 사용하지 않는다.
Comments