개발새발
JavaScript 본문
HTML은 구조, CSS는 디자인, 그리고 자바스크립트(JavaScript)는 동작을 담당한다.
자바스크립트는 웹 개발뿐만 아니라 서버 사이드, 데스크탑 애플리케이션, 모바일 앱, 게임, IoT(사물인터넷) 등 다양한 분야에서 사용될 수 있는 범용 프로그래밍 언어이다
<html>
<head>
<script>자바스크립트는 head안 script태그로 감싼 부분에 기술</script>
</head>
<body></body>
</html>HTML 외부에 자바스크립트를 기술하고 싶을 때는 다음과 같이 불러온다
<script src="자바스크립트파일명.js" defer></script>변수 let과 상수 const
let은 데이터 값 변경이 가능한 변수이며, const는 데이터 값의 수정이 불가능한 상수이다.
둘 다 데이터 값에 이름을 지정하여 사용하고 싶고 데이터 값을 반복해서 사용하기 위해서 사용한다.
// 변수 초기화는 변수 let만 가능하며 상수 const는 불가능하다
let value; // (O) 가능
const value; // (X) 불가
let name = '히소'; //대입
name = '자바 스크립트'; // 다른 값 대입이 가능
const name = '히소'; //대입
name = '자바 스크립트'; // const는 값 변경 불가능숫자 타입 변수 간에 계산이 가능하며, 문자열 타입 변수 간 결합이 가능하다.
// 콤마(,)로 구분하면 한꺼번에 변수와 상수 선언 가능
let a = 1, b = 2;
const a = 1, b = 2;
// 숫자 계산, 문자열 결합은 둘다 가능
let number1 = 100;
let number2 = 200;
let sum = number1 + number2;
console.log(sum); // 결과 : 300
// console.log는 브라우저의 개발자 도구 콘솔에 결과를 보여주는 역할을 한다(다른 언어의 print 언어와 비슷)
let name = '히소';
let birth = '03';
let nickname = name + birth;
console.log(nickname); // 결과 : '히소03'
// 변수 let과 마찬가지로 상수 const도 위와 동일하다상수(const) 로 선언된 배열도 객체 내부의 값은 변경이 가능하다.
const array = ['피카츄', '라이츄', '파이리'];
array[2] = '꼬부기';
// 결과 array = ['피카츄', '라이츄', '꼬부기'];
const object = { nickname: '히소', age: 21 };
object.age = 30;
// 객체 내부의 age값이 30으로 변경된다값 변경이 필요한 데이터에만 let을 쓰고, 이외에는 const를 쓰자!!
const를 적극 이용함으로써 변경이 필요한 데이터와 그렇지 않은 데이터의 구분이 쉬워져 가독성이 높아지는 메리트를 얻게된다.
연산자
비교 연산자 (두 개의 값 비교)
| 구문 | 의미 |
| A == B | A, B의 값이 같은가 |
| A === B | A, B의 값과 데이터 타입이 같은가 |
| A != B | A, B의 값이 다른가 |
| A !== B | A, B의 값과 데이터 타입이 다른가 |
| A < B | A가 B보다 작은가 |
| A <= B | A가 B보다 작거나 같은가 |
| A > B | A가 B보다 큰가 |
| A >= B | A가 B보다 크거나 같은가 |
// 두 데이터의 값을 비교한 비교 연산자의 반환값은 참(true) 또는 거짓(false)
console.log('카카오' == '카카오'); // true 반환
console.log('카카오' != '네이버'); // true 반환
// 배열과 객체 타입 비교는 같은 곳을 참조해야 참이 반환된다
const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
console.log(array1 == array2); // false 반환. 참조하는 곳이 다르다.
const array3 = [1, 2, 3];
const array4 = array3;
console.log(array3 == array4); // true 반환. 참조하는 곳이 같다.==, != 와 ===, !== 의 차이점
숫자와 문자열 등의 타입들이 서로 다른 타입일 경우
==, !=는 동일한 타입으로 간주하지만,
===, !==는 다른 타입으로 간주한다.
console.log(1 == '1'); // true 같은 데이터 타입 간주
console.log(1 === '1'); // false 다른 데이터 타입 간주
console.log(1 != '1'); // false 같은 데이터 타입 간주
console.log(1 !== '1'); // true 다른 데이터 타입 간주대입 연산자 (복합형 대입 연산자 : 좌변과 우변의 연산 결과를 좌변의 변수에 대입하는 것)
| 구문 | 의미 |
| x = y | x = y (대입) |
| x += y | x = x + y (더하기) |
| x -= y | x = x - y (뺄셈) |
| x *= y | x = x * y (곱셈) |
| x **= y | x = x ** y (제곱) |
| x /= y | x = x / y (나눗셈) |
| x %= y | x = x % y (나머지) |
기본적으로 C언어의 연산자와 문법이 동일하다
함수
// 함수 기본구조
function 함수명(파라미터) {
처리내용
return 값;
}
// 함수 실행
함수명();
// 예시
function Function(a) {
const result = a + 2;
return result;
}
const Result = Function(1);
consoloe.log(Result); // 결과 : 3// 파라미터 개수는 제한이 없으며 콤마(,)로 구분한다
function taxFunction(price, tax){
const result = price + price * tax;
return result; // 결과 반환값은 return으로 처리
}
// 함수를 실행하고 반환값을 myTax에 대입
const myTax = taxFunction(100, 0.1);
console.log(myTax); // 결과: 110
// 파라미터가 없는 함수도 있다 => 함수 실행 시 ()에 아무것도 입력하지 않는다
function Function() {
console.log('반가워요');
return 100; // 반환값 없는 경우에 자체 생략 가능
}
Function(); // 결과: 반가워요
// return 구문으로 함수가 종료된다
function Function(){
return 100;
// return으로 함수 종료되서 아래는 실행 안됨
console.log('안녕하세요');
}
// 하나의 함수 내에서 return 구문 몇 번이라도 사용 가능
function Function(a, b){
// a가 100 이상이면 a 반환
if (a >= 100) {
return a;
}
// a가 100 미만이라면 b 반환
return b;
}기본적으로 다른 C, 파이썬과 문법 구조가 동일하다!
화살표 함수(Arrow Function)
함수를 간략히 기술하고 싶거나 this로 묶고 싶을 때 화살표 함수를 사용한다. 함수를 선언할 때 function 키워드 대신 화살표(=>)를 사용하여 간결하게 함수를 정의할 수 있다.
// 화살표 함수 기본 구조
const numberSum = (a, b, c) => {
const result = a + b + c;
return result;
};
// 함수의 실행 방식은 일반 함수와 동일
numberSum(1, 2, 3); // 결과: 6
// 화살표 함수는 일반 함수와 달리 파라미터가 하나인 경우는 () 생략 가능
// 파라미터가 없거나 2개 이상인 경우는 () 생략 불가능
const Function1 = (a) => {
return a + 1;
};
const Function2 = a => {
return a + 1;
};
// 화살표 함수의 정의가 한 줄인 경우 {}와 return 생략 가능
const Function3 = (a) => a + 2;함수의 파라미터 초깃값 설정
초깃값이 설정된 파라미터는 값을 전달받지 않으면 '디폴트 파라미터(Default Parameter)'를 사용한다.
function taxFunction(price, tax = 0.1){ // 파라미터 = 초깃값 설정
const result = price + price * tax;
return result;
}
// tax의 인수 생략하면 초깃값 0.1이 사용된다
const result1 = taxFunction(100);
console.log(result1); // 결과: 110
// tax의 전달 값 지정하면 해당 값 사용된다
const result2 = taxFunction(100, 0.13);
console.log(result2); // 결과: 113자바의 생성자와 비슷한 개념이지만, 자바의 생성자는 클래스의 인스턴스를 생성할 때 인수를 받는 특수한 종류의 메서드(함수) 이고, 자바스크립트의 디폴트 파라미터는 함수의 인수에 대한 기본값을 설정하는 것이다.
다수의 파라미터를 가지는 함수
임의의 파라미터를 가지는 함수를 정의하고 싶을 때 '...파라미터'를 이용한다.
function numberSum(...prices){ // 임의의 다수 파라미터
let result = 0;
for (const value of prices) {
result += value;
}
}
const result1 = numberSum(1, 2);
console.log(result1); // 결과: 3
const result2 = numberSum(1, 2, 3, 4, 5);
console.log(result2); // 결과: 15
객체
JavaScript에서 객체는 속성과 메서드를 포함하는 데이터 구조.
객체는 중괄호({})를 사용하여 만들며, 속성과 해당 값을 키-값 쌍으로 저장한다. 메소드는 객체의 동작을 정의하는 함수이다
객체의 인스턴스는 클래스를 기반으로 생성된 개별 객체!
//객체 생성
const person = {
name: ['Bob', 'Smith'],
age: 32,
gender: 'male',
interests: ['music', 'skiing'],
bio: function() {
alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
},
greeting: function() {
alert('Hi! I\'m ' + this.name[0] + '.');
}
};
기본형 : new 객체명
프로퍼티와 메서드
프로퍼티:객체의 특징이나 속성이다. 객체 내부에 저장되며, 객체의 상태를 나타내는 정보를 제공한다.
메서드:객체에서 할 수 있는 동작
프로퍼티와 메서드를 표시하려면 인스턴트명 뒤에 마침표(.)를 붙이고 사용한다
var person = {
name: 'John',
age: 30,
greet: function() {
console.log('Hello!');
}
};
console.log(person.name); // 'John' 출력 (프로퍼티 접근)
console.log(person.age); // 30 출력 (프로퍼티 접근)
person.greet(); // 'Hello!' 출력 (메서드 호출)
내장 객체
내장 객체들은 객체의 속성(property)과 메서드(method)가 존재
속성은 객체의 상태나 특성을 나타내는 값으로, 객체의 특정한 데이터를 저장하고 조회하는 데 사용된다.
메서드는 객체의 동작이나 기능을 나타내는 함수로, 객체에 대한 특정한 작업을 수행하거나 기능을 실행하는 데 사용
이중에서 취소선이 있는 것들은 더 이상 사용되지 않는 메서드 또는 프로퍼티를 나타낸다.
취소선이 없는 경우는 해당 객체의 속성(property)을 나타내며, 속성은 객체의 특정한 데이터 값을 가지고 있다. 취소선이 있는 경우는 해당 객체의 메서드(method)를 나타내며, 메서드는 객체의 동작을 수행하는 함수.
+ 내장 객체들은 자바스크립트에서 기본적으로 제공되므로, 별도의 라이브러리나 모듈을 추가로 가져오지 않고도 사용할 수 있다
주요한 내장 객체
1. String: String 객체는 문자열을 다루기 위한 메서드와 속성을 제공.
2. Number: Number 객체는 숫자를 다루기 위한 메서드와 속성을 제공.
3. Array: Array 객체는 순서가 있는 항목의 집합을 다루기 위한 메서드와 속성을 제공. 배열을 생성하고 항목 추가, 삭제, 정렬, 검색 등과 같은 작업을 수행할 수 있다.
4. Object: Object 객체는 일반적인 객체를 생성하기 위한 메서드와 속성을 제공. 객체의 생성, 프로퍼티 추가, 삭제, 열거 등과 같은 작업을 수행할 수 있다.
5. Function: Function 객체는 함수를 생성하고 다루기 위한 메서드와 속성을 제공.
6. Date: Date 객체는 날짜와 시간을 다루기 위한 메서드와 속성을 제공. 현재 날짜와 시간 정보를 가져오거나, 날짜와 시간을 조작하고 형식화하는 작업을 수행할 수 있다.
7. Math: Math 객체는 수학적인 연산을 수행하기 위한 메서드와 속성을 제공. 수학적인 계산, 삼각함수, 로그 및 지수 함수 등과 같은 작업을 수행할 수 있다.
8. RegExp: RegExp 객체는 정규 표현식을 다루기 위한 메서드와 속성을 제공. 문자열 패턴 매칭, 검색, 치환 등과 같은 작업을 수행할 수 있다.
'WEB-STUDY' 카테고리의 다른 글
| Mongodb 기초 (1) | 2024.05.19 |
|---|---|
| 바닐라 JS로 크롬 앱 만들기 수강 클론 코딩 정리본 (2) | 2024.04.08 |
| CSS 총정리 (0) | 2024.03.21 |
| 마무리 문제(html,css) (1) | 2023.05.22 |
| JavaScript-2 (0) | 2023.05.22 |