[21.09.02] JavaScript

yed·2021년 9월 2일
web
0

자바스크립트 디스플레이

  • innerHTML : HTML 요소에 작성한다
  • document.write(): HTML 문서에 작성한다
  • window.alert(): 경고박스에 작성한다
  • console.log() : 브라우저 콘솔창에 작성한다

document.write() 호출 시점 문제

HTML 시점 문제로 HTML 문서의 로딩이 끝난 후 document.write()를 호출하면 문서전체의 내용을 덮어쓰게 됩니다.

HTML파일을 읽으면 실행하자마자 <html>안의 모든 코드를 다 읽어서 문서에 보여주는데 script 속 함수들은 액션을 하지않는 이상 호출되지 않아요.

  <button onclick="test1()">클릭</button>
  
  <script type="text/javascript">
  	function test1(){
  	    document.write('<p>test1() 호출</p>');
  	}//end test1()

test1()의 document.write는 버튼을 클릭하고 나서 로딩되기 때문에 현재 표시된 문서에 추가되는 게 아니라 기존 document 전체를 덮어서 제공됩니다.

innerHTML

  <div id="output"></div>
  <button onclick="test2()">click</button>
  
  <script type="text/javascript">
  function test2() {
     var output=document.getElementById('output');
     output.innerHTML='test2() 출력 완료!';
  }

div 요소 안에서 test2()가 실행됩니다.

output.innerHTML = '안녕'
output.innerHTML = '하세요'

=으로 내용을 저장하면 맨 마지막 내용만 출력됩니다.

연속된 내용을 출력하려면
output.innerHTML += '하세요'
+=로 컨텐츠를 이어줘야해요!

alert()

function showAlert() {
    alert((1+2)+'입니다.');
}

다이얼로그로 content를 띄울 수 있습니다.

confirm()

function showConfirm() {
    var result=confirm('삭제하겠습니까?');	
    document.getElementById('output').innerHTML=result;
}

다이얼로그에서 YES or NO를 선택해서 선택결과를 리턴합니다. 확인을 누르면 true, 취소를 누르면 false를 리턴해요

prompt()

function showPrompt() {
   var result=prompt('이름 입력','이름');
   document.getElementById('output').innerHTML=result;
}

데이터를 입력할 수 있는 다이얼로그를 띄우고 확인을 누르면 입력한 데이터를 리턴합니다. 이름은 기본값이에요~

변수 초기화 방법

  • var 변수이름=초기값;
  • var 변수이름; 변수이름=값;

자바스크립트는 기존에 선언된 변수 이름과 동일한 새로운 변수를 선언해도 에러가 발생하지 않아요

자바스크립트의 변수타입

  • 숫자(number)타입 : 정수(-1,0,1,2,3,...), 상수(3.14)
  • 문자열(string) 타입 : '문자열', "문자열"
  • 논리형(boolean) 타입 : true, false
  • 객체(object) 타입 : 자바 클래스의 인스턴스(객체)
  • null 타입

자바스크립트는 타입이 var로 통합되어서 var x=123;으로 x는 지금 숫자타입 변수지만 x='안녕';처럼 문자를 저장하게되면 문자타입으로 자동형변환됩니다.

비교연산자

자바스크립트의 비교연산자에는 값만 비교하거나 값과 타입을 비교하거나 두가지 케이스가 있어요

==, !=

var age ='16'; //문자열
if(age==16){
    output.innerHTML+='== 연산자 결과는 참<br>';
}else{
    output.innerHTML+='== 연산자 결과는 거짓<br>';
}

age는 문자열이지만 값만 비교하기 때문에 자동형변환으로 정수16==정수16이 비교됩니다.

===, !==

if(age===16){ 
   output.innerHTML+='=== 연산자 결과는 참<br>';
}else{
   output.innerHTML+='=== 연산자 결과는 거짓<br>';
}

age는 문자열 16이기때문에 ===는 age의 타입까지 비교해서 결과는 거짓이 나와요

switch-case문

자바스크립트의 조건문 중 if문은 자바와 문법이 같지만 switch-case문은 자바와 조금 달라요. 자바는 실수타입을 switch-case 구문에서 사용할 수 없었는데요.

자바스크립트는 숫자타입을 정수/실수로 구분하지않고 number로 묶기 때문에 실수 타입도 switch-case 구문에서 사용할 수 있습니다.

    var x=1.1;
    switch (x) {
      case 1.0:
          output.innerHTML+='1.0<br>';
          break;
      case 1.1:
          output.innerHTML+='1.1<br>';
          break;
      default:
          break;
	}

switch-case 구문은 자동형변환을 하지않고 비교하기 때문에 문자열 1과 숫자 1을 비교하면 틀리다고 나옵니다! ===연산자로 비교하는것과 같아요

