01. 자바스크립트 소개
🟡 자바스크립트란
- 이미지 슬라이드 효과, 팝업효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어
🟡 자바스크립트 활용 범위
- IoT
- 하이브리드앱 (Web + mobile)
- 서버 개발
02. 자바스크립트의 변수
🟢 변수란?
- 데이터를 담는 공간
🟢 변수 선언 및 데이터 저장
var fruit; // 변수 선언
fruit = "apple" // 변수 초기화
var fruit = "apple"; // 변수 선언 및 초기화- 변수 선언 : 데이터를 담을 공간을 생성하는 것
- 변수 초기화 : 생성된 변수에 데이터를 전달하는 것
🟢 데이터 변경
var fruit = "apple";
fruit = "banana"; - 변수를 이미 선언했기 때문에 다시 var 작성할 필요가 없다.
🟢 변수 안의 데이터 확인 방법
- console.log(); 는 변수 안에 데이터를 확인할 때 사용하는 명령어
🟢 변수 생성 시 주의사항
- 변수명은 숫자로 시작할 수 없음
- 숫자가 중간에 오거나 끝에 오는 것은 가능
- 변수명은 최대한 자세하게 작성
- 보수해줄 때 해당 변수명이 아주 중요한 단서가 됨
- 의미가 불명확한 단어들의 조합은 피해야 함
🟢 자바스크립트 사용 방법
- script 태그 안에 src의 속성값으로 js 파일을 입력 후 html 파일과 연동
🟢 변수 데이터 확인 방법
- 우클릭 후 크롬 개발자 검사 or F12 -> console 창
03. 자바스크립트 데이터 타입
🟢 데이터 타입이란?
- 변수에 전달되는 데이터 타입에도 여러 종류가 존재한다.
🟢 8가지 데이터 타입
- String(문자열)
- 큰 따옴표, 또는 작은 따옴표 안에 작성된 데이터
- 문자열 주의사항
1) 큰 따옴표, 작은 따옴표 혼용 불가 (둘 중 하나만 일관성 있게 사용)
2) ‘ -> \ ’ 로 작성하면 문자열기호로 인식하지 않아 문자 중간에 사용가능
ex) var str1 = “Hello World”;
var str1 = “20”; // 숫자가 아닌 문자열-
Number(숫자)
- 별도의 기호 없이 숫자를 입력한 상태
-
Function(함수)
- 함수 생성: function 키워드를 사용하여 생성
- 함수 호출: 함수 안에 있는 코드를 실행시키겠다는 의미
- 매개변수: 인자로부터 전달받은 값이 들어가는 통로 / 상황에 따라 생략 가능
- 인자: 함수에게 전달하는 데이터
- return: 함수 안에 데이터를 저장할 때 사용
- 함수 데이터 호출 방법
커피머신(함수) → 원두(인자), 투입구(매개변수), 커피(return)
// 변수로 선언하여 함수 생성
var func1 = function() {
console.log("Func1");
}
func1(); // 함수 호출
// 함수 자체에 이름을 지정하여 함수 생성
function func1() {
console.log("Func1");
}
func1(); // 매개변수, 인자, return
var area = function(width, height) { // width, height : 매개변수
return width * height;
}
area(10, 20); // 10, 20 : 인자 var area = function(width, height) {
return width * height;
}
// 새 변수를 생성한 후, 그 변수를 console.log()로 감싸기
var result = area(10, 20);
console.log(result); // 200을 화면에 출력
// 함수 자체를 console.log()로 감싸기
console.log(area(10,20)); // 변수를 거치지 않고 출력-
Array(배열)
- 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리
- 배열 데이터 추출
→ 데이터의 좌표값(index)작성, 첫 번째 좌표값은 0 - 배열 데이터 변경하기
→ 인덱스를 사용하여 접근 후 새로운 데이터 대입
var fruit = ["사과", "배", "수박"];
// 출력 : ["사과", "배", "수박"]// 배열 데이터 추출
var fruit = ["사과", "배", "수박"];
console.log(fruit[0]); //0번째 인덱스의 데이터 추출-
Object(객체)
- 여러 종류의 데이터 타입 삽입 가능
- 프로퍼티(이름을 가지고 있는 데이터), 메서드(이름을 가지고 있는 함수), 데이터로 구성
- 객체가 가지고 있는 함수: 메서드 / 객체가 가지고 있는 데이터 : 프로퍼티
- 객체 데이터 출력하기
→ 코드확인 - 객체 데이터 변경하기
→ 코드확인
var student = { // student 라는 변수에 아래 객체들이 들어있음
name : "inkwon", // name이라는 프로퍼티의 문자열 데이터
age : 20, // age라는 프로퍼티의 숫자 데이터
skills : ["자바스크립트", "HTML", "CSS"], // skills라는 프로퍼티의 배열 데이터
sum : function (num1, num2) { return num1 + num2;} // sum이라는 메서드의 함수
}// 객체 데이터 출력하기
console.log(student.name); // 객체명.프로퍼티명
console.log(student['name']); // 객체명["프로퍼티명"]// 객체 데이터 변경하기
student.name = "Park"; // name 프로퍼티의 데이터 변경
console.log(student.name); // park 출력-
Boolean(불린)
- 참 또는 거짓 데이터가 들어가 있는 상태
-
undefined(정의되지 않음)
- 변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것)
-
null(널)
- 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태(빈 데이터를 지정한 것)
// undefined, null
var unde; // 변수 선언은 된 상태이지만 변수의 초기화가 되지 않음(데이터가 입력되지 않은 상태)
var empty = null; // 이 데이터는 비어있다고 명시한 것 / undefined는 뭐가 차있다 비어있다고 말해주지 않은 상태* 실습 1
// 실습 1 변수 생성
// 변수의 데이터를 웹 화면에 출력하기 위해서는 document.write(변수명)을 사용하실 수 있습니다.
// var를 사용하여 변수 fruit을 선언하고, 데이터 apple을 삽입합니다.
var fruit = "apple";
// var를 사용하여 변수 box를 선언하고, 데이터 banana를 삽입합니다.
var box = "banana";
// document.write();을 사용하여 변수 fruit과 box의 데이터를 확인합니다.
document.write(fruit, box);
// 변수 box의 데이터를 tomato로 변경합니다.
box = "tomato";
// document.write();을 사용하여 변수 box의 변경된 데이터를 확인합니다.
document.write(box);
// document.writeln();을 사용하면 출력값 사이에 공백을 넣을 수 있습니다.
document.writeln(fruite, box);⌨️ 2022.09.24. Elice Pre-training 개인 공부
