Homile

📌 문자열: ''(따옴표)로 감싸진 데이터 값

let name = "cho";

console.log(name);  // output: 'cho'

📌 문자열 내 특수문자 사용법 

일반적으로 특수문자를 사용하듯이 하면 JS내에서는 작성되지 않는 경우가 있습니다. 

위와 같은 경우 JS내에서 특수문자를 사용할 수 있는 기호들이 많이 존재하는데 그 중 자주 사용하는 문자를 작성해 보겠습니다.

📌 문자열과 함께 사용하는 메서드

문자열에서 자주 사용하는 메서드들이지만 배열과 함께 사용하는 경우도 다수 존재합니다.

• concat(data1, data2, ...)
  
  • 주로 배열을 이어 붙일때 많이 사용하지만 문자열에서도 사용이 가능합니다.

let name = "cho";
let age = "27";

console.log(name.concat(age));		// output: 'cho27'

• length
  • 문자열의 길이를 확인할 때 사용합니다.

let name = "cho";

console.log(name.length);		// output: 3

• indexof('문자', 시작 인덱스 번호)
  • 문자열에서 해당하는 문자의 인덱스 번호를 찾을 때 사용합니다.
  • 해당 문자가 존재하지 않다면 -1을 return 합니다.

let a = "hello";

console.log(a.indexOf('l'));		// output: 2
console.log(a.indexOf('l', 3));		// output: 3

• includes('찾을 값')
  • 문자열에 찾는 값이 존재하면 true, 존재하지 않다면 false를 return 합니다.

let a = "hello";

console.log(a.includes('e'));	// output: true
console.log(a.includes('z'));	// output: false

• split(조건)
  • 해당하는 조건에 맞게 문자열을 잘라내 배열로 반환합니다..

let a = 'hello js world';

console.log(a.split(' '));		// output: ['hello', 'js', 'world'] 공백을 기준

• substr(start, end)
  • 문자열의 시작 인덱스부터 종료 인덱스 전 까지 문자열을 반환합니다.

let a = 'helloJs';

console.log(a.substring(1, 3));		// output: 'el'
console.log(a.substring(3));		// output: 'lojs'

• toLowerCase(), toUpperCase()
  
  • 문자열을 소문자, 대문자로 바꿔줍니다.

let a = 'abcdef';
let b = 'HELLO';

console.log(a.toUpperCase());	// output: 'ABCDEF'
console.log(b.toLowerCase());	// output: 'hello'

📝 참고자료

JavaScript MDN: if ...else

📌 조건문: 참과 거짓을 판별하는 말그대로 '조건'을 구분할 수 있다.

• if ~else, if ~else if와 같이 단일 조건문으로 사용할 수 있으며 중복으로 조건을 처리할수도 있다.
• 논리 연산자(&&(and), ||(OR)) 연산자를 사용하여 조건문안에 조건식을 세워 줄 수 있다.

📌 if: if 문의 조건이 참일 때 명령문이 실행되고 거짓일 때 명령문이 실행되도록 한다.

let a = 10;
let b = 5;

if (a > b){
	// 조건이 참일 때 실행
	console.log(`a가 b보다 큽니다.`);
}else{
	// 조건이 거짓일 때 실행
	console.log(`b가 a보다 큽니다.`);
}

📌 if ...else if: 조건문을 연속으로 지정할 때 사용한다.

let a = 10;
let b = 5;

if (a > b){
	// 첫 번째 조건이 참일 때 실행
	console.log(`a가 b보다 큽니다.`);
}else if (a === b) {
	// 두 번째 조건이 참일 때 실행
	console.log(`a가 b와 같습니다.`);
}else {
	// 모든 조건이 거짓일 때 실행
	console.log(`b가 a보다 큽니다.`);
}

📌 비교 연산자

• ===(같다)와 !==(다르다)를 3개를 사용하는 이유
  • 아래와 같이 ==은 포괄적으로 비교를 하고 ===는 정확하게 비교를 해준다. 
  • 1 == '1' → true: 숫자 1과 문자 1을 같다고 판별한다.
  • 1 === '1' → false: 숫자 1과 문자 1을 다르다고 판별한다.

📝 참고자료

JavaScript MDN: if ...else

📌 함수(Function)

• 하나의 작은 기능을 하는 것.
• 함수에 값을 '전달'하면 함수에서 값이 반환된다.
• 속성과 메서드를 모두 가질 수 있으면 '일급 객체'라고 한다. 

📌 함수 정의하기

함수 선언식

function name (param){
	return param;
}

함수 표현식

