[필기정리] Day47 - JavaScript, function, typeof 등

Web/javascript

2020. 8. 18. 11:49

# JavaScript

- 자바스크립트는 객체(Object) 기반 언어라는 특징을 가지고 있다.

- HTML : HTML이 웹 페이지의 내용을 작성하는 것이라면, 

            JavaScript는 웹 페이지를 동적으로 구현하는 것이다.

- CSS : 웹페이지의 레이아웃 및 디자인을 지정하는 것이다.

- Java : 이름만 비슷할 뿐 전혀 다른 언어이다.

 

# 용어 설명

- document : 웹 페이지 자체, 브라우저 
- getElementById("demo") : id명이 demo인 객체의 주소를 가지고 온다.  

- onclick() : 자바스크립트 소스 코드, 클릭 시 해당 자바스크립트 실행한다. 

 

# 출력 종류 

- innerHTML : HTML의 컨텐츠, 즉 내용에 접근할 수 있는 변수 

                   따라서 웹페이지에서 값을 출력해서 보여줄 수 있는 요소인

                   div, p 등의 내용에 접근을 할 수 있고 화면에 표시를 할 수도 있다.

- document write : 테스트 시만 사용(실제 html 구성 시 사용하지 않음)

 

ex) p 태그 출력 예시

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

 

ex) 이미지 변경 예시

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
                                                         ㄴ 해당 이미지로 바꿈
</body>
</html>

 

ex) 글씨 크기 변경 예시 - style(css파일)의 fontsize를 바꾸는 문제

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

 

ex) html 숨기는 예시 : display 속성을 none으로 바꿔 안보이게 하는 것

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>

↕

ex) html 보이게 하는 예시 - display 속성을 block으로 바꿔 보이게 하는 것

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

 

# script 태그

ex) script 태그 예시

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

 

-  <head> 사이 넣는 경우 자바스크립트가 완벽히 로드 되지 않으면 속도가 느리다는 단점이 있다.

   따라서 최근에는 <body> 태그에 넣는 추세이다.

 

ex) head에 들어간 예시

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>
                                    ㄴ 함수 호출
</body>
</html>

 

ex) body에 들어간 예시 - 속도의 이점이 있음

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

 

- function : 자바스크립트의 함수

               자바의 method와 동일한 역할을 한다.

function function명() { }

 

- 변수 선언 : 변수 앞에 var만 붙여줄 것

var i= 1;

 자바스크립트는 변수 선언 시에는 데이터타입을 지정하지 않고, 동적으로 정해진다.

 숫자 입력 시 숫자가 되고, 문자를 넣으면 문자가 된다.

 객체 주소값을 저장할 때도 일반 변수에 저장 가능하다.

 (↔ 자바는 int, char 등 변수 입력 시 데이터 타입을 지정하나 자바스크립트는 따로 지정하지 않는다!)

 

ex) 자바스크립트 파일을 따로 저장하는 방법

<script src="myScript.js"></script> // 확장자 : .js

따로 만드는 경우 script 태그를 파일 내 따로 넣지 않는다.

ㄴ ex) css의 style 태그

 

Q1. 구구단을 출력하시오.

A. 내가 생각한 답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    var i=2;
    var j=1;
    for(i=2;i<=9;i++)
    {   
        for(j=1;j<=9;j++)
        {
            document.write(i+"*"+j+"="+i*j+"<br>");
        } 
        document.write("<br>");   
    }
</script>
</body>
</html>

A. function을 사용한 답

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function timesTable() {
            var i = 2, j = 1;
            for (i = 2; i <= 9; i++) {
                for (j = 1; j <= 9; j++) {
                    document.write(i + "*" + j + "=" + i * j + "<br>");
                }
                document.write("<br>");
            }
        }

        timesTable();
    </script>
</body>

</html>

 

Q2. JavaScript를 이용하여 화면에 Hello JavaScript라고 출력하자.

A. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	    <p id="demo">Hello JavaScript</p>
<script>
    document.getElementById("demo").innerHTML="Hello JavaScript!";
</script>
</body>
</html>

 

Q3. JavaScript를 이용하여 버튼을 클릭하면
     "This is a demonstration." 이라는 문자열을 "Hello JavaScript"라는 문자열로 바꾸시오.

A. 답

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>

A. 내가 생각한 답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo">This is a demonstration.</p>

    <button type="button" onclick='document.getElementById("demo").innerHTML="Hello JavaScript!"'>Click Me!</button>
</body>
</html>

 

Q4. 버튼을 클릭하면 
     "JavaScript can change the style of an HTML element." 라는 

     문자열의 폰트 사이즈를 25px, 글자 색상을 red, 배경색을 노란색으로 바꿔보자.

