romworld

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>`

 

 

 

Comments