전역변수와 지역변수

  • 전역변수(global variable) : <script> 태그 안에서 선언된 변수로 선언된 위치와 상관없이 변수 선언부분을 script의 첫부분으로 이동합니다.

  • 지역변수(local variable) : 함수(function) 내부에서 선언된 변수

전역변수의 사용

var output=document.getElementById('output');
output.innerHTML+='i='+i+'<br>';
var i=1;

출력은 i=undefined가 나옵니다.
지역변수들은 실행코드보다 먼저 전부 만들어지기 때문에 i의 존재를 i의 선언 위치보다 위에서도 알고있어요. 변수 i의 존재는 알지만 i=1값을 넣는 초기화는 출력보다 아래에 있어서 undefined가 출력되는거예요

for문

자바와 문법은 동일합니다.
다만 for (var x = 1; x <=6; x++)에서 생성한 변수 x는 자바에서는 for문에서만 사용할수있는 지역변수였지만 자바스크립트에서는 전역변수로 for문 밖에서도 사용할 수 있어요

function

자바스크립트에서 함수 작성 방법

function 함수이름(매개변수1, 매개변수2,...){}

함수의 호출

함수이름(매개변수1, 매개변수2,...)

함수의 정의부분은 script의 상단으로 이동하기에 함수를 정의하기전에 호출이 가능해요.

자바스크립트 함수의 매개변수 규칙

  1. 자바스크립트 함수는 매개변수의 타입을 명시하지않는다
  2. 전달받는 매개변수의 타입과 개수를 확인하지 않는다

그래서 함수 overloading이 불가능하다.
같은 이름으로 함수를 정의하면 나중에 정의한 함수가 이전 함수를 덮어씁니다.

function add(x,y){ //함수정의
    console.log('x:'+x+',y:'+y);
	return x+y;
}

이런 함수의 경우

add(1,2)
add('hello','javaScript')

둘다 정상적으로 실행됩니다. 같은 함수가 숫자가 입력되면 덧셈함수, 문자열이 입력되면 문자열 연결함수가 되는거죠

value 속성

input태그에서 입력받은 데이터를 script에서 받으려면 value속성을 이용합니다.
document.getElementById('firstNum').value
그런데 value는 문자열로 값을 가져오게 됩니다. input의 type을 number로 해도 소용없음.

그래서 +하려고 할때 덧셈이 아니라 문자열 연결이 됩니다.

이럴때 parseInt()를 사용하거나 문자열을 숫자로 인식하게끔 value*1해주면 숫자로 이용이 가능합니다.

그리고 시점문제도 체크해주어야합니다.
input태그의 입력된 값을 가져오기 위해선 함수가 실행되는 시점의 value를 가져와야해요.
var n=document.getElementById('num').value <로 했을땐 input태그로 입력된 값을 가져오지 못해요!
변수는 페이지가 로딩되면서 미리 셋팅되는데 그때는 input 태그에 아무런 값도 입력되어있지않습니다.
그래서 변수 선언을 먼저 하고 input 후 함수를 호출해서 함수에서 value값을 사용해야합니다.

isNaN()

NaN(Not a Number)는 숫자가 아니다라는 뜻입니다. 연산된 결과가 나와야하는데 매개변수의 오류로 계산실패가 일어날 경우 출력되는 값입니다. 

function add(x,y) {
    return x+y;
}//end add()
    
add(100); //error

그때 isNaN(a)로 a가 숫자가 아니면 true, 숫자가 아니면 false를 리턴하는 함수를 사용해서 값을 확인한 뒤에 출력할 수 있어요

function add2(x,y) {
    if (isNaN(x)||isNaN(y)) {
        return '숫자가 아니므로 덧셈불가능';
    }
    return x+y;
}

default parameter

function sub(x,y=10) {
    if(isNaN(x)){
        return 'x는 반드시 숫자를 입력해야합니다.';
    }
    return x-y;
}

함수 정의 시 매개변수에 기본값을 설정할 수 있어요.
sub(100);로 함수를 호출한다면 x에는 100을 넘기고 y에는 넘기는 값이 없는 경우 기본값으로 설정한 10이 y에 들어가게됩니다.

그러나 만약 function sub(x=10,y){}로 함수를 정의한다면 sub(100);으로 호출할 경우 y값은 undefined가 되어버리니 주의

함수를 호출할때 전달된 매개변수는 정의한 함수의 순서대로 값을 복사하기 때문에 정의할때 기본 파라미터가 필요하다면 다른 매개변수들을 먼저 선언하고 기본 파라미터들을 나중에 선언하는게 좋아요

profile
yed
6개월 국비과정 기록하기
이전 포스트

[21.09.01] CSS

다음 포스트

[21.09.03] JavaScript#2

0개의 댓글