JS 01 - 자바스크립트 기초 (변수,prompt,getElementById,연산자, 조건문, 반복문, 백틱)

WEB/JavaScript

JS 01 - 자바스크립트 기초 (변수,prompt,getElementById,연산자, 조건문, 반복문, 백틱)

inderrom 2023. 1. 6. 02:27

innerHTML - 출력 내용 속에 html태그가 포함, html태그 실행
innerText - 일반 텍스트 문자로 출력, html 태그도 문자로 출력
document.write() - 로딩 시 웹 페이지에 데이터 출력. 테스트용
window.alert() - 별도의 대화상자를 띄워 데이터 출력.
console.log() - 브라우저 콘솔을 통해 데이터 출력. 디버깅용

내부 자바스크립트 - <head>, <body> 안에 배치 가능

외부 자바스크립트 - <head>, <body> 안에 배치 가능

변수

var : 함수 범위에서 유효하며 재선언과 재할당이 가능 (지역변수)
let : 블록 범위에서 유효하며 재선언은 불가, 재할당만 가능
const : 블록 범위에서 유효한 상수 선언 키워드로 재선언과 재할당 불가

변수 명명 규칙

식별자는 영문자, 언더스코어(_), 달러($)로 시작

첫 자는 숫자로 시작할 수 없고, 두번째 글자부터 가능

대소문자 구별하므로 'java', 'Java'는 다른 식별자

예약어(javascript에서 이미 사용중인 단어)는 사용할 수 없다

-break, default, final, for,new,null,try,this 등

의미 없는 변수명 사용하지 않기
카멜표기법으로 표기하기 (띄어쓰기대신 각 단어의 첫 문자를 대문자로 표기)

지역변수를 쓰는 경우 오류가 나기때문에 반환값을 이용한다.

 function sub (a, b){
      return a - b;
  }
  window.onload = function() {
      document.write(“sub=” + sub(10, 4));
  }

window.onload를 써주면 실행순서 상관 없이 먼저 실행된다.

연산자

문자열에서의 '+' 연산자는 문자열을 결합한다
숫자와 문자열을 '+' 연산자로 합하면 숫자를 문자로 변환하여 결합된 문자열을 반환한다.

<script>
    var str1 = 16 + 4 + "Hello ";
    var str2 = "Hello“+ 16 + 4;
    
    document.write(str1);
    document.write("<br>");
    document.write(str2);
</script>

위에 코드를 출력하면

str1 = 20Hello

str2 = Hello164

==> 덧셈 연산자는 왼쪽에서 오른쪽으로 결합

==> 문자형에 숫자형을 결합하면 문자형으로 취급

비교연산자

연산자	설명	예
==	값이 같으면 true	x == 1
===	값이 같고 유형도 같으면 true	X === 1
!=	값이 다르면 true	x != 2
!==	값이 다르거나 유형이 다르면 true	x !== 2
>	크면 true	x > 2
<	작으면 true	x < 2
>=	크거나 같으면 true	x >= 2
<=	작거나 같으면 true	x <= 2

논리연산자

연산자	사용 예	의미
&&	x && y	AND 연산, x와 y가 모두 참이면 참, 그렇지 않으면 거짓
\|\|	x \|\| y	OR 연산, x나 y중에서 하나만 참이면 참, 모두 거짓이면 거짓
!	!x	NOT 연산, x가 참이면 거짓, x가 거짓이면 참

Pormpt()

입력을 요청하는 대화 상자 소환 함수

<script>
    var result = prompt(“대화상자에 표시할 텍스트 (required)”, 
    				“기본 입력 텍스트 (optional)”);
