반응형
JavaScript란?
- 웹페이지에 생동감을 불어넣기 위해 만들어진 언어...
- 웹의 요소 제어
- React.js, Angular.js, Vue.js와 같은 프레임워크 및 라이브러리를 사용 가능
- Node.js, Express.js 등 백엔드 개발 가능
JavaScript의 특징
- 객체기반 언어이며, HTML 문서 내에 내장되어 프로그래밍 요소를 추가할 수 있다.
- 모든 객체는 숨겨진 링크인 프로토타입을 가지고 있다.
- 인터프리터 언어로서 클라이언트 웹 브라우저에서 실행된다.
- 컨텍스트를 만들고, 자신의 Scope : 클로저를 구현하여 실행한다.
- Node.js 프레임워크를 이용해 백엔드 개발에서도 사용 가능하다.
- 객체형 / 함수형 프로그래밍 모두 표현 가능하다.
HTML 내부/외부 구분
- 내부(Inline) 스타일: HTML 요소의 style 속성을 사용하여 스타일을 직접 지정하는 것을 의미한다. 이는 해당 요소에만 적용되며, 다른 요소에 영향을 미치지 않는다.
<body>
<script src ="test.js"></script>
</body>
- 외부(External) 스타일: 별도의 CSS 파일을 생성하여 스타일을 정의하고, HTML 파일에서 <link> 태그를 사용하여 이 파일을 연결하는 방식이다. 이를 통해 여러 HTML 파일에서 동일한 스타일을 공유할 수 있다.
console.log("진짜 너무 힘들다...");
실행문은 ;으로 구분
- JavaScript에서 문장들은 세미콜론(;)으로 구분된다.
- 이는 하나의 문장이 끝났음을 나타낸다.
- 세미콜론을 생략하더라도 JavaScript 엔진이 자동으로 문장을 구분해 주지만, 명시적으로 세미콜론을 사용하는 것이 좋다.
주석
- JavaScript에서 주석은 //를 사용하여 한 줄 주석을 작성할 수 있다.
- /* */를 사용하여 여러 줄에 걸친 주석을 작성할 수도 있다.
- 주석은 코드를 설명하거나 임시로 코드를 비활성화할 때 사용된다.
// 이것이 한 줄 주석
/*
여
러
줄
주
석
*/
변수 선언
- JavaScript에서 변수는 var, let, 또는 const 키워드를 사용하여 선언할 수 있다.
- 변수는 값을 저장하고 나중에 사용할 때 참조할 수 있는 이름이다.
var 변수1 = "이렇게 하지 말래요";
let 변수2 = "변수 선언 시 let 사용 권장";
const 상수 = "상수 선언 시 const 사용";
변수 이름 규칙
- 변수 이름은 문자, 숫자, 밑줄(_), 혹은 달러 기호($)로 시작할 수 있다.
- 변수 이름은 대소문자를 구분한다.
- 예약어(Reserved Keywords)는 변수 이름으로 사용할 수 없다.
let for; // 예약어 사용 X
let Aa12; // O
let $_ASD; // O
let 12ASSD; //숫자 맨 앞 사용 X
변수 스코프
- var로 선언된 변수는 함수 스코프를 갖는다.
- 함수 내에서 선언된 변수는 해당 함수 내에서만 접근 가능하다.
- let과 const로 선언된 변수는 블록 스코프를 갖는다.
- 블록 내에서 선언된 변수는 해당 블록 내에서만 접근 가능하다.
let a = 1;
if (true){
let b = 2;
// a 접근 가능, b 접근 가능
}
// a 접근 가능, b 접근 불가능
타입 지정
- JavaScript는 동적 타입 언어이기 때문에 변수의 타입을 미리 선언하지 않는다.
- 대신 변수가 할당된 값에 따라 자동으로 타입이 결정된다.
let a = 1; // Number 타입
let b = "abc"; // String 타입
let c = true; // Boolean 타입
let d = [1, "abc", false]; // Array 타입
연산자
- JavaScript는 산술, 할당, 비교, 논리, 비트 연산자 등 다양한 종류의 연산자를 제공한다.
- 이러한 연산자들은 변수나 상수에 값을 할당하거나, 값을 조작하거나, 비교하거나, 조건을 판단하는 데 사용된다.
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
조건문
- JavaScript에서 조건문은 if, else if, else, switch 등을 사용하여 프로그램의 흐름을 제어할 수 있다.
let score = 50;
if (score >= 90){
console.log("부럽다..");
} else if (score >= 80){
console.log("B");
} else if (score >= 70){
console.log("C");
} else if (score >= 60){
console.log("D");
} else{
console.log("F");
}
반복문
- JavaScript에서 반복문은 for, while, do-while 등을 사용하여 동일한 코드 블록을 여러 번 실행할 수 있다.
- 반복문은 조건이 충족될 때까지 코드를 반복 실행한다.
while(/* 조건문 */){
// 조건문이 참일 때 계속 반복 실행
}for(/* 초기식 */; /* 조건식 */; /* 증감식 */){
// 조건식이 참일 때 계속 반복 실행
}
함수
- JavaScript에서 함수는 function 키워드를 사용하여 정의된다.
- 함수는 코드 블록을 하나의 단위로 묶어주는 역할을 하며, 재사용 가능한 코드 조각을 만들 수 있다.
- 화살표를 사용하여 함수 정의 가능 (화살표 함수 🏹 )
function sayHi(name){
console.log("Hi, " + name);
console.log("Nice to meet you!");
}
sayHi("NAME");const sayHi = (name) => {
console.log("Hi, " + name);
console.log("Nice to meet you!");
}
sayHi("NAME");
이벤트 속성
- HTML 요소에는 이벤트를 처리하는 데 사용되는 다양한 속성이 있다.
<element
onlick=""
onfocus=""
onsubmit=""
onerror=""
...
/><input type="button" onclick="alert('hi');" value="click me!"/><input type="button" onclick="console.log('button clicked!', this);" value="click me!"/>
반응형
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024 신입부원 기초 스터디] 황수민 #3주차 (0) | 2024.05.13 |
|---|---|
| [2024 신입부원 기초 스터디] 백채린 #3주차 (JS) (0) | 2024.05.13 |
| [2024 신입부원 기초 스터디] 김규현 #3주차 (0) | 2024.05.12 |
| [2024 신입부원 기초 스터디] 김지나 #3주차 (0) | 2024.05.12 |
| [2024 신입부원 기초 스터디] 김민서 #3주차 "JS" (0) | 2024.05.12 |
