본 글은 다음 pdf(~37p)를 보고 정리한 글입니다
자바스크립트란?
HTML : 웹 페이지의 기본 구조를 담당
CSS : 디자인을 담당
JavaScript : 웹 페이지가 동작하는 것을 담당
- 웹페이지에 생동감을 불어넣기 위해 만들어진 언어
자바스크립트의 역할
- 다양한 프레임워크, 라이브러리 사용
- 백엔드(서버) 개발
- 웹의 요소 제어
HTML, CSS로 처리할 수 없는 것들을 JS로 처리
자바스크립트 사용 방법
- HTML 내부
<script> 를 사용하여 코드 작성
<script>
console.log("wink");
</script>
- HTML 외부
html의 body안에
<script src = "파일.js"></script>를 사용하고
<body>
<script src="파일.js"></script>
</body>파일.js 열어서 코드 작성
자바스크립트 문법
- 자바스크립트 실행문은 세미콜론(;)으로 구분
- 주석
실행할때 무시되는 코드
// : 주석처리할때 사용
(여러줄일때는 /* , */을 사용)
//주석처리하기
/* 여러줄
주석처리하기 */
-변수선언
var 변수 : 중복 선언 가능, 재할당 가능
let 변수 : 중복 선언 불가, 재할당 가능(변수 선언 시 let 사용 권장)
const 상수: 중복선언 불가, 재할당 불가(상수 선언 시 const 사용)
※변수 이름 규칙
1) 예약어 사용 금지
2) 문자, _, $ 사용 가능
3) 숫자는 맨 앞 불가능
- 타입
컴퓨터가 처리하는 자료의 형태
기본형 : 하나의 값을 담고 있음
복합형 : 여러 값을 한꺼번에 담고 있음
| 자료형 | 설명 | |
| 기본형 | number(숫자) | 따옴표 없이 표기한 숫자를 나타냅니다. |
| string(문자열) | 작은따옴표(')나 큰따옴표(")로 묶어 나타낸 문자의 집합입니다. | |
| boolean(논리형) | 참(true)과 거짓(false)으로 표현할 수 있는 유형입니다. | |
| undefined | 자료형을 지정하지 않았을 때의 유형입니다. 변수를 선언하고 값을 정의하지 않으면 undifined가 됩니다. |
|
| null | 값이 유효하지 않을 때의 유형입니다. | |
| 복합형 | array(배열) | 하나의 변수에 여러 값을 저장하는 유형입니다. |
| object(객체) | 함수와 속성이 함께 포함된 유형입니다. | |
-연산자
산술 연산자 : 사칙연산을 다루는 가장 기본적인 연산자.
| + | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함. |
| - | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌. |
| * | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함. |
| / | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔. |
| % | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환함. |
대입 연산자 : 변수에 값을 대입할 때 사용
| = | 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입함. |
| += | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입함. |
| -= | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입함. |
| *= | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입함. |
| /= | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입함. |
| %= | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입함. |
-조건문
- if문
if (조건문 A){
조건문이 참이면 실행
} else if (조건문 B) {
조건문 A가 거짓이고 조건문 B가 참이면 실행
} else {
조건문이 모두 거짓이면 실행
}
- 반복문
- while문
while (조건문){
조건문이 참일 때 계속 반복 실행;
}
- for 문
for(초기식; 조건식; 증감식){
조건식이 참일 때 계속 반복 실행;
}
※ 증감식에서 i에 1을 더하고 싶을때, i = i + 1 대신 i++ 로 표현 가능
함수
- function을 이용하여 함수 설정
- const를 사용해서 함수를 상수로 설정도 가능
const SayHi = (name) => {
console.log("Hi, " + name);
}
sayHi("NAME");Event 속성
사용자의 동작 혹은 프로그램에서 발생하는 특정한 상황을 의미
사전에 정의된 특정 코드에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생
자바스크립트는 이벤트에 반응하여 특정 동작을 수행
대표적인 이벤트 목록
| click | 클릭시 발생 |
| change | 변동이 있을시 발생 |
| focus | 포커스를 얻었을때 발생 |
| keydown | 키를 눌렀을때 발생 |
| keyup | 키에서 손을 땟을때 발생 |
| load | 문서의 로드가 완료 되었을때 발생 |
| unload | 문서가 언로드 되었을때 발생 |
| resize | 윈도우 크기가 변경될 경우 발생 |
| mouseover | 마우스가 특정 객체 위로 올려졌을 시에 발생 |
| mousedown | 마우스를 클릭 했을때 발생 |
| mouseout | 마우스가 특정 객체 밖으로 나갔을 때 발생 |
| mousemove | 마우스가 움직였을 때 발생 |
| mouseup | 마우스에서 손을 땟을때 발생 |
| select | option 태그 등에서 선택을 했을때 발생 |
| submit | 입력양식이 제출 요청 될때 발생 |
전체 이벤트 목록은 w3schools.com에서 참고
Console API
- 개발자가 코드의 설정 지점에서 디버깅 작업을 수행할 수 있는 기능을 제공
console.debug("this is debug"); //debug 중요도로 메시지를 출력
console.log("this is log"); //일반 메시지를 출력
console.warn("this is warn"); //경고 메시지를 출력
console.error("this is error"); //오류 메시지를 출력 더 많은 예제 https://developer.mozilla.org/ko/docs/Web/API/console#usage참고
Alert
- 사용자에게 메시지를 알림
alert ("경고"); //"경고" 팝업 알림창 표시
출처:
자바스크립트 문법 -> 타입 -> 자료형 표 https://abled.tistory.com/46
#1 자바스크립트(JavaScript) - 자료형(Data Type) : 기본형
안녕하세요 여러분 에이블디입니다! 이번 시간에는 자바스크립트의 자료형에 대해 알아보려고 해요! 자료형이란 컴퓨터가 처리하는 자료의 형태를 말하는데요, 자바스크립트의 자료형은 값이
abled.tistory.com
자바스크립트 문법 -> 연산자 -> 대입연산자, 산술연산자 표 https://www.tcpschool.com/javascript/js_operator_assignment
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
Event속성 -> 대표적인 이벤트 목록표 https://dinfree.com/lecture/frontend/123_js_3.html
자바스크립트 기초
자바스크립트에서의 이벤트 처리와 DOM 활용을 배웁니다.
dinfree.com
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024 신입부원 기초 스터디] 김지나 #3주차 (0) | 2024.05.12 |
|---|---|
| [2024 신입부원 기초 스터디] 김민서 #3주차 "JS" (0) | 2024.05.12 |
| [2024 신입부원 기초 스터디] 김수아 #3주차 (0) | 2024.05.12 |
| [2024 신입부원 기초 스터디] 이종윤 #3주차 (JS 첫번째 수업) (0) | 2024.05.10 |
| [2023 신입부원 기초 스터디] 박승환 #8주차 마지막 JS (0) | 2023.07.03 |