A. 해답

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "red";
  document.getElementById("demo").style.backgroundColor = "yellow";        
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

A. 내가 생각한 답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo">JavaScript can change the style of an HTML element.</p>

    <button type="button" 
    onclick='document.getElementById("demo").style.fontSize="25px";
    document.getElementById("demo").style.color="red";
    document.getElementById("demo").style.backgroundColor="yellow"'>Click Me!</button>
</body>
</html>

 

Q5. turn_off.gif와 turn_on.gif 이미지를 이용하여

     Light On이라는 버튼을 클릭하면 turn_on.gif 이미지가 표시되도록 하고,

     Light Off라는 버튼을 클릭하면 turn_off.gif 이미지가 표시되도록 하자.

A. 해답

<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "turn_off.gif"
  } else {
    pic = "turn_on.gif"
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="turn_off.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

</body>
</html>

A. 내가 생각한 답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick='document.getElementById("myImage").src="turn_on.gif"'>Light On</button>
    <img id="myImage" src="turn_off.gif" style="width: 100px">
    <button onclick='document.getElementById("myImage").src="turn_off.gif"'>Light Off</button>
</body>
</html>

turn_off.gif

 

turn_on.gif

ex) document.write 예시

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

 

- 로드 완료된 상태의 경우 document.write는 기존의 것을 모두 지우고 11을 출력하기 때문에

  inner html을 사용하는 것이 좋다.

ex) 

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

 

# 함수 종류

- window.alert() : alert 창을 띄우는 것

                       window는 전역객체이므로 생략이 가능하다.

                       ex) 아이디 중복체크, 적절치 않은 값 입력한 경우

 

- console.log() : 콘솔창에 해당 결과가 출력된다.

                     chrome 내 개발자 도구에서 콘솔 내용을 확인할 수 있다.

                     ex) 디버깅

 

- window.print() : 프린트 함수 호출한다.

                      실제 인쇄 창이 뜨게 한다.

 

- 자바는 " "와 ' '가 차이가 있지만 자바스크립트에서는 동일한 의미로 사용할 수 있다.

 

- 주석도 한 줄 주석(//)과 여러 줄 주석(/* ~ */)로 자바와 동일하다.

 

- 식별자 : $와 _ 사용, 대소문자를 다르게 인식하는 것

             카멜 케이스 규칙 적용되는 점과 변수명에 숫자로 되지 못하는 점도 동일하다.

 

- 값을 할당하지 않으면 기본값으로 undefined을 가진다.

 

- ** (= 자바의 Math.pow(x,y)) : 제곱

                                        Java와 다르게 있는 연산자 이므로 알아 두기

 

- 데이터 타입 ( JavaScript // Java ) 

var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object 자바로 봤을 땐 클래스와 형태 유사

var x;           // Now x is undefined
x = 5;           // Now x is a Number
x = "John";      // Now x is a String

 

ex) 소수점 여부

var x1 = 34.00;     // Written with decimals
var x2 = 34;        // Written without decimals

 

ex) e표기법

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

 

- 자바 스크립트는 배열 내 서로 다른 종류의 데이터 타입의 값을 넣을 수 있다.

  인덱스는 0부터 시작한다.

 

- typeof는 해당 자료형을 반환한다.

ex) typeof 연산자 예시

typeof ""             // Returns "string"
typeof "John"         // Returns "string"
typeof "John Doe"     // Returns "string"

typeof 0              // Returns "number"
typeof 314            // Returns "number"
typeof 3.14           // Returns "number"
typeof (3)            // Returns "number"
typeof (3 + 4)        // Returns "number"

// undefined : 자료형이 없는 것

 

- null → 자료형을 object로 반환한다.

ex)

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Objects can be emptied by setting the value to <b>null</b>.</p>

<p id="demo"></p>

<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>

</body>
</html>

 

# ==와 ===의 차이

ⓐ == : 값만 비교

ⓑ === : 값과 타입까지 비교

ex) 

typeof undefined           // undefined
typeof null                // object

null === undefined         // false
null == undefined          // true

 

ex)

typeof "John"              // Returns "string"
typeof 3.14                // Returns "number"
typeof true                // Returns "boolean"
typeof false               // Returns "boolean"
typeof x                   // Returns "undefined" (if x has no value)

typeof {name:'John', age:34} // Returns "object"
typeof [1,2,3,4]             // Returns "object" (not "array", see note below)
typeof null                  // Returns "object"
typeof function myFunc(){}   // Returns "function"

 

# function : 함수

ex) 

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

                                                                     

ex) function return 예시

var x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

 

