반응형
자바스크립트란?
동적인 웹사이트 제작시 사용되는 객체 기반의 스크립트 프로그래밍 언어
웹 브라우저 내에서 주로 사용하며, Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용
HTML 파일 연동 방법
<body>
<script src='index.js'></script>
</body>
변수
- 변경 가능한 데이터가 담길 수 있는 공간
- 변수명은 camel case로 명명하는 것이 일반적
데이터 타입
§ String
- "큰 따옴표" 또는 '작은 따옴표' 안에 작성된 데이터
- 따옴표 혼용 불가
- 문자열 내용 중 따옴표를 사용하려면 \ 사용 (ex. 'He\'s a boy')
§ Number
- 정수, 음수, 실수
- 만약 인수를 숫자로 변환할 수 없으면 NaN을 리턴
§ Function
function 키워드를 사용하여 함수 생성
// 함수 생성 방법 1
var func1 = function() {
console.log("Func1");
}
// 함수 생성 방법 2
function func1() {
console.log("Func1");
}
func1(); // 함수 호출
§ Array
비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리
§ Object
- property, method, data로 구성
- 여러 종류의 데이터 타입 삽입 가능
var student = {
name: "yumin",
age: 23,
skills: ["자바스크립트", "HTML", "CSS"],
sum: function (num1, num2) {
return num1 + num2;
}
}
console.log(student.name); // 객체명.프로퍼티명
console.log(student["name"]); // 객체명["프로퍼티명"];
§ Boolean
true, false
§ undefined
변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것)
var unde;
§ null
임의로 변수 안에 빈 데이터를 삽입한 상태 (빈 데이터를 지정한 것)
var empty = null;
데이터 타입의 프로퍼티와 메서드
§ 문자열
var str1 = "Hello World";
str1.length; // 문자열 길이 11
str1.charAt(0); // 문자 H 추출
str1.split(" "); // 공백 기준으로 문자 나눈 후 배열 [Hello, World]로 출력
§ 배열
var fruit = ["사과", "배", "포도"];
fruit.length; // 데이터 개수
fruit.push("딸기"); // 배열 뒤에 데이터 삽입
fruit.unshift("레몬"); // 배열 앞에 데이터 삽입
fruit.pop(); // 배열 뒤의 데이터 제거
fruit.shift(); // 배열 앞의 데이터 제거
§ math의 수학 연산 메서드
Math.abs(-3); // 절대값 (3)
Math.ceil(0.3); // 올림 (1)
Math.floor(10.9); // 내림 (10)
Math.random(); // 0에서 1 사이의 임의의 숫자 출력
§ 문자를 숫자로 변환하는 메서드
parseInt("20.6"); // 정수 형태의 20 변환
parseFloat("20.6"); // 실수 형태의 20.6 변환
연산자
§ 비교 연산자
console.log(10 == 20); // 값이 같다 (false)
console.log(10 === "10"); // 데이터 타입과 값이 모두 같다 - 데이터 타입 우선 비교 (false)
반복문
§ do ~ while문
while의 조건과 관계없이 do 명령을 무조건 실행부터 한다.
// do { 수행할 명령 } while ( 조건 );
var i = 12;
do {
document.write(i);
i++;
} while (i < 10);
반응형
'Devlog > Web' 카테고리의 다른 글
| [Web] 웹 기초 (HTML/CSS) (0) | 2022.06.28 |
|---|---|
| [Heroku+ClearDB] CORS error & 'PROTOCOL_CONNECTION_LOST' code H10 "App crashed" (0) | 2022.03.21 |
| Heroku 배포 - 백엔드 배포 과정 중 나를 당혹스럽게 만들었던 상황 모음집 (4) | 2022.03.18 |
| [SQL] Basic SQL Statements (0) | 2022.03.02 |
| Netlify 배포 - 빌드 에러 해결방법 (0) | 2022.02.28 |