7/11 7/13 7/15 TIL : JS 기초

Javascript

내장 방식: <script> ... <script>

링크 방식: script src. js 파일을 따로 만들어서 링크하는 방식

 

표기법

dash-case(kebab-case)

snake_case

camelCase

PascalCase

 

변수: 데이터를 저장하고 참조(사용)하는 데이터의 이름(let, const, var)

var의 문제점: 중간에 같은 이름의 변수를 다시 선언할 수 있음, 변수가 블록 단위에서 끝나는 것이 아니라 전역에서 영향력을 행사함

 

규칙

- 변수 이름으로는 문자, 숫자, $, _ 만 사용 가능

- 첫 글자는 숫자가 될 수 없음

- 예약어 사용할 수 없음

- 상수는 대문자로 선언하는 것을 추천

 

데이터 종류(자료형)

string

number

boolean

undefined

null

object

array

 

- typeof 변수: 자료형 알려줌

- 형변환: String(), Number(), Boolean()

- 문자끼리 사칙연산 시 자료형 자동변환 후 연산, 변환 불가하면 NaN(not a number) 출력

 

문자+변수 동시에 쓰기

메소드의 매개 변수로 넣어서 사용: 띄어쓰기o

console.log("저는", myName, "입니다."); // 저는 bulsok 입니다.

 

+ 연산자를 사용해서 변수를 문자로 변환 후 더하여 사용: 띄어쓰기x, 문자열이 아닌 자료형도 문자열로 표현

console.log("저는" + myName + "입니다."); // 저는bulsok입니다.

 

백틱 문자 사용: 문자열이 아닌 자료형도 문자열로 표현

console.log(`저는 myName입니다.`); // 저는 bulsok입니다.

 

비교 연산자

a == b: 동일하면 true

a === b: 동일하면 true, 변수의 값 뿐만 아니라 자료형까지 비교

a != b: 동일하지 않으면 true

a < b: a가 b보다 작으면 true

a <= b : a가 b보다 작거나 같으면 true

 

논리 연산자

a && b: 전부 true일 때만 true, 첫번째 false를 발견하는 즉시 평가를 멈춤

a || b: 둘 중 하나만 true면 true, 첫번째 true를 발견하는 즉시 평가를 멈춤

 

증가, 감소 연산자

a++, a--

 

if문

if(조건1) {

  // 조건1이 참이라면 실행

} else if(조건2) {

  // 조건1이 거짓이고 조건2가 참이라면 실행

} else {

  // 조건1과 조건2가 모두 거짓일 때 실행

}

 

switch문

switch(변수) {

  case 값1:

    // 변수와 값1이 일치하면 실행

    break;

  case 값2:

    // 변수와 값2가 일치하면 실행

    break;

  default:

    // 일치하는 값이 없을 때 실행

    break;

}

 

3항 연산자: 조건식 ? 조건이 참인 경우 실행 : 조건이 거짓인 경우 실행;

ex) myName === "bulsok" ? console.log("맞았어요") : console.log("틀렸어요");

 

for문

for(초기 상태; 조건문; 증감문) {

  실행할 코드

}

 

while문

while(조건문) {

  실행할 코드

}

 

do {

  실행할 코드

} while(조건문)

 

- while문은 for문과는 달리 조건을 변경하는 구문이 기본적으로 포함이 되어있지 않기 때문에 무한루프 가능성 있음

- do..while문은 코드 최소 1번 실행

 

반복문 제어

break: 멈추고 반복문을 빠져나옴

continue: 멈추고 다음 반복을 진행

 

함수: 특정 동작(기능)을 수행하는 일부 코드의 집합(function)

매개 변수가 없는 함수

 

매개 변수가 있는 함수

- 변수 전달 시 기본 값 설정 가능

  ex) function sayHello(name = "friend") { ... }

 

함수 선언 방법

함수 선언문: 어디서든 호출 가능(호이스팅)

funtion sayHello() {
	console.log("Hello");
}

 

함수 표현식: 코드에 도달하면 생성

let sayHello = function() {
	console.log("Hello");
}

 

화살표 함수

let sayHello = () => {
	console.log("Hello");
}

 

배열(array): 순서가 있는 리스트

.length: 배열의 길이

.push( ): 배열 끝에 추가

.pop(): 배열 끝 요소 제거

.shift(): 배열 맨 앞 요소 제거

.unshift( ): 배열 맨 앞에 추가

.split( ): 문자를 인수 기준으로 쪼개서 배열로 반환

.reverse(): 배열의 순서를 뒤집어서 반환

.join(): 배열을 인수 기준으로 병합해서 문자열을 반환

for문 적용: for(let i = 0; i < days.length; i++) { ... }

let helloTest = "Hello";
let helloArr = helloTest.split("");
console.log(helloArr); // ['H', 'e', 'l', 'l', 'o']
let reverseHello = helloArr.reverse();
console.log(reverseHello); // ['o', 'l', 'l', 'e', 'h']
let helloAgain = reverseHello.join("");
console.log(helloAgain); // olleH

let hello = "Hello~";
console.log(hello.split("").reverse().join("")); // ~olleH

 

