[포스코x코딩온] KDT 웹 10기 231031~231101 2주차 | JavaScript(1)-기초, 변수, 자료형, 형변환, 연산자
HTML, CSS, JavaScript
📒Javascript
웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어
console.log() : 브라우저의 개발자 도구 -> 콘솔
alert() : 브라우저가 열렸을 때 그 내용을 알림창으로 보여줌
내장방식
<script>
Javascript 코드 작성
</script>위치는 어디서나 사용이 가능하다.
링크방식
<script src="./index.js"></script>위치는 어디서나 사용이 가능하다.
읽기 순서 -> 읽히는 순서에 따라서 작동한다.
Javascript에서는 camelCase를 주로 쓴다. (첫 글자 소문자, 중간 글자 대문자)
변수
1) 선언
let 변수이름; // 중복선언 불가능, 재할당 가능
var 변수이름; // 중복선언, 재선언 가능2) 할당
const 변수이름 = 값; // 초반에 선언할 때 반드시 초기화를 동시에 진행해야 한다.
let 변수이름 = 값;
var 변수이름 = 값;변수 기본 규칙
- 변수 이름으로는 문자, 숫자, $, 언더바만 사용가능
- 첫 글자는 숫자가 될 수 없다.
- 예약어도 사용할 수 없다.
- 변수 이름은 읽기 쉽도록 센스있게 작성한다.
- 상수는 대문자로 선언한다.
자료형
Javascript는 데이터 종류와 관계없이 var, let, const 키워드로 변수를 선언하고 사용한다. -> 약한 타입 언어
문자형
-
메소드의 매개 변수로 넣어서 사용
console.log("문자", 변수, "문자"); -
+연산자를 사용해서 변수를 문자로 변환 후 더하여 사용
console.log("문자" + 변수 + "문자"); -
백틱 문자 사용
백틱 문자를 쓰다가 변수를 쓰고 싶으면 ${variable}처럼 쓰면 된다.
let myName = '길동';
var email = 'gildong@naver.com';
let city = '서울';숫자형
let number = 123;
let opacity = 0.7;Boolean
let checked = true;
let isShow = false;Undefined
값이 할당되지 않은 상태를 표기
let undef;Null
어떤 값이 "의도적"으로 비어있음을 의미할 때 사용
let empty = null;Array
여러 데이터를 순차적으로 저장
let data = [1, "Apple", false, null, undefined];✍입력
let colors=['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'black'];
console.log(colors[2]);
colors.push("white");
console.log(colors);
console.log(colors.indexOf("black"));
console.log(colors.reverse());💻출력
배열에서 사용 가능한 속성, 함수
변수명.length
변수명.push(추가할 값) : 맨 뒤
변수명.pop() : 맨 뒤
변수명.unshift(추가할 값) : 맨 앞
변수명.shift() : 맨 앞
변수명.indexOf(찾을 값)
변수명.includes(찾을 값)
Object
여러 데이터 꾸러미
✍입력
let me = {
name: '이시윤',
age: 100,
isFemale: true,
email: "email@gmail.com",
//함수도 객체 안에 넣을 수 있음
sayHi: function() {
console.log("안녕하세요");
}
}
console.log(me);💻출력
typeof
해당 자료형이 어떤 것인지 알 수 있다
✍입력
console.log("typeof를 boolean, array, null에 사용하면",
typeof {},
"결과를 얻을 수 있다.");💻출력
✍입력
console.log(typeof 1, "isn't", typeof 헷, "data type.");
console.log("Typeof를 boolean이나 null에 사용하면,",
typeof false,
"이나",
typeof null,
"결과를 얻을 수 있습니다.");💻출력
형 변환
prompt로 입력 받은 값은 "문자"로 저장된다.
문자형변환
String(), toString()
let a = String(num);
let b = num.toString();숫자형변환
Number()
console.log(Number("123"));
console.log(Number('abc'));연산자
기본 연산자
% 나머지 연산자
** 거듭제곱
연산자 줄여쓰기
num=num+5 -> num+=5
증가, 감소 연산자
num++;
num--;
비교 연산자
=== 변수의 값 뿐만 아니라 자료형까지 비교
논리 연산자
|| OR
&& AND
! NOT
