[2024 신입부원 기초 스터디] 김지나 #3주차

1. 자바스크립트란?

: 웹페이지에 생동감을 불어넣기 위해 만들어진 언어

: HTML, CSS로 처리할 수 없는 것들을 JS로 처리

: 다양한 프레임워크, 라이브러리 사용(React, Vue)

: 백엔드 개발(Node.js-Express.js)

 

2. 자바스크립트 사용 방법

01) HTML 내부

: <script> 태그 이용

<script>
	console.log("Hello World!")
</script>

 

02) HTML 외부

: src 속성 이용

<script src="/path/to/script.js"></script> <!-- index.html -->

console.log("Hello World!") //script.js

 

3. 자바스크립트 문법

01) 실행문은 세미콜론(;)으로 구분

 

02) 주석

//주석
/* 여러줄 
주석 */

 

03) 변수 선언

var 변수1 = ""; //권장되지 않음
let 변수2 = ""; //변수 선언시
const 상수 = ""; //상수 선언시

 

04) 변수 이름 규칙

- 예약어 사용 금지(if, for ...)

- 문자, _, $, 숫자 사용 가능

- 숫자는 맨 앞 불가능

 

05) 변수 스코프

let a = 1;
if (true) {
	let b = 2;
    // a 접근 가능, b 접근 가능
}
// a 접근 가능, b 접근 불가능

 

06) 타입

let a = 1; // Number타입
let b = "abc"; //String 타입
let c = true; // Boolean 타입
let d = [1, "abc", false] // Array 타입

 

07) 연산자

let a;
a = 2; //대입 연산자
console.log(a + 1); //산술 연산자 더하기
console.log(a - 1); //산술 연산자 빼기
console.log(a * 1); //산술 연산자 곱하기
console.log(a / 1); //산술 연산자 나누기
console.log(a % 1); //산술 연산자 나머지
console.log(a == 1); //같으면 true
console.log(a != 1); //다르면 true
console.log(a < 1); //a가 1 미만이면 true
console.log(a <= 1); //a가 1 이하면 true
console.log(a > 1); //a가 1 초과면 true
console.log(a >= 1); //a가 1 이상이면 true

 

08) 조건문

if (조건문) {
	실행문
} //기본구조

if (조건문) {
	실행문
}	else if (조건문) {
	실행문
}	else {
	실행문
}

 

09) 반복문

while (조건문) {
	실행문
} // while문
for (초기식; 조건식; 증감식) {
	실행문
} // for문

 

4. 함수

: 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출 가능

function sayHi(name) {
	console.log("Hi, " + name);
    console.log("Nice to meet you❤️");
} //함수선언

sayHi("NAME"); //함수호출

 

5. Event 

: 웹페이지에서 어떤 사건을 발생시키는 것

<element
	onclick="" //버튼을 클릭했을 때 수행
    onfocus="" //요소가 focus를 받을 때 수행
    onsubmut="" //양식을 제출했을 때 수행
    onerror="" //외부파일로드 중 에러 발생시 수행
    ...
/>