자바스크립트란
- 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어
변수 선언 및 데이터 저장, 변경
var fruit; //변수 선언
fruit = "apple" //변수 초기화 (변수에 데이터를 전달하는 것)
var fruit = "apple"; //변수 선언 및 초기화
fruit = "banana"; //데이터 변경
console.log(fruit); //변수 안의 데이터 확인. banana출력
document.write(fruit); //변수 안의 데이터를 웹 화면에 출력.
+ 데이터 변경시, 변수를 이미 선언했다면, 해당 변수의 초기화 시에는 var을 다시 작성할 필요는 없음.
+ console.log(변수명)
+ document.write(변수명)
+ 변수명은 숫자로 시작할 수 없음. 최대한 자세히 작성하며, 의미가 불명확한 단어들의 조합은 피해서.
자바스크립트 사용 방법
- html 파일과 연동
- script 태그 안에 src의 속성값으로 js파일을 입력
<body>
<script src="index.js"></script>
</body>데이터 타입 종류
- String, Number, Function, Array, Object, Boolean, undefined, null
함수 (Function)
var func1 = function() {
console.log("Func1");
} //함수 생성 (변수에 함수 할당)
function func1() {
console.log("Func1");
} //함수 생성 (function 자체에 이름 붙이기)
func1(); //함수 호출
var area = function(width, height) {
return width*height; //함수 안에 데이터를 저장할 때 return 사용
} //매게변수 사용
area(10,20);
var result = area(10,20);
console.log(result);
console.log(area(10,20));
객체 (Object)
- 프로퍼티, 메서드, 데이터 로 구성
- 여러 종류의 데이터 타입 삽입 가능
var student = {
name : 'a',
age : 20,
skills : ['js', 'html', 'css'],
sum : function (num1, num2) { return num1 + num2;}
}
//출력
console.log(student['name']);
console.log(student.name);- 프로퍼티 (객체가 갖고 있는 데이터) : name, age, skills
- 메서드 (객체가 갖고 있는 함수) : sum
undefined, null
- undefined : 변수 안에 데이터를 입력하지 않은 상태 (데이터 없음)
- null : 임의로 변수 안에 빈 데이터를 삽입한 상태 (빈 데이터를 지정)
var unde;
var empty = null;
프로퍼티와 메서드
- 자바스크립트에서 사용자를 위해 사전에 작성된 편의 기능
//문자열 프로퍼티와 메서드
var str = 'hello world';
str.length; //문자열 길이 11
str.charAt(0); //문자열 추출. 0번째. h
str.split(' '); //공백을 기준으로 문자 나눠서, 배열로 출력
//배열 프로퍼티와 메서드
var fruit = ['사과', '배']
fruit.length; //데이터 수
fruit.push('딸기'); //배열 뒤에 데이터 삽입
fruit.unshift('레몬'); //배열 앞에 데이터 삽입
fruit.pop(); //배열 뒤의 데이터 제거
fruit.shift(); //배열 앞의 데이터 제거
//math
Math.abs(-3); //절대값
Math.ceil(0.3); //올림 1
Math.floor(10.9); //내림 10
Math.random(); //임의의 숫자 출력
parseInt('20.6'); //정수 형태의 20 변환
parseFloat('20.6'); //실수 형태의 20.6 변환
'HTML, CSS, JS' 카테고리의 다른 글
| CSS 기초 (0) | 2025.10.09 |
|---|---|
| HTML 태그 (0) | 2025.10.07 |
| 자바스크립트 DOM (0) | 2025.10.07 |
| 자바스크립트 기초2 (0) | 2025.10.04 |