- 지역변수 : 함수 안에서 변수를 선언했으면 함수 안에서만 사용 가능하다.

ex)

// code here can NOT use carName

function myFunction() {
  var carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

 

Q6. 다음을 중첩 for문을 이용해 출력해 보세요.
     5행 5열 표를 만들고, 데이터가 1부터 25까지 출력되도록 작성하세요.

A.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo"></div>
    <script>
    var table = "<table>"
    
    var num = 1;
    for(var i=0;i<5;i++)
    {
        table+="<tr>";
        for(var j=0;j<5;j++)
        {
            table+="<td>"+num++ +"</td>";
        }
        table+="</tr>";
    }
    table+="</table>";
    document.getElementById("demo").innerHTML=table;
</script>
</body>
</html>

 

# date 

ex)

var d = new Date();

// Tip : new - 객체 생성

 

- 자바스크립트 날짜 및 시간 범위

날짜 단위

 값의 범위

연도(year)

 1900년(00) ~ 1999년(99)
연에서 2자리만 입력 시 1900년대로 표시된다.

월(month) 

 1월(0) ~ 12월(11) 

일(day)

 1일(1) ~ 31일(31)

 시(hours)

 0시(0) ~ 23시(23)

분(minutes) 

 0분(0) ~ 59분(59)
초(seconds) 0초(0) ~ 59초(59)

 

- Date 객체 기본 순서

var d = new Date(2018, 11, 24, 10, 33, 30, 0);

new Date( year, month, day, hour, minute, second, millisecond );

              연, 월, 일, 시간, 분, 초, 밀리초 순이다.

 

// Tip : 적어도 연, 월까지는 넣어줘야 한다.

 

ex) 밀리초를 이용해 다른 날짜를 출력하는 방법

var d = new Date(100000000000); // 이 시간 만큼 더 해서 출력 (밀리초)
var d = new Date(-100000000000); // 이 시간 만큼 빼서 출력

 

- d =d.toString();

  참조변수를 넘기면 toString이라는 메소드가 자동적으로 호출된다.

 

- date.getter()의 종류 

메소드명 설명 특징 값의 범위
getFullYear() 현재 연도를 4비트의 숫자 반환   YYYY
getMonth() 현재 월에 해당하는 숫자 반환 1월은 0, 12월은
11을 리턴하기 때문에
+1하여 표현		 0 ~ 11
getDate() 현재 날짜에 해당하는 숫자 반환   1 ~ 31
getHours() 현재 시간에 해당하는 숫자 반환   0 ~ 23
getMinutes() 현재 분에 해당하는 숫자 반환   0 ~ 59
getSeconds() 현재 초에 해당하는 숫자 반환   0 ~ 59
getMilliseconds() 현재 시각의 밀리초에 해당하는 숫자 반환   0 ~ 999
getTime() 1970년 1월 1일 0시 0분 0초부터
현재까지의 시간을
밀리초(millisecond) 단위로 환산한 값을 숫자 반환		 1970년 1월 1일부터
밀리초로 출력		 -
getDay() 현재 요일에 해당하는 숫자 반환 0이 일요일을 의미 0 ~ 6
Date.now() 1970년 1월 1일 0시 0분 0초부터
현재까지의 시간을
밀리초(millisecond) 단위의 정수로 반환		   -

 

- date.setter()의 종류 

메소드명 설명 특징 값의 범위
setDate() 현지 시각으로 특정 일자 설정   1 ~ 31
setFullYear() 현지 시각으로 특정 연도 설정 연도뿐만 아니라
월, 일도 설정 가능		 YYYY, MM, DD
setHours() 현지 시각으로 특정 시간 설정   0 ~ 23
setMilliseconds() 현지 시각으로 특정 밀리초 설정   0 ~ 999
setMinutes() 현지 시각으로 특정 분 설정   0 ~ 59
setMonth() 현지 시각으로 특정 월 설정   0 ~ 11
setSeconds() 현지 시각으로 특정 초 설정   0 ~ 59
setTime() 1970년 1월 1일 0시 0분 0초부터
밀리초(millisecond) 단위로 표현되는
특정 시간을 설정함.		   -

 

 

728x90
저작자표시

'Web > javascript' 카테고리의 다른 글

[필기정리]Day51-1 - 자바스크립트의 역사, use strict 등  (0) 2020.09.03
[필기정리] Day50-2 - 자바스크립트 예시 및 문제  (0) 2020.09.03
[필기정리] Day50-1 - array sort, 유효성체크  (0) 2020.08.31
[실습문제] JavaScript로 달력 만들기  (0) 2020.08.19
[필기정리] Day48 - 단계별 달력 만들기 문제 등  (0) 2020.08.19

티스토리툴바