object

접근
- superman.name
- superman['name']

추가
- superman.gender = "male";
- superman["gender"] = "male";

삭제
- delete superman.gender;

프로퍼티 존재 여부 확인
- superman.birthday //undefined
- "birthday" in superman; //false
- "age" in superman; //true

for...in 반복문

for(let key in superman) {
	console.log(key)
	console.log(superman[key])
}

 

** superman.key와 다른 의미

 

메소드(method): 객체 프로퍼티로 할당된 함수

const superman = {

  name: "clark",

  age: 33,

  fly: function() {

    console.log("날아갑니다.")

  }

}

** 축약형: fly() { ... }

 

this: 자신이 속한 객체를 반환

function sayHello() {
	console.log(`Hello, I'm ${this.name}`);
}
const boy = {
	name: "Mike:,
	sayHello,
}
boy.sayHello(); //Hello, I'm Mike

- 화살표 함수는 일반 함수와 달리 this를 가지지 못함. 화살표 함수 내부에서 this를 사용하면 그 this는 외부에서 값을 가져옴(브라우저 환경: window, Node.js: global)

 

생성자 함수

function Fruit(name, price) {
	this.name = name;
	this.price = price;
	this.showPrice = function () {
		console.log(`${this.name}의 가격은 ${this.price}원입니다.`);
	};
}
let apple = new Fruit("apple", 1000);
let pineapple = new Fruit("pineapple", 2000);
let watermelon = new Fruit("watermelon", 10000);
let strawberry = new Fruit("strawberry", 50000);
apple.showPrice(); // apple의 가격은 1000원입니다.
pineapple.showPrice(); // pineapple의 가격은 2000원입니다.
watermelon.showPrice(); // watermelon의 가격은 10000원입니다.
strawberry.showPrice(); // strawberry의 가격은 50000원입니다.

함수 이름은 PascalCase 사용

obj 생성 시: new 함수( )

 

dom(document object model): html 문서 요소의 집합

html 문서는 각각의 node와 object의 집합으로 문서를 표현함

따라서 각각의 요소에 접근하여 문서구조, 스타일, 내용 등을 변경할 수 있도록 하는 것

.querySelector("요소 선택자")

- 요소 선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져오는 메소드
- 문서에서 만나는 제일 첫번째 요소를 반환
 ex) const boxEl = document.querySelector(".box"); // html 요소 1개 검색/찾기

.getElementById("id")
- id 이름을 불러서 해당 id를 가지는 요소를 불러오는 메소드
 ex) let boxEl = document.getElementById("second-box");

.classList.add/.remove/.contains
- 선택 요소에 class를 더하거나, 빼거나, 클래스가 존재하는지 체크하는 메소드

 ex) boxEl.classList.add("orange");

.addEventListener(이벤트, 명령)
- 선택 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행시키는 메소드

ex) boxEl.addEventListener("click", function() { ... } );

- click
- mouseover: 요소에 커서를 올렸을 때
- mouseout: 마우스가 요소를 벗어날 때
- mousedown: 마우스 버튼을 누르고 있는 상태
- mouseup: 마우스 버튼을 떼는 순간
- focus: 포커스가 갔을 때
- blur: 포커스가 벗어나는 순간
- keypress: 키를 누르는 순간 + 누르고 있는 동안 계속 발생
- keydown: 키를 누르는 순간에만 발생
- keyup: 키를 눌렀다가 떼는 순간
- load: 웹페이지에 필요한 모든 파일의 다운로드가 완료되었을 때
- resize: 브라우저 창의 크기가 변경될 때
- scroll: 스크롤이 발생할 때
- unload: 링크를 타고 이동하거나, 브라우저를 닫을 때
- change: 폼 필드의 상태가 변경되었을 때

.setAttribute("속성명", "지정할 속성")
- 선택한 요소의 속성 값을 직접 지정할 수 있는 메소드

 ex) inputEl.setAttribute("type", "button");

.textContent = " ";

 - 선택 요소의 텍스트 내용을 변경할 수 있는 메소드

 ex) boxEl.textContent = "KDT";

 

.querySelectorAll("요소 선택자")

- 문서에 존재하는 모든 요소를 찾아주는 메소드

- 모든 요소를 가져와서 배열(처럼 보이는) 데이터로 만들어 줌

 ex) let boxEls = document.querySelectorAll(".box");

 

.forEach(function (반복중인 요소, 인덱스) { } )

- 찾은 요소 전부에게 명령을 반복적으로 실행해 주는 메소드

let boxEls = document.querySelectorAll(".box");
console.log(boxEls); // NodeList(9) [div.box, div.box, div.box, div.box, div.box]
boxEls.forEach(function(boxEl, index) {
    boxEl.classList.add(`box_${index +1}`);
})
console.log(boxEls); // NodeList(9) [div.box.box_1, div.box.box_2, div.box.box_3, div.box.box_4, div.box.box_5]

 

etc

onclick: 각각의 html 요소에 속성 값으로 js 함수를 연결

루트 계산: Math.sqrt( );

 

---

C언어 공부 열심히 하길 잘했다는 생각..