13. 자바스크립트
13-1 자바스크립트로 무엇을 할까
13-2 웹크라우저가 자바스크립트를 만났을 때
웹문서 어디든지 위치할 수 있지만 주로</body>태그 앞에
13-3 자바스크립트 용어와 기본 입출력 방법
자바 스크립트 언어의 큰 줄기는 식과 문이다.
식(표현식): 연산식,문자열,숫자
문(명령): 문의 끝에는 ;을 붙여 구분. 조건문,제어문 등,넓은 의미에서 문은 식을 포함
-
알람창 :단순 메시지
alert("메세지")alert("안녕하세요")
-
확인창 :확인 취소 버튼
confirm("메세지")var reply=confirm("정말 이미지를 바꾸시겠습니까?");
-
프롬프트: 텍스트 필드 입력받음
prompt("메세지")var name = prompt("이름을 입력하세요.");
-
document.write() :웹브라우저 화면 출력 담담
따옴표 안에 html태그 사용가능, 표시할 내용과 변수 섞기 가능
var name = prompt("이름을 입력하세요."); document.write("<b><big>" + name + "</big></b>님, 환영합니다.");
- console.log():()안의 내용을 콘솔창에 출력
html 태그 사용 불가var name=prompt("이름을 입력하세요."); console.log(name + "님, 안녕하세요.");
13-4 자바스크립트 스타일 가이드
코드 주석 작성하기
공백 으로 읽기 쉽게(한줄// 여러줄 /*)
세미콜론으로 문장 끝내기
들여쓰기
식별자 규칙 지키기 (하이픈이나 언더바 없이 두단어 붙여 사용할 경우 첫번째 단어는 소문자 두번째 단어는 대문자가 일반적)
14. 자바스크립트 기본 문법
14-1 변수 알아보기
변수와 상수
나이 = 올해 연도 - 태어난 연도 + 1
(변수) (변수) (변수) (상수)변수 선언 규칙
1.변수 이름은 영어문자와, 언더바, 숫자사용
2.자바스크립트는 대문자와 소문자를 구별하며 예약어는 변수이름으로 사용 불가
3. 여러 단어를 연결한 변수 이름은 중간에 대문자 소문자 섞기
ex) totalArea TotalArea Total_Area
4. 변수 이름은 의미있게 작성
변수 선언하기
- var 뒤에 변수 이름 작성
- var를 한번만 쓰고 여러개의 변수 한번에 선언도 가능
변수에 값 할당
= 기호 다음에 값을 저장
- 변수 선언과 값 할당 따로
var birthyear; birthyear = 1995;- 변수 선언과 값 할당 같이
var birthyear = 1995;
나이 계산 프로그램
var birthYear;
var age;
var currentYear = 2022;
birthYear = prompt("태어난 연도를 입력하세요.(yyyy)","");
age = currentYear - birthYear +1 ;
document.write(currentYear + "년 현재<br>");
document.write("<b><big>" + birthYear + "</big></b>년에 태어난 사람의 나이는" + age + "세입니다.")
14-2 자료형 이해하기
자료형이란 처리할 데이터의 형태이다.
1.숫자
2.문자열
문자열 안에 다른 문자열 넣으려면 큰 따옴표 중복되지 않게 작은 따옴표사용
3.논리형(불린유형)
flase/true
4.배열
배열은 하나의 변수에 여러개의 값을 지정할 수 있다.
var season = ["봄" , "여름" , "가을" , "겨울"]; 인덱스 0 1 2 3
5.객체
6.undefined
자료형 지정 안됨
7.null
유효하지 않은 값이 지정됨
원래 목적대로 사용되지 않음
14-3 연산자 알아보기
1. 산술연산자
증가,감소 연산자를 피연산자 앞뒤 어디에 붙인냐에 따라 값이 차이난다.
2. 할당 연산자 (대입 연산자)
할당 연산자와 산술연산자를 합쳐 하나의 할당 연산자로 표시
3. 연결 연산자
사칙연산 더하기와 같은 +로 문자열 연결
document write (birthyear + "년에 태어난 사람의 나이는 " +age + "세 입니다.");두개의 변수와 문자열 2개를 연결연산자 + 로 합침
4. 비교 연산자
===와 ====의 차이 (대부분 === 사용)
3 == "3" true
3 === "3" false
3 != "3" true
3 !== "3" false
아스키 값으로 문자열도 비교
소문자 아스키 값 > 대문자 아스키 값
3. 논리 연산자
