Javascript 문법

JS 코드를 HTML에서 어떻게 사용?

외부 JS 파일 HTML에 넣기 참조. (이전 게시글 https://mitdog.tistory.com/22 )

document.write()

이건 짚고 넘어가겠다.
그냥 document.write하면 어디에 write를 하느냐,
그냥 body에다가 한다.

그런데 주의할 점, onclick으로 함수 호출 형식과
그냥 document.write가 섞이면?

<script>
    document.write("Hello JS <br />");
    document.write("new beginning <br />");
    function func() {
        document.write("rewrite page");
    }
</script>
<button type="button" onclick="func();">click</button>

처음엔
Hello JS
new beginning
이 웹 페이지에 보이지만,
버튼을 누르면 func 안의 내용만 남는다.
rewrite page
처럼 말이다.

주석(Annotation)

//
/* */

둘 다 된다.

변수(Variable)

var x;
let x;
const x;

3가지 방식이 있다.
요즘은 let을 권장하는 추세이다.
이유는 3가지다.

Var vs Let

참고: https://opentogether.tistory.com/107

• 중복 선언 문제
  var test = "어"
  var test = "어 또 선언해"
  => var은 중복 선언이 가능했었다. 이는 많은 버그를 야기했다. let은 중복 선언을 막는다.
• 호이스팅 문제
  console.log(x)
  var x = "응 나중에 선언해"
  => 브라우저가 실행 전에 전체 코드를 한번 스캔하기 때문에 선언을 나중에 해도 되었다.
  그러나 이 또한 버그의 요인이 될 수 있었다. let은 선 선언 후 사용 원칙을 지킨다.
• 변수 스코프(전역 지역) 문제
  var은 한번 선언하면 전역 변수가 되어버린다.
  let은 다른 C 스타일 언어처럼 블락(if문, for문 안쪽)에서 사용한건 블락에서만.

자료형(Data Type)

• 기본 자료형(Primitive values)
  • 변경 불가능한(immutable) 상수
  • 수치형(Number; 정수, 실수, 다 포함함)
  • 문자형(String)
  • 부울형(Boolean)
  • 특수 값 : null / undefined (둘이 다른 거임 ㅇㅇ)
• 객체형(Object)
  • Math, Date, Array ... 자바 general 객체들 같이 이미 다 있는거
  • 사용자가 정의한 객체

=> 같은 인터프리터 언어인 파이썬 마냥 변수가 이거했다 저거했다 ㄱㄴ
s = 100;
이었다가도
s = "홍길동";
가능 하다는 말임 ㅇㅇ

Number 자료형 속성(Property;프로퍼티), 메서드

보통 속성과 메서드는, 객체(Object)에서 사용되는 말이다.
자바만 해도, 자바의 객체(Class)는 속성과 메서드가 구성요소이다.
그 래 서
primitive value는 원래 속성과 메서드란 개념이 없다.
그냥 그 자체로 값인 건데..

JS는 primitive value를 object처럼 취급하는게 된다.
그냥 일반 변순데, 객체처럼 쓸 수 있다는 것이다.
예를 들어
var x = 1; 을 객체마냥 점(=마침표(.)) 오퍼레이션이 가능하다
=> x.tostring;

그래서 굳이
var y = new Number(1); 이러지 말라는 거다. 알아서 되니깐.

Number의 메서드:

toString() : 문자열로 반환
toExponential() : 지수 표기법으로 표현된 문자열로 반환 (ex. 4.312-e15)
toFixed() : 명시된 소숫점 몇 째 자리까지 표현된 문자열로 반환
toPrecision() : 명시된 숫자 만큼의 길이로 표현된 문자열로 반환
valueOf() : 숫자로 반환

• Global Method(걍 감싸서 쓰는거 위에 것들처럼 .toString 이런식으로 점 안찍음)
  Number()
  parseFloat()
  parseInt()

문자를 Number(문자), parseInt(문자) 등으로 숫자로 바꾸어 잘 쓰자!

String

문자열 상수
파이썬과 비슷하다.

• 변경 불가능(Immutable)
• 접근은 가능
• Escape Sequence 사용 가능

Property:

• length : 문자열.length = 문자열 길이

Methods:

• toUpperCase(), toLowerCase() : 대소문자 바꾸기
• concat() : 문자열 이어붙이기
• charAt(), charCodeAt() : 문자 추출
• indexOf(), lastIndexOf(), search() : 문자열 내 문자열 검색
• slice(), substring(), substr() : 문자열 부분 추출
• replace() : 새로운 문자열 가리키게(문자열 교체, 참조가 바뀌는 느낌)
• split() : 구분자를 기준으로 나누고 그걸 배열로 반환

파이썬처럼 concatenate가 된다.
"문자열1" + "문자열2" = "문자열1문자열2"

Boolean

말해 뭐해? true or false

Null and Undefined

둘이 다른거다. 엄연히.
var x = null;은 값이 있는데 null이거나 빈거고
var y; 같이 뭐 값도 없는건 undefined

Array

하나의 변수 이름에 여러 데이터 값 저장.
(같은 자료형을 연속된 메모리에 저장하는 C와 달리) 원소끼리 자료형이 달라도 오케이다!!

• 선언 방법(주로 리터럴로 하죠)

1. 리터럴 : var fruits = ["apple", "banana", "peach"];
2. Array Object : var frutis = new Array("apple", "banana", "orange")

• DOM Object's arrangement vs array
• array -> 숫자 인덱스로만 참조(c언어 처럼)
• arrangement -> python 해시마냥 참조 가능. 어떤 객체의 속성명으로 가능하다는 말.

person["firstName"] = "John";

• 마지막 인덱스에서 건너뛰어 넣어도 자동으로 그 사이를 undefined로 채워준다(신기;;)

fruits = ["Banana", "Orange"]; fruits[5] = "Lemon";

// fruits = ["Banana", "Orange", undefined, undefined, "Lemon"]

• Array's methods

1. push, pop => 맨 뒤에서 넣고, 맨 앞에서 제거. (제거=return;반환)
2. shift => 모든 원소 왼쪽으로 한칸 이동. (맨 앞 제거=return)
3. unshift => 모든 원소 오른쪽으로 한칸 이동. (맨 뒤 제거=return)
   그 외에도 concat, join, reverse, slice, toString....

• split, join (join vs toString)
  split은 구분자 기준으로 쪼개줌.
  join은 구분자로 합쳐줌.
  join vs toString : 배열toString은 사이에 콤마가 붙는데 배열join은 원하는 구분자로 가능.

var fruits = \["Banana", "Oragne", "Apple"\];  
fruits.toString() => Banana,Orange,Apple,Mango  
fruits.join("") => BananaOrangeAppleMango

관계 연산자

다 똑같은데
하나만 짚고 넘어가자

=== // 이퀄 세개짜리?

값도 같아야 하고, 타입도 같아야 한다.
"5" == 5는 값만 따져서 true지만
"5" === 5는 타입도 따져서 false다.

함수

선언하는 법:

function functionName(parameter) {  
// code...  
}

이름을 저렇게 붙여서 쓰고 띄어쓰기 안쓰는 대신 대문자 쓰는 형태.
파라미터에는 타입을 써주지 않는다!

무명 함수(Anonymous function)

• 변수 선언할 때 함수를 박아서 변수로 함수 쓰기

var x = function(a, b) {return a*b};
// (ES6 부터는 이것도 가능) var x = (a, b) => {return a*b};
var z = x(4, 3);

인수, 매개변수

• 인수: 실제 쓰이는 값(실인수)
• 매개변수: 함수 정의할 때 써있는 변수 명

JS에서는

• 매개변수에 자료형 안씀
• 실인수 자료형 검사 안함
• 실인수 개수대로 썼는지 검사 안함
• 대신에 할당되는 값 없으면 undefined로 자동으로 박아줌

JS에서 인수 전달은

내장 객체인 arguments 로 자동으로 처리.
그러니까 인자들을 넣어서 주면 js가 알아서 걔를 arguments라는 (배열같은) 것에다가 담아서 사용함.
다만 값 인자 => call by value , object 인자 => call by reference임 주의.

JS 문자열 출력 형식:

두 가지 방법이 있다.
참고로 둘 다 파이썬이랑 똑같더라 ㅇㅇ;;

백틱을 사용한 출력

var i = 10;  
document.write(`number is ${i}`);

백틱 안쪽은 기본적으로 다 문자열이고 변수를 구분하기 위해
${}를 써주고 안에다가 식이나 변수를 넣는다.

따옴표 출력

var i = 10;  
document.write("number is " + i);

설명할게 있나? 걍 +로 연결하기.