티스토리 뷰

JavaScript

JavaScript 기초

carrot62 2020. 7. 27. 12:22

JavaScript란?

client 쪽에서, 즉 웹브라우저에서 동작하는 언어이다. HTML에서 CSS를 적용하기 위해 <style>태그 안에 내용을 정의했듯이 JavaScript에서는 화면의 동적 설정을을 <script> 태그 안에 정의한다. 

Events in JavaScript

Event란 마우스 또는 키보드를 통해 어떤 행위를 하는 것이다. 자바스크립트 언어로는 이런 행위에 따른 동작을 설정해 줄 수 있다.

  • onclick
  • onchange
  • onmouseover
  • onmouseout
  • onkeydown
  • onload

JavaScript 적용하는 방법 3가지(CSS와 동일)

  1. internal
  2. external
    • 서버에 있는 소스를 사용 할 경우: <script src="example.js"></script>
    • 외부 소싀의 url을 그대로 사용 할 경우: <script src="url"></script>
  3. inline

Data Display

  • innerHTML : HTML content를 바꾼다 
    • this.innerHTML: 다른 element를 id로 참조하지 않고 현재 element의 content를 바꿀 수 있게 해준다
  • src: 이미지 source를 바꾼다
  • style
    • 예) style.background-color, style.fontSize등...
    • HTML elements를 숨기려면 style.display= "none"
  • document.write()
  • window.alert() 또는 그냥 alert()
  • console.log()
    • javascript는 브라우저에서 f12 또는 오른쪽 마우스 클릭->검사 해서 디버깅 한다.
  • window.print() : 현재 페이지를 인쇄하는 설정으로 넘어간다
<!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>

JavaScript Function

"Event"가 일어날 때 호출해서 사용할 수 있는 함수이다.
호출할 element를 지정하는 방법:

  1. getElementById()
  2. getElementByTagName()
  3. getElementByClassName()
  4. getElementByName()
  5. getElementByTagNameNS()

함수 선언하는 방법:

    function  functionname(){
       ...
       ...
    }

<!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>	<!--event를 통해 함수를 호출한다-->

</body>
</html>

Javascript 변수

변수에 type(정수형, 실수형, 문자열 등...)이 없다. 선언할 때는 type에 관계없이 var를 이용해서 선언한다. JavaScript에서 변수 이름을 identifier라고 부른다.
Data type 중에서 object type도 있다
    예) var x ={firstName: "John", lastName: "Doe"};

<!DOCTYPE html>
<html>
<body>

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

<script>
var x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";  
</script>

</body>
</html>

JS 변수는 type에 영향을 받지 않기 때문에 문자열 두개를 합칠 때 다음과 같이 해도 된다

"John" + " " + "Doe"
<!--결과로 Jon Doe 가 출력된다-->
  • 변수에 값을 할당 해주지 않으면 그 변수의 value는 undefined 값을 가진다.
        변수를 출력해보면 undefined 문구가 나온다
    • 변수에 undefined 을 할당해주면 value와 type 모두 undefined 상태가 된다.
  • null: value가 없다는 것을 뜻한다, 하지만 datatype 자체는 object이다.
  • null과 undefined 은 값이 없다는 의미에서 value는 같으나 type이 다르다.
  • 같은 이름의 변수를 다시 선언하는 것이 가능하다.
        변수를 출력해보면 맨 마지막에 할당된 값이 출력된다.
  • 변수가 type에 대해서는 자유롭기 때문에 아래의 코드 처럼 연산 결과와 문자열을 합치는 것 또한 가능하다.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding 2 + 3 + "5":</p>

<p id="demo"></p>	<!--출력 결과: 55-->
<p id="demo2"></p>	<!--출려 결과: 5510-->

<script>
var x = 2 + 3 + "5";
var y= x + 10 ;		//x 뒤에 문자열 5를 더했기 때문에 변수 y에 10을 더해도 뒤에 덧붙여진 형태로 나온다
document.getElementById("demo").innerHTML = x;
document.getElementById("demo2").innerHTML = y;
</script>

</body>
</html>
  • 변수 이름은 영어 대소문자, $, 또는 _(underscore)으로 시작할 수 있다

JavaScript 연산자

  • ** : ~의 제곱
    • Math.pow() 함수와 같은 역할
          예) Math.pow(5, 2)  //결과: 25 
  • +, += : 숫자 연산 용도 외에도 문자열을 concatenate(뒤이어서 바로 붙일 때) 사용할 수 있다
  • 숫자 + 문자열 = 문자열
<!DOCTYPE html>
<html>
<body>

<h2>The += Operator</h2>

<p id="demo"></p>	<!--출력 결과: 100000-->

<script>
var x = 10;
x **= 5;	// x= 10^5
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>The += Operator</h2>

<p id="demo"></p>	<!--출력 결과: 100000-->

<script>
var x = 10;
x **= 5;	// x= 10^5
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

value 순서에 따른 다른 연산 결과:

<!--value 순서에 따른 다른 연산 결과:-->
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>	<!--출력 결과: 20Volvo-->
<p id="demo2"></p>	<!--출력 결과: Volvo164-->

<script>
var x = 16 + 4 + "Volvo";
var y= "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
document.getElementById("demo2").innerHTML = y;
</script>

</body>
</html>

JavaScript 비교 연산자

  • ===: equal value and type
  • !==: not equal value or type

