01 자바스크립트 기본 용어와 출력 방법
- 자바스크립트 기본 용어
- 표현식 : 값을 만들어 내는 간단한 코드
273;
10 + 20 + 30 *2;
var name = '파'+'이'+'썬';
alert('Hello JavaScript');- 문장 : 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위
273
10+20+30*2
'JavaScript'- 종결 : 문장 마지막에 세미콜론(;) 또는 줄바꿈
- 자바스크립트 기본 용어
- 키워드 : 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어
- 식별자 : 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어
- 키워드를 사용하면 안된다
- 특수 문자는 _과 $만 허용
- 숫자로 시작하면 안됨
- 공백을 입력하면 안됨
식별자 생성 관례
- 생성자 함수 이름은 항상 대문자로 시작
- 변수, 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작
- 여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로 한다
식별자 종류
| 구분 | 단독으로 사용 | 다른 식별자와 함께 사용 |
| 식별자 뒤에 괄호 없음 | 변수 | 속성 |
| 식별자 뒤에 괄호 있음 | 함수 | 메서드 |
-주석 : 프로그램 진행에 전혀 영향을 주지 않는 코드로, 프로그램을 설명하는 데 사용
| 한 행 주석 처리 | // 주석문 |
| 여러 행 주석 처리 | /*주석문 주석문 */ |
- 자바스크립트 출력
- 가장 기본적인 출력 방법 : alert() 함수를 사용해 웹 브라우저에 경고 창을 띄우기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>화면 출력</title>
<script>
alert('Hello JavaScript!');
</script>
</head>
<body>
</body>
</html>
02 자료형과 변수
- 자료형
- 숫자 : 가장 기본적인 자료형, 정수와 실수 구분X
03 조건문과 반복문
- 반복문
- while 반복문 : 가장 기본적인 반복문
if조건문과 형식이 비슷하지만, 불(bool) 표현식이 참이면 중괄호 안 문장을 계속 실행
while(조건){
문장
}
<title>While 반복문</title>
<script>
//변수 선언하고 초기화
var i = 0;
var array = ['가', '나', '다', '라'];
//반복문 수행(i가 배열 요소가 3개..3보다 작을 때까지 반복)
while(i < array.length){
//출력
alert(i + '번째 출력 : ' + array[i]);
i++; //i 변수 값을 1씩 증가
}
</script>가, 나, 다, 라 순서대로 나온다
- 반복문
- for 반복문
: for 반복문은 원하는 횟수만큼 반복하고 싶을 때 사용
(1) 초기식을 비교
(2) 조건식을 비교, 조건이 거짓이면 반복문 종료
(3) 문장을 실행
(4) 종결식을 진행
(5) 앞의 (2)단계로 이동
for(초기식; 조건식; 종결식){
문장
}
<script>
//for 반복문으로 출력하기
var array = ['가', '나', '다'];
for(var i = 0; i < array.length; i++){
//출력
alert(i + '번째 출력 : ' + array[i]);
}
</script>0번째 출력 : 가, 1번째 출력 : 나, 3번째 출력 : 다 순서대로 출력된다
<title>1부터 100까지 합 구하기</title>
<script>
//변수 선언하고 초기화
var output = 0;
for(var i = 1; i <= 100; i++){
output += i; //output = output + i;
}
//출력
alert(output);
</script> <script>
//while문으로 변경
var i = 1;
var output = 0;
while(i <= 100){
output+=i;
i++;
}
alert(output);
</script>5050이 출력된다!
04 함수
- 선언과 호출, 실행 우선순위
- 선언과 호출
함수 : 코드 집합을 나타내는 자료형
익명 함수 생성 : 함수 이름을 입력하지 않고 만들기
선언적 함수 생성 : 함수 이름을 입력해서 만들기
| 익명함수 | function() { } |
| 선언적 함수 | function 함수() { } |
<script>
//익명 함수를 선언한다
var x = function(){
alert('함수_A');
alert('함수_B');
}
alert(typeof(x)); //function이라고 출력됨
//선언적 함수 선언 및 호출
function y(){
alert('함수_A');
alert('함수_B');
}
alert(y); //y함수에 담긴 내용이 출력
alert(typeof(y)); //타입인 function이 출력
</script>
- 실행 우선순위 : 가장 마지막에 입력된 값이 저장
※선언적 함수와 익명 함수를 함께 사용할 때 모든 코드를 읽기 전에 선언적 함수를 먼저 읽음※
var x = function(){alert('함수_A');}
function x(){alert('함수_B');}
//함수 호출
x(); //선언적 함수가 먼저 실행되고, 익명의 함수가 실행이 되었다.
//함수_A가 출력됨
- 매개변수 : 함수의 괄호 안에 집어넣어 함수 쪽에 추가적인 정보를 전달하는 것
- 리턴 값 : 함수를 실행한 결과를 반환한 값
function 함수 이름(매개변수, 매개변수, 매개변수){
//함수 코드
//함수 코드
//함수 코드
return 반환 값;
}
//함수 매개변수와 반환값
function s(x){
return x*x;
}
alert(s(3)); //값을 넣어서 함수 호출그러면 9가 출력된다
- 콜백 함수 : 매개변수로 전달되는 함수
<title>콜백 함수 사용</title>
<script>
//함수 선언
function callTenTimes(callback){
for(var i=0; i<10; i++){
callback(); //함수 호출
}
}
//변수 선언
var callback = function(){
alert('함수 호출');
}
//함수 호출
callTenTimes(callback);
</script>함수호출이 10번 나온다
05 객체
- 객체 개요
- 객체는 자료형 여러 개를 한 번에 저장
- 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용
- 객체 뒤의 대괄호를 사용해 키를 입력하면 객체 속성에 접근
- 객체 뒤에 점(.)을 찍어 객체 속성에 접근
- for in 반복문 : 객체 요소를 하나씩 살펴볼 수 있음
for(var 키 in 객체){
문장
}
<title>객체 선언하고 출력</title>
<script>
//객체 선언
var product = {
제품명 : '7D 건조 망고',
유형 : '당절임',
성분 : '망고, 설탕, 메타중아황산나트륨, 치자황색소',
원산지 : '필리핀'
};
for(var i in product){
alert(i + ' : ' + product[i]);
}
</script>제품명, 유형, 성분, 원산지 정보가 순서대로 출력된다
- 속성과 메서드
- 요소(element) : 배열에 있는 값 하나하나
- 속성(property) : 객체에 있는 값 하나하나
- this 키워드 : 객체에 있는 속성을 메서드에서 사용하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야함
<title>속성과 메서드 호출</title>
<script>
//객체 선언
var person = {
name : '윤인성',
eat : function(food){
alert(this.name + '이 ' + food + '을/를 먹습니다.');
} //this : 자기 자신의 객체 키를 접근할 때 사용
}
//메서드를 호출
person.eat('밥');
</script>
'HTML' 카테고리의 다른 글
| [JavaScript] 문서 객체 모델 (0) | 2021.11.24 |
|---|---|
| [CSS] 반응형 웹 (0) | 2021.11.04 |
| [CSS] 레이아웃 구성 (0) | 2021.10.28 |
| [CSS] CSS3 속성 (0) | 2021.10.11 |
| [CSS] CSS3 기초 : 선택자와 단위 (0) | 2021.10.10 |