</script>

	<script>
        var firstVal, secondVal, input;

        input = prompt(“첫번째 입력 값", "정수로 입력하세요");
        firstVal = parseInt(input);
        input = prompt("두번째 입력 값", "정수로 입력하세요");
        secondVal = parseInt(input);
        document.write(firstVal + secondVal + "<br>");
    </script>

getElementById()

지정된 id 속성을 가진 요소를 반환한다.
존재하지 않는 요소일 경우 null값을 반환한다.

다른 요소 접근 함수

getElementsByTagName()
getElementByClassName()
quetySelector()
querySelectorAll()

<script>
	function calc(){
			var fstVal = document.getElementById(“firstVal”).value;
			var secVal = document.getElementById(“secondVal”).value;
			var result;
			result = parseInt(fstVal) + parseInt(secVal);
			document.getElementById(“sum”).value = result;
	}
</script>
<body>
	첫번째 입력 값 : <input id=“firstVal”> <br>
	두번째 입력 값 : <input id=“secondVal”> <br>
	합계 : <input id=“sum”>
	<input type=“button” value=“계산” onclick=“calc();”>
</body>

document.getElementById(id)
document.querySelector(#id). // 둘중 하나를 쓰면 되는데 , querySelector를 쓰는 경우 id앞에 #을 붙힌다

함수를 정의하는 방법

함수 이름이 onclick="proc1()" 인 경우

function proc1(){}
proc1 = function(){}
proc1 = () => {} // 람다함수(화살표 함수)

조건문

if문

<script>
	const time = new Date().getHours();
	let greeting;

	if (time < 10) {		// 10시 이전이면
		    greeting = "Good Morning";
    } else if (time < 20) {	// 오후 8시 이전이면
	    greeting = "Good day";
    } else {			// 그렇지 않으면(오후 9시 이후이면) 
	    greeting = "Good evening";
    }

    alert(greeting);
</script>

switch문

<script>
	let text;

	switch (new Date().getDay()) {
		    case 6: 
			    text = “Today is Saturday";
			    break;
		    case 0: 
			    text = “Today is Sunday";
			    break;
		    default: 
			    text = “Looking forward to the Weekend";
    }

    alert(text);
</script>

반복문

while문

<body>
  <p id=“result”></p>
</body>

<script>
 let text = “”;
 let i = 0;
    while (i < 10) {
        text += “<br>The number is” + i;
        i++;
    }
    document.getElementById(“result”).innerHTML = text;
</script>

do while문 ( 조건을 확인하기 전 1회 실행 후 지정된 조건이 참일 때 반복)

<body>
  <p id=“result”></p>
</body>

<script>
let text = “”;
let i = 0;
    do {
        text += i + “<br>”;
        i++;
    }
   while (i < 5);
    document.getElementById(“result”).inneHTML = text;
</script>

for문

<body>
  <p id=“result”></p>
</body>

<script>
let text = “”;
   for (let i = 0; i < 5; i++) {
           text += “The number is ” + i + “<br>”;
	  }
	  document.getElementById(“result”).inneHTML = text;
</script>

중첩for문

style>
    table, td {border:1px solid black;}
</style>
<script>
    document.write("<h1>구구단표</h1>");
    document.write("<table>");
    for (var i = 1; i <= 9; i++) {  
        document.write("<tr>");
        document.write("<td>" + i + "</td>");
        for (var j = 2; j <= 9; j++) { 
            document.write("<td>" + i * j + "</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>

결과

for/int

- 해당 객체의 모든 열거 가능한 속성을 순회함

<script>
    let myCar = { make: "BMW", model: "X5", year: 2013 };
    let txt = "";
    for (let x in myCar) {
    	txt += myCar[x] + " ";
    }
    document.write(txt);
</script>

break

- 반복문을 벗어나기 위해 사용

<script>
    var msg = "";
    for (var i = 0; i < 10; i++) {
        if (i == 3) {
            break;
        }
        msg += i + "<br>";
    }
    document.write(msg);
</script>

continue

- 지정된 조건에 대해서 생략하고 다음 반복문을 이어서 진행

<script>
    var msg = "";
    for (var i = 0; i < 10; i++) {
        if (i == 3) {
            continue;
        }
        msg += i + "<br>";
    }
    document.write(msg);
</script>

백틱 ``을 이용한 템플릿 문자열

`` 안에서 변수와 일반 문자열을 만든다

변수와 일반 문자열 사이에 + 기호를 사용하지 않는다

변수는 ${변수}

`${a} + ${b} = ${res} <br>`