🔗 Javascript(JS)란?

  • 공식명칭은 ECMA Script
  • 만든 사람 : 넷스케이프의 브랜든 아이크
  • 썬마이크로 시스템즈와 협력해서 만든 언어
  • Java와 JavaScript와는 전혀 다른 언어
  • ES6(ECMA Script 6)에서 언어적으로 완성됨.
  • 웹브라우저에서 지원하는 유일한 언어 : 과거 Basic언어
  • 구글에서 JS V8 엔진을 향상시키고, 오픈 소스로 배포

🫧 Javascript 구동시키는 2가지방법

  1. 프론트엔드(사용자PC) : 웹브라우저 JS 해석, 템플릿엔진(리액트,Vue,앵귤러)
  2. 백엔드(서버PC) : Node.js 웹서버 프로그램

 

🫧 HTML에서 Javasciprt 선언하는 3가지 방법

1. script 태그 - head,body태그

<head>
    <script>
        console.log("hello world JS in head");
    </script>
</head>

<body>
    <script>
        console.log("hello world JS in body");
    </script>
</body>


2. html 태그 속성 - onclick,href

<button type="button" onclick="alert('클릭하셨네요!')">버튼</button>
<a href="javascript:alert('클릭하셨어요?')">클릭</a>


3. 별도의 js파일 import

// 함수 선언 - myjs.js
function myFunc() {
    alert("호출하셨어요?");
}
<head>
    <script src="myjs.js"></script>
</head>
.
.
.
<body>
    <!-- 버튼 클릭시 myFunc 함수 실행 -->
    <button onclick="myFunc()">함수 실행</button>
</body>

 

🔗 문법

  • 단따옴표''와 쌍따옴표""를 구분하지 않음
  • 변수 선언할 때 타입을 따로 지정해주지 않아도 타입 추정으로 자동으로 타입을 선언함 -> 리터럴 값을 확인 후 타입 결정

🧩 데이터 타입(type)

number : 숫자(정수,실수)

In Java - int, long, short, byte, float, double

 

string : 문자열, 한 문자

In Java - string char

 

boolean : 논리형 true/false

In Java - boolean

 

undefined : 변수가 선언되지 않았을때, 값이 초기화되지 않았을때

let u_string;
console.log(u_string); -> undefined(초기화만 되고, 할당된 값이 없음)

 

object : 객체타입, 배열(리스트), Key-Value객체

In Java - 클래스 객체

 

function : 함수타입(함수형 변수)

In Java - 익명 객체, 람다식

🧩 주석

  • 한줄 주석 : //
  • 여러줄 주석 : /* */

🧩 출력

console.log("출력하고자 하는 내용");

🧩 Body 태그에 출력

  • document : JS 내장 객체변수와 상수
document.write("<h1>Hello, JS!</h1>")

🧩 변수와 상수

  • 변수 : 메모리공간에 이름을 붙여둔 것
  • 상수 : 변수로서 한번 값이 지정되면 변경 불가
  let const var
변수/상수 변수 상수 변수
재선언 X X O
재할당 O X O

재선언 - 이전에 선언된 변수 이름을 이후에 변수 선언에 사용 가능함을 의미
재할당 - 값이 할당되어 있는 변수에 새로운 값을 다시 할당할 수 있음을 의미

var v_num = 10;
var v_num = "string"; -> 재선언 가능
v_num = "string"; -> 재할당 가능

let l_num = 20;
let l_num = "string"; -> 재선언 불가능
l_num = "string"; -> 재할당 가능

const c_num = 10;
const c_num = "string"; -> 재선언 불가능
c_num = "string"; -> 재할당 불가능

🧩 prompt

사용자로부터 입력 받는 함수
  • 입력받은 내용은 String(문자열) 타입으로 반환됨
let name = prompt("이름을 입력하세요");
document.write("입력된 이름은 " + name);

🧩 confirm

prompt처럼 사용자로부터 입력받는 함수
  • 사용자는 "확인/취소"와 같은 버튼을 눌러 입력을 하고, Boolean 타입으로 반환됨
let select = confirm("파일 전송할까요?");
document.write(select);

🧩 함수 선언 방법

일반적인 함수
function func1() {};
익명 함수
const func2 = function () {};
화살표 함수
const func3 = () => {};

🧩 형변환

number 타입으로 변환
  • Number() - 소수점까지 변환해줌
  • parseInt() - 정수 부분만 변환해줌
  • parseFloat() - 소수점까지 변환해줌string 타입으로 변환
Number("123") ==> 123
Number("123abc") ==> 에러

parseInt("123") ==> 123
parseInt("123abc") ==> 123
parseInt("123.123") ==> 123

parseFloat("123.123") ==> 123.123

 

string 타입으로 변환
  • String() - 문자열로 변환연산자
String(123) ==> "123"

🧩 연산자

단항 연산자
  • 연산의 대상이 1개
  • ++, --, !, -
이항 연산자
  • 산술(+, -, *, /, %)
  • 비교(A<B)
  • 논리(>, <=, >=, !=)
  • 대입
삼항 연산자
  • A ? B : C
대입 연산자
  • =, +=, -=, *=, /=, %=

연산자의 우선순위 : 단항 > 이항 > 삼항 > 대입(=)

🧩 문자열 연결 연산자(+)

  1. 산술 연산자 10 + 20 = 30
  2. 문자열 연결 연산자 10 + "20" = "1020"
Number + String은 자동 형변환이 일어나 위와 같이 문자열로 합쳐짐

 

✈️ 출처

한국경제신문 x 토스뱅크 풀스택 훈련

'언어 > Javascript' 카테고리의 다른 글

Javascript 파헤치기 5번째  (0) 2025.01.22
Javascript 파헤치기 4번째 - ES6 문법  (1) 2025.01.21
Javascript 파헤치기 3번째  (1) 2025.01.20
Javascript 파헤치기 2번째  (2) 2025.01.17

티스토리툴바