Day 01 - w3schools js 독학하기

- js let

자바스크립트는 여러 공백을 무시한다.

따라서 스크립트에 공백을 추가하여 가독성을 높힐 수 있음!

 

+) 대소문자 구분하기 때문에, lastName 변수와 lastname 변수는 다른 변수라는 점 알고있기!

 

var 변수는 {}안에서 선언했어도 밖에서 사용이 가능핟.

하지만 let변수는 {}안에서 선언했으면 그 블록 안에서만 사용이 가능하다.

 

또 let변수는 {} (= 같은 블록) 에서 변수 다시 선언하는 것 허용되지 않는다.

 

이 부분을 제일 빠르게 활용이 가능한 것은, 

var로 변수를 선언하였을 때,
var x = 10;// Here x is 10

{var x = 2; // Here x is 2}

// Here x is 2

하지만 let으로 변수를 선언한다면?

let x = 10;
// Here x is 10

{let x = 2;// Here x is 2}

// Here x is 10

제일 장점은 var는 어디에서든 재선언이 가능하다는 것이다.

 

---

- js 상수

const도 똑같이 

const x = 2;     // Allowed
x = 2;           // Not allowed
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed

{
  const x = 2;   // Allowed
  x = 2;         // Not allowed
  var x = 2;     // Not allowed
  let x = 2;     // Not allowed
  const x = 2;   // Not allowed
}

이 부분이 아직도 명확하게 이해가 가지 않는데,

어떻게 선언을 하기 전에 변수가 사용되는건지 너무 신기하다 ^^

 

---

- js 산술

오 이거는 처음 봤는데, 지수 연산자라는게 있다.

**같은 경우에는 1연산자를 2연산자의 거듭제곱으로 올린다.

let x = 5;
let z = x ** 2;          // result is 25

---

-  js 데이터 유형

숫자와 문자열을 추가할 때 JavaScript는 숫자를 문자열로 처리합니다.

 

let x = 16 + 4 + "Volvo";
20Volvo

let y = "Volvo" + 16 + 4;
Volvo164

이 부분은 중요하다고 생각하는게, 

x같은 경우에는 vlovo에 도착할 때 까지 16과 4는 숫자로 처리되기 때문에, 두개를 더해서 20volvo가출력이 된다.

 

하지만 아래의 y같은 경우에는, 이미 앞에 만난게 문자이기 때문에, 뒤에 나오는 숫자들도 자동으로 문자로 처리된다.

그렇기 때문에, 16과 4가 붙어져 나오는 형식으로 출력이 된다/

 

자바스크립트는 동적이기 때문에,

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

 

이렇게 자동으로 변수의 유형이 달라질 수 있다.

 

let car;해서정의가 되어있지 않은 변수가 있는데,

이변수의 유형은 undefined 유형이다.

 

---

- js 객체

개체 속성 액세스 방법은 2가지가 있는데,

person.lastName;
person["lastName"];

두개가 같은 개체 속성에 액세스하는 방법이다.

 

---

- 기본적으로 자주 사용하는 HTML 이벤트

사용해봤던 이벤트들은 onclick / onmouseover/ onmouseout/onkeydown /

정도 인 것 같다.

 

안사용해봤던 onchange / onload  인 것 같다.

 

onchange -> js를 통해서 변화가 일어났는지를 확인하는 메서드다.

 

1.
radio 버튼과 checkbox 경우, 체크 상태 변경 시 onchange 이벤트 발생.

2.

input 이벤트와 유사하나, 2가지 차이점 존재.

• input 이벤트 - 요소값 변경 직후에 발생하며, <select> 요소에서는 작동 안 함.
• change 이벤트 - 요소값 변경 후 요소가 포커스 잃으면 발생하며, <select> 요소에서도 작동함.

아래의 예시 코드는, 아이디 입력 칸에다가 원하는 소문자를 입력하면, 자연스럽게 대문자로 toUppercase()가 적용되는 코드이다.

 

 

아이디 입력: <input type="text" id="hz">

<script>
document.getElementById("hz").onchange = function() {homzzang()};

function homzzang() {
    var x = document.getElementById("hz");
    x.value = x.value.toUpperCase();
}
</script>

---

- 문자열

문자열을 분리할 때 보통 \ 를 사용해서 분리하기는하는데, 선호하는 방법은 아니고

보통 문자열을 분리해서 문자열을 추가하는걸 더 많이 쓴다고 한다.

 

 

document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";

---

- 문자열 부분 추출

문자열을 추출하는 방법에는 세가지 방법이 존재한다.

• slice(start, end)
• substring(start, end)
• substr(start, length)

이 중에서 내가 제일 대중적으로 자주 사용했던건 자바에서 substring이었고,

slice같은 경우에는 정보처리기사 공부할 때 많이 사용했고, -1부터는 끝부터 시작하는거라고 기억하고 있다.

 

 

+ replace는 지정된 값을 문자열의 다른값으로 바꿉니다.

 

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

대소문자를 구분하지 않으려면 /i가 들어있는 정규식을 사용합니다.

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

정규식은 따옴표 없이 사용하는 것 기억하기

 

---

- 문자열 메서드

concat() 두개 이상의 문자열을 결합하고, + 연산자를 대신해서 사용할 수 있다.

 

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

 

두가지 문자열을 새로 배워보자

padstart / padend 같은 경우에는, 앞과 뒤 부분에 내가 원하는 문자열을 원하는 수만큼 넣는 것이다.

아래 예시 2가지 적어보자.

 

아마 출력값을 0을 4개 넣어도 앞에 3개 밖에 안들어가는거보면 한자리 수 빼는 부분을 적용하나보다!

let text = "5";
let padded = text.padStart(4,"0");

출력값 : 0005

let text = "5";
let padded = text.padEnd(4,"0");
출력값 : 5000

---

- 문자열에서 문자만 추출하기

• charAt(position)
• charCodeAt(position) : 문자열의 지정된 인덱스에 있는 문자의 유니코드를 반환합니다.
• 속성 액세스 [ ]

기본적으로 생각나는 유니코드는 A가 65였나 (올ㅋ 기억하고있는게 맞았음)

a가 97이었다!

 

 

---

- 문자열 위치 검색하기

• String indexOf()
• String lastIndexOf()

둘 다 indexOf(), lastIndexOf()텍스트가 없으면 -1을 반환합니다.

• String startsWith()
• String endsWith()

srartsWith / endsWith같은 경우에서 매개변수에 숫자를 넣으면 그 위치에서 시작하는 값이

뒤에오는 문자 인지 확인이 가능하다.

 

---

- 문자열 템플릿

literal - ``를 사용 했을 때, 좋은 점! (아래에 코드로 예시를 추가해놓겠음!)

 

1. 문자열 내에서 작은 따옴표와 큰 따옴표를 사용 할 수 있다.

2. 여러 줄의 문자열을 허용한다. 이 부분 때문에 많이 사용했었음!

3. 문자에 변수를 허용합니다. -> 이부분을 자바스크립트 쓰면서 젤 많이 활용하는 방법 아닐까?

4. 문자열에서 표현식을 허용한다.

 

1. let text = `He's often called "Johnny"`;

2. let text1 =
`The quick
brown fox
jumps over
the lazy dog`;

3.let firstName = "John";
let lastName = "Doe";

let text3 = `Welcome ${firstName}, ${lastName}!`;

4. let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

---

- 내가 가끔 헷갈리는 숫자!

+에는 숫자를 직접 더하는 것도 있지만, 문자열을 연결하는 기능도 있기 때문에 내가 이부분을 많이 헷갈려한다.

 

숫자 + 숫자 = 숫자

숫자 + 문자열 = 문자열 연결

문자열 + 숫자 = 문자열 연결

문자열 + 문자열 = 문자열 연결

 

! 제일 중요하게 봐야하는 예시

let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;

출력값 : 3030

앞에서부터 계산을 하는데, 앞에 x와 y같은 경우는 숫자이기에 먼저 계산되어서 30이나오고
뒤의 계산은 30이 문자열이기에 숫자 + 문자열의 계산이 되기 때문에, 
앞에 계산된 30과 뒤에 30이 문자열 연결로 계산되어서

출력값이 3030이 나오게 된다.

근데 너무 웃긴게, 문자열이라고 해도, 숫자 연산을 문자열에다가 사용하면 안에있는 아이들을 숫자로 처리하려고 하는게 웃긴다.

 

+만 제외하고 ""안에 들어있는 숫자들은 숫자 연산을 사용하면 자동으로 숫자로 인식해서 계산한 결과값을 내준다.

 

NaN = not a number 숫자가 아닌 문자열로 산술을 수행하려고 하면 숫자가 아니라고 알려주기 위한 기호!

거꾸로 숫자가 맞는지 아닌지 확인하기 위해서 isNaN()과 같은 메서드를 사용하기도 한다.

 

---