JavaScript Type 연산자

  • typeof: 변수의 type을 return 해준다
        예) typeof x
<!DOCTYPE html>
<html>
<body>

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

<script>

document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof 123 + "<br>" + 
typeof "John Doe";
</script>
</body>
</html>

<!--출력 결과: 
string
number
string
-->
  • instanceof: returns true of an object is an instance of object type
        예) instanceof Array

그 외에 연산자

  • .  : Member  예) person.name
  • [ ] : Member  예) person["name"]
  • Bitwise Operators
    • ^ : XOR
    • <<: zero fill left shift
    • >>: signed right shift
    • >>>: zero fill right shift

JavaScript Types

JS type은 dynamic하기 때문에 하나의 변수가 여러 타입의 데이터를 가질 수 있다.

  • primitive data
    •  number
          소숫점도 표기 가능하다
          scientific notation으로도 표기할 수 있다
              예) var x= 123e-5    // 0.00123
    • string
    • boolean
      true/false
    • undefined
  • complex data
    • function
    • object: object, array, null
<!--complex data 선언 방법-->
<!DOCTYPE html>
<html>
<body>

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

<script>
document.getElementById("demo").innerHTML = 
typeof {name:'john', age:34} + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof null + "<br>" +
typeof function myFunc(){};
</script>

</body>
</html>

JavaScript Arrays

[ ] 괄호로 표기한다. index 0부터 시작한다.

형식:

var array_name = [item1, item2, ...];    
//또는
var cars = new Array("Saab", "Volvo", "BMW");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array indexes are zero-based, which means the first item is [0].</p>

<p id="demo"></p>	<!--출력 결과: Saab-->

<script>
var cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

JavaScript Objects

C언어에서 구조체처럼 여러 type의 변수를 하나로 묶는 것이다. 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

<script>
var person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>
  • name:value 형식으로 하나의 property를 정의한다
  • name:method : property로 함수를 정의하는 것
var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {	//property로 함수 정의
    return this.firstName + " " + this.lastName;
  }
};
  • Member 변수를 참조 하고 싶을 때는
    • "." 또는
    • [ ] 를 사용한다
objectName.propertyName
//또는
objectName.propertyName
  • new 라는 키워드로 변수를 선언 하면 변수의 type은 object로 지정된다.
var x = new String();        // Declares x as a String object
var y = new Number();        // Declares y as a Number object
var z = new Boolean();       // Declares z as a Boolean object

JavaScript Strings

문자열 함수:

  • length: 문자열의 길이를 알아내는 속성
        사용) 문자열 이름이 txt라고 했을 때 txt.length;
  • \n: 개행문자
  • indexOf("찾고자 하는 문자열", "시작위치"): 문자열이 처음 등장하는 index를 리턴해준다
    • 찾지 못했을 경우 -1을 리턴한다
          사용) txt.indexOf("example")
  • lastIndexOf()
  • search()
  • slice(start, end)
  • substring(start, end)
  • substr(start, length)
  • replace()
    • /i : 대소문자 관계 없이 바꾸기
          예시) /searchwword/i
    • /g : 모든 문자열 바꾸기
  • toUpperCase()
  • toLowerCase()
  • + 또는 concat()
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!");
  • trim()
  • charAt(position)
  • charCodeAt(position)
  • 인덱스 [ ]를 이용해서 문자열에 있는 하나의 character 에 접근할 수 있다

문자열 배열로 바꾸기

  • split()
    • seperator를 명시하지 않을 경우에는 index[0]에 전체 문자열을 가지고 있게 된다

 

var txt = "a,b,c,d,e";   // String
txt.split(",");          // Split on commas
txt.split(" ");          // Split on spaces
txt.split("|");          // Split on pipe
txt.split("");          // 문자열 전체를 배열로 교환

JavaScript Numbers

문자열과 숫자가 있을 경우 "+" 연산자는 숫자 사이에서는 더하기 연산자이고, 문자열이 있을 때는 concatenate하게 되니 중의해서 사용 하도록 하자.

  • NaN: not a legal number를 뜻한다
    • NaN의 type는 number 이다
  • isNan(): 값이 숫자인지 검사해주는 함수
  • Infinity (-Infinity)
    • Infinity의 type는 number 이다
  • toString(2//8/16/32/10) : 숫자의 진수를 설정
  • 숫자를 object로 만들게 되면(변수 선언 할때 new 사용) "=="연산자를 통해 비교할 수 없다
var x = new Number(500);             
var y = new Number(500);

// (x == y) is false because objects cannot be compared
  • toExponential()
  • toFixed(): 명시된 숫자까지 반올림해서 리턴한다
  • toPrecision(): 명시된 숫자만큼의 길이로 값을 리턴한다
  • valueOf()
  • 변수를 숫자로 변환하기
    • Number()
    • parseInt()
    • parseFloat()
  • 숫자 속성
    • MAX_VALUE
    • MIN_VALUE
    • POSITIVE_INFINITY
    • NEGATIVE_INFINITY
    • NaN

'JavaScript' 카테고리의 다른 글

JavaScript BOM  (0) 2020.07.29
JavaScript: Element의 동적 추가와 삭제  (0) 2020.07.29
JavaScript HTML DOM: Event listener  (1) 2020.07.28
JavaScript forms  (0) 2020.07.28
Javascript: function, events  (0) 2020.07.27