.png)
🤔 자바스크립트(JavaScrpit) ?
자바스크립트(JavaScrpit)는 객체 기반의 스크립트 언어이다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
📘 기본 타입
숫자(number)
자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다.
또한, 매우 큰 수나 매우 작은 수를 표현할 경우에는 e표기법을 사용할 수 있다.
var firstNum = 10; // 소수점을 사용하지 않은 표현
var secondNum = 10.00; // 소수점을 사용한 표현
var thirdNum = 10e6; // 10000000
var fourthNum = 10e-6; // 0.00001문자열(string)
자바스크립트에서 문자열은 큰따옴표("")나 작은따옴표("")로 둘러싸인 문자의 집합을 의미한다.
var sinS = 'single';
var doubleS = "double";자바스크립트에서는 숫자와 문자열을 더할 수도 있다.
이럴 경우 자바스크립트는 숫자를 문자열로 자동 변환하여, 두 문자열을 연견하는 연산을 수행한다.
var num = 10;
var str = "JavaScript";
document.getElementById("result").innerHTML = (num + str); // 10JavaScript논리형(boolean)
boolean 값은 참과 거짓을 표현한다.
var firstNum = 10;
var secondNum = 11;
document.getElementById("result").innerHTML = (firstNum == secondNum); // false
typeof 연산자
typeof 연산자는 피연산자의 타입을 반환하는 연산자이다.
typeof 10; // number 타입
typeof "문자열"; // string 타입
typeof true; // boolean 타입
typeof undefined; // undefined 타입
typeof null; // object 타입null 과 undefined
자바스크립트에서 null이란 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미한다.
undefined는 null과 달리 '타입'이 정해지지 않은 것을 의미한다.
따라서 자바스크립트에서 undefined는 초기화 되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다.
var num; // 초기화하지 않았으므로 undefined 값을 반환함.
var str = null; // object 타입의 null 값
typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함.객체(Object)
자바스크립트의 기본 타입은 객체(Object)이다
객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체 이다.
var dog = { name: "해피", age: 3 }; // 객체의 생성
// 객체의 프로퍼티 참조
document.getElementById("result").innerHTML =
"강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";📕 변수 선언
var
지역 및 전역 변수를 선언하는데 모두 사용 될 수 있다.
var i; // 선언, "undefined"가 저장됨
var sum = 0; // 선언과 초기화
var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
var i=0, sum=10, message=”Hello”; // 선언과 초기화를 동시에 해줄 수 있음
name = "javascript"; // 선언되지 않은 변수는 전역 변수가 됨
var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined값을 갖게 된다.
let
블록, 구문 또는 표현식 내에서만 유효하다.
let i; // 선언, "undefined"가 저장됨
let sum = 0; // 선언과 초기화
let i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
let i=0, sum=10, message=”Hello”; // 선언과 초기화를 동시에 해줄 수 있음const
블록 범위 내에 상수를 선언하는 것이다.(let과 괕은 블록 유효 범위)
상수의 값은 재할당할 수 없으며 다시 선언할 수 도 없다.
그래서 처음 선언할 때, 반드시 초기화를 해야한다.
const MY_NUM = 7;📙 함수(function)
함수(function)는 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
이러한 함수는 필요할 때 마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
function addNum(x, y) {
return x + y;
}
document.write(addNum(2, 3));
1. 함수 정의
자바스크립트에서 함수의 정의는 function 키워드로 시작 된다.
- 함수의 이름
- 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
- 중괄호({})로 둘러싸인 자바스크립트 실행문
// addNum라는 이름의 함수를 정의함.
function addNum(x, y) { // x, y는 이 함수의 매개변수임.
document.write(x + y);
}
addNum(2, 3); // addNum() 함수에 인수로 2와 3을 전달하여 호출함.2. 반환(return)문
자바스크립트에서 함수는 반환(return)문을 포함할 수 있다.
이러한 반환문을 통해 호출자는 함수에서 실행된 결과를 전달 받을 수 있다.
반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.
function multiNum(x, y) {
return x * y; // x와 y를 곱한 결과를 반환함.
}
var num = multiNum(3, 4); // multiNum() 함수가 호출된 후, 그 반환값이 변수 num에 저장됨.
document.write(num);
3. 함수 호출
정의된 함수는 프로그램 내에서 호출되어야 실행된다.
일반적인 함수의 호출은 함수의 정의문과 같은 형태로 호출할 수 있다.
function addNum(x, y) {
return x + y;
}
var sum = addNum(3, 5); // 함수 addNum()을 호출하면서, 인수로 3과 5를 전달
// 함수의 호출이 끝난 뒤에는 그 반환값을 변수 sum에 대입
