내장 방식
<script> alert("head 안"); </script>
어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 / head 와 body 사이 / body 아래 등
- 간단하게 생성가능
- 특정 페이지에서만 작동하는 기능일 경우 내장 방식만 따로 구현 가능
링크 방식
<script src="./index.js"></script>
java script 파일을 따로 만들어서 링크를 거는 방식 (ex.css)
어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 / head 와 body 사이 / body 아래 등
- js 코드의 양이 많으면 파일로 따로 관리하는 것이 더 유용
- 같은 기능을 다른 페이지에서 사용하고 싶을 때 링크만 걸어서 간단하게 사용 가능
- 유지 보수 용이성 편
데이터 종류(자료형)
String 문자형 데이터
문자와 변수를 동시에 사용할 때
- 메소드의 매개 변수로 넣어서 사용
console.log("문자", 변수 "문자");
console.log("내 이름은", myName, "이고 이메일은", email, "입니다.");
- + 연산자로 변수를 문자로 변환한 후 더하기
console.log("문자" + 변수 + "문자");
console.log("내 이름은 " + myName + "이고 이메일은" + email + "입니다.");
- `백틱 문자 사용
console.log(`내 이름은 ${myName}이고 이메일은 ${email}입니다.`);
let jiyoung = `내 이름은 ${myName}이고 이메일은 ${email}입니다.`;
console.log(jiyoung);
Number 숫자형 데이터
let number = 123;
let opacity = 0.7;
console.log(number);
console.log(opacity);
//NaN : not a number 숫자가 아니다
console.log("apple" - 3); //NaN
boolean 참, 거짓
let checked = true;
let unchecked = false;
console.log(checked); //true
console.log(unchecked); //false
undefined 미할당 데이터
let undef;
console.log(undef); //undefined
Null 의도된 빈 데이터
let empty = null;
console.log(empty); //null
Array 배열
let fruits = ["orange", "pineapple", "grape", "apple"];
let fruits2 = new Array("orange", "pineapple", "grape", "apple");
console.log(fruits[0], fruits[1]); //orange pineapple
let date = [1, "ji young", false, null, undefined];
console.log(date[4]); //undefined
// array : 2차원 배열
let korean = [
["가", "나", "다"],
["라", "마", "바"],
["사", "아", "자"],
];
console.log(korean[0][0]); //0번째 줄 0번째 요소, 가
console.log(korean[1][1]); //1번째 줄 1번째 요소, 마
//3차원 배열
let nums = [
[
[1, 2, 3],
[4, 5, 6],
],
[
[7, 8, , 9],
[10, 11, 12],
],
];
console.log(nums[1][0][1]); //1번째 배열>0번째 줄>1번째 요소, 8
Object 여러 데이터
let introduce = {
name: "ji young",
age: 23,
study_now: true,
};
//점 표기법
//object 이름.key이름
console.log(introduce.name); //ji young
// 대괄호 표기법
// object 이름['']
console.log(introduce["name"]); //ji young
typeof : 자료형 구분
console.log(typeof "문자"); //string
console.log(typeof 123); //number
console.log(typeof true); //boolean
// 변수가 아니여도 사용 가능
console.log(typeof cat); //{}
console.log(typeof []); //object
console.log(typeof NaN); //number
console.log(typeof null); //object
console.log(typeof und); //undefined
형 변환
Prompt로 입력 받은 값은 "문자"로 저장된다.
"80" + "50" ="8050" -> "8050" / 2 -> 4025
자동형변환의 문제 : 작은 프로그램은 문제가 없지마느 프로그램이 큰 거래 사이트라면 문제다.
명시적 형변환 : 자동형변환이 아니라 직접 형 변환!
문자로 변환-> String();
숫자로 변환 -> Number();
//1. -> 문자 string()
let str1 = true;
let str2 = 123;
let str3 = null;
console.log(typeof String(str1)); //string
console.log(typeof String(str2)); //string
console.log(typeof String(str3)); //string
console.log(typeof str1); //boolean
console.log(typeof str1.toString()); //숫자-> 문자, string
//2. ? -> 숫자 Number()
let n1 = true;
let n2 = false;
let n3 = "123.9";
console.log(typeof n1); //boolean
console.log(typeof n2); //boolean
console.log(typeof n3); //string
console.log(typeof Number(n1)); //1
console.log(typeof Number(n2)); //0
console.log(typeof Number(n3)); //123.9
console.log(Number(n1));
console.log(Number(n2));
console.log(Number(n3));
console.log(parseInt(n3)); //123, 소수점은 버림/정수형
변수(variable) : 데이터 저장 (var, let, const)
var 문제점 = 중복 선
- 기존에 있는 변수 이름을 다시 선언해도 기존의 변수의 값으로 덮어 씌운다. 기존의 데이터에 덮어 씌우면, 문제가 발생한다.
- 변수가 {블록단위}에서 끝나는 것이 아니라, 다른 코드에도 영향을 미침
- debug 어려움
- => ES6부터 let 사용 권장!
let : 값의 재할당 가능, 재선언 불가, 선언과 동시에 초기화하지 않아도 됨
const : 값의 재할당 불가, 재선언 불가, 선언과 동기에 초기화
var은 없은 애 취급하고, 값을 재할당하는 경우가 아니라면 const를 디폴트로 사용하자!
변수 기본 규칙
- 이름은 문자, 숫자, &, _ 만 사용가능
- 첫 글자에 숫자는 사용 불가
- 예약어(=의미 이미 가지고 있음) 사용 불가
- 변수 이름은 알잘딱깔센
- 상수는 대문자로 선언!
기본 연산자
% (나머지 연산자)
- 홀수 : num % 2 == 1
- 짝수 : num % 2 == 0
** (거듭제곱)
- 2** 3 = 8
연산자 줄여쓰기
- num = num + 5 -> num += 5
- num = num - 5 -> num -= 5
- num = num * 5 -> num *= 5
- num = num / 5 -> num /= 5
증가, 감소 연산 , i++; i--;
비교 연산자(===)
변수의 값 뿐만 아니라 자료형까지 일치하는지 비교한다.
//== : 값만 비교
console.log(1 == 1); //true
console.log(1 == 2); //false
console.log(1 != 2); //true
console.log(1 != 1); //false
console.log("1" == 1); //type 검사X, true
console.log("1" != 1); //false
// === : type과 값 모두 비교
console.log(1 === 1); //true
console.log(1 === 2); //false
console.log(1 !== 2); //true
console.log("1" === 1); //false
console.log("1" !== 1); //true
//크기 비교 > < <= >=
console.log(2 > 1); //true
console.log(2 >= 2); //true
console.log(2 < 1); //false
console.log(2 <= 2); //true
논리 연산자, || (or) / && (AND) / ! (NOT)
|| : 하나라도 true이면 true, 모든 값이 false일 때만 false
&& : 모든 값이 true일 때 true, 하나라도 false이면 false
! : true면 false, false면 true => 반대
//논리연산자
console.log(!true); //false
console.log(!false); //true
console.log(!!true); //true
console.log(!!false); //false
console.log(true && true); //true
console.log(true && false); //false
console.log(false && false); //false
console.log(false || false); //false
console.log(false || true); //true
console.log(true || true); //true
console.log(!(2 > 1)); //false
console.log(2 > 1 && -2 < 1); //true
console.log((2 > 1 && -2 < 1) || 5 > 2); //true
함수
함수 선언문 : 어디서나 호출 가능
function helloWorld1() {
console.log("hello world1");
}
함수 표현식 : 코드에 도달하면 생성
let helloWorld3 = function () {
console.log("helloworld3");
};
helloWorld3();
화살표 함수
let Hello = (name) => {
console.log(`Hi, ${name}`);
};
`` 백틱 문자
- 물결이랑 같이 있는 애
- 개행문자('\n')가 없어도 줄 바꿈이 가능
- 표현식 백틱(` `) 안에 ${} 사용하여 표현
'[Study] FE > HTML & CSS & JS' 카테고리의 다른 글
[포스코X코딩온] JS_03 메소드 (0) | 2023.03.12 |
---|---|
[포스코X코딩온] JS_02 조건문 / 3항 연산자 / 반복문 (0) | 2023.03.11 |
[포스코X코딩온] CSS_06 Transition/Transform/Animation (0) | 2023.03.09 |
[포스코X코딩온] CSS_05 flex (0) | 2023.03.07 |
[포스코X코딩온] CSS_04 position & backgound (0) | 2023.03.07 |