// 일반적인 함수 표현식
const name = function(param) {
    return param
}

// 함수 표현식 + 함수 선언식
const name = function names(param) {
	return param
}

화살표 함수

const name = (param) => {
	return param;
}

📌 함수 호출하기

• 함수명(인자(agrument));

// 함수 표현식으로 선언
const name = function(param) {
    return param
}

// 함수 호출
name("cho");    	  // output: cho
name("cho", "min");   // output: cho
name();   // output: undefined

📝 참고자료

• ​ JavaScript MDN

📌 변수란?

   - 데이터를 편하게 다루기 위한 데이터의 이름

📌  변수의 선언(declaration) 및 할당(assignment)

• 선언: let name;
• 할당: name = "ho";   let age = 12;
  • 선언이 미리 되어있다면 변수명에 바로 할당 할 수 있다.
  • 선언과 할당을 동시에 할 수 있다.
• 변수를 선언 하는 문법 (var, let, const)
• var: 변수를 선언하는데 가장 오래된 문법 (현재는  let을 많이 사용한다.)
  • 선언한 변수를 전역적으로 사용이 가능하며 두번 선언할 수 있다.

•  let: var문법의 상위문법이다.
  • 범위는 블록으로 이루어져 있어 범위를 벗어나면 호출할 수 없다.
  • let을 사용하여 같은 블록 내에서 2번 선언 할 수 없다.

let a = 1;
if (true){
   let b = 2;
   // let b = 4;    // 두번 선언으로 오류 발생 (Idetifier 'b' has already been declared)
   console.log(b);  // 2출력
   console.log(a);  // 1출력
}

console.log(b);   // 블럭범위 밖으로 호출되지 못함(is not defined)
console.log(a);	  // 1출력

• const: let과 속성은 같지만 선언 할 경우 사용자가 변경할 수 없다. (상수)

const a = 1;
if (true){
   const b = 2;
   // const b = 4;    // 두번 선언으로 오류 발생 (Idetifier 'b' has already been declared)
   console.log(b);  // 2출력
   console.log(a);  // 1출력
}

console.log(b);   // 블럭범위 밖으로 호출되지 못함(is not defined)
console.log(a);	  // 1출력

a = 10; // 값이 변하기 때문에 오류 발생

📌 변수 선언시 이름 규칙

• 변수명에 공백을 사용할 수 없다. (ex. let na me;(x),  let name;(o))
• 변수명에 단어마다 대문자를 넣어준다. (ex. let nameAndAge;)

📌 데이터 타입

       typeof()를 통해 데이터 타입을 알 수 있다.

• String: 문자형 타입
• Number: 숫자형 타입 ((2^53 − 1)부터 2^53 − 1까지 수의 범위)
• BigInt:  Number의 범위를 벗어난 숫자형 타입
• Undefined: 값을 할당하지 않은 변수 타입
• Boolean: 참(true)과 거짓(false)을 return하는 타입
• Null: null 하나의 값만 가지는 타입 (값이 없음을 나타낸다)
• Symbol: 고유하고 변경 불가능한 원시값이며 객체의 속성 키로 사용가능한 타입
• function: 함수 타입 (작은 기능의 단위)
• object: 객체 타입 (여러가지 속성들의 집합)

let num = 0;
let name = "ho";

console.log(typeof(num));   // number type
console.log(typeof name);   // string type (소괄호를 사용하지 않아도 된다)

CSS(Cascading Style Sheets)란?

• 사용자에게 문서를 표시하는 방법을 지정하는 언어이다.
• HTML로 웹 페이지의 틀을 제작하고 거기에 디자인을 해주는 것이 바로 CSS이다.

CSS의 특징

1. 규칙 기반 언어이다.
2. 웹 페이지의 제목 및 링크의 색상과 크기 변경을 할 수 있다.
3. 웹 페이지의 레이아웃을 만드는데 사용할 수 있다.
4. 애니메이션과 같은 효과도 만들 수 있다.

참고자료

• CSS MDN

JavaScript란?

• HTML, CSS를 사용한 정적인 웹 페이지를 동적으로 움직이도록 만들어준다.
• 웹을 위한 인터프리터 언어이자 객체 기반의 프로그래밍 언어이다.

JavaScript의 특징

1. 객체 기반의 스크립트 언어이다.
2. 객체 지행형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

ECMAScript

• 브라우저의 표준안을 작성하기 위해 만들어진 표준화된 스크립트 프로그래밍 언어
• 22년 1월 기준 최신 버전 ES6

라이브러리

• jQuery, dojo, mootools

참고자료

• JavaScript MDN