JavaScript(2)

1. 기본 타입

var

• 다른 언어들은 int, String, char 등 각 형식에 맞춰 타입이 정해져 있는 반면에 JavaScript는 모든 타입이 var하나로 통일 된다.

숫자

var firstNum = 10;     // 소수점을 사용하지 않은 표현
var secondNum = 10.00; // 소수점을 사용한 표현
var thirdNum = 10e6;   // 10000000
var fourthNum = 10e-6; // 0.00001

문자
-문자의 경우 작은따옴표('')와 큰따옴표("")를 구분하지는 않지만 꼭 시작과 끝은 같은 따옴표여야 한다.

var firstStr = "이것도 문자열입니다.";      // 큰따옴표를 사용한 문자열
var secondStr = '이것도 문자열입니다.';     // 작은따옴표를 사용한 문자열

• 이처럼 타입이 같기 때문에 숫자와 문자를 합칠수도 있다.

var num = 10;
var str = "JavaScript";
document.getElementById("result").innerHTML = (num + str); // 10JavaScript

typeof 연산자

• 피연산자의 타입을 반환하는 피연산자가 단 하나뿐인 연산자

typeof 10;        // number 출력
typeof "문자열";  // string 출력
typeof true;      // boolean 출력
typeof undefined; // undefined 출력
typeof null;      // object 출력

2. 타입 변환

• 자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다.

타입 변환

var num = 20; // Number 타입의 20
num = "이십"; // String 타입의 "이십"
var num;      // 한 변수에 여러 번 대입할 수는 있지만, 변수의 재선언은 불가능

묵시적 타입 변환

• 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다.

10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
"3" * "5";     // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.

3. 주요 용어들

push( )

• 배열안에 값을 대입할때 사용

var lotto = [1,2,3,4,5];
var lotto2 = [];
lotto2.push(1);		// push를 사용하여 배열안에 값 넣음(순서대로 값 쌓임)

indexOf()

• 입력받은 값의 유무를 판단(Of 대문자로 시작하는거 구분)

var lotto = [1,2,3];
var str = "abc";
lotto.indexOf(0);		// -1  찾는 값이 없다면 -1 반환
lotto.indexOf(1);		// 0
str.indexOf("bc");		// 2

sort( )

• 배열 값 정렬

var lotto = [1,2,3,33,22,11];
lotto.sort((a,b)=>a-b);		// 오름차순
lotto.sort((a,b)=>b-a);		// 내림차순
document.write(lotto);

getElementById(Id)

• 특정 Id를 가진 태그를 선택할 수 있다.

    <textarea class="form-control" rows="3" id="jasoseol">저는 인성 문제가 없습니다.</textarea>
    <script>
        var content = document.getElementById('jasoseol').value;	// content id를 가진 태그의 값을 저장함
        document.write(content)		// "저는 인성 문제가 없습니다" 출력 
    </script>

value / innerHTML

• value : 해당 id를 가진 태그값 가져옴
• innerHTML : 해당 id를 가진 태그값을 수정할 수 있음

    <textarea class="form-control" rows="3" id="jasoseol">저는 인성 문제가 없습니다.</textarea>
    <span id="count">(0/200)</span>
    <script>
        var content = document.getElementById('jasoseol').value;	// "저는 인성 문제가 없습니다" 출력
        document.getElementById('count').innerHTML = '(' + content.length + '/200)';	// (0/2000의 값을 변경함
    </script>

function 함수이름(){}

• 중복사용하는 코드는 함수를 사용하여 코드 재사용성을 높임

    <script>
        function counter() {
            var content = document.getElementById('jasoseol').value;
            document.getElementById('count').innerHTML = '(' + content.length + '/200)';
        };
        counter();
    </script>

onkeydown

• 이벤트(사용자가 무언가를 했을때 동작함)로 사용자가 글자를 입력할때 동작함

    <textarea onkeydown='counter();' class="form-control" rows="3" id="jasoseol">저는 인성 
    문제가 없습니다.</textarea>	// counter() 함수를 호출하여 사용자가 키보드 입력할때마다 동작함
    <span id="count">(0/200)</span>
    <script>
        function counter() {
            var content = document.getElementById('jasoseol').value;
            document.getElementById('count').innerHTML = '(' + content.length + '/200)';
        }
        counter();
    </script>

substring()

• 설정한 값까지만 입력받음 그 이상의 입력값은 잘라버림

if (content.length > 200) {			// 크기가 200을 초과하면
   content = content.substring(0,200);		// 0~200까지의 값만 놔두고 그 이상은 짤라버림
}