자바스크립트 : Front-End 개발 언어
HTML로 만든 문서에 동작을 넣는 것
● .html 파일에 <script> </script> 태그 부분에 작성
● <script> 태그는 <head> 태그 영역 또는 <body> 영역에 작성하는데 수업에서는 <head> 부분에 선언
코드 입력 시 주의사항
- 대소문자를 구분하여 작성한다
- 코드 한 줄을 작성한 후 세미콜론(;)을 쓴다
- 문자형 데이터를 작성할 때 따옴표 겹침을 주의한다
큰따옴표(")를 한 문장에서 겹쳐서 쓰면 오류나 나옴
작은따옴표(')나 백슬래시(\)를 사용하여 구분하여 작성
- 괄호의 짝을 잘 맞추어 사용한다
document.write( )를 사용하여 문서에 출력
<script> document.write("안녕하세요")</script>
● 변수
: 데이터를 담는 그릇으로 문자형, 숫자형, 논리형, null이 있다
- 자바에서는 숫자이냐 문자이냐에 따라 사용하는 자료형이 달랐는데 자바스크립트에서는 var 또는 let로 변수를 선언하면 알아서 자료형을 인식한다 ( 수업에서는 let 사용)
let s = "JavaScript"; // 문자형은 ""로 씀, 숫자도 ""에 있으면 문자형
let num = "100"; let num2 = Number(num); // 문자형을 숫자형에 넣으면 숫자로 바꿔줌
let tag = "<h1> String </h1>"; // let과 var는 다르긴 하나 let 더 많이 씀
● 변수 선언
자바와 비슷하게 영문과 숫자, 특수문자( _ ,$)만 사용가능하며 카멜표기법 사용
- 예약어는 사용할 수 없고 되도록 의미를 알 수 있게 작성, 대소문자 구분
변수의 자료형을 확인하고 싶을 때 변수명 위에 마우스커서를 올리면 자료형을 보여주고
출력하여 확인할 때는 typeof를 사용한다
let num = 100;
let str = "자바 스크립트";
document.write(typeof num3, "<br>"); //"<br>" 줄바꿈
document.write(typeof str);
● 연산자
산술 연산자 : + - * / %
문자 결합 연산자
대입 연산자 : = += -= *= /= %=
증감 연산자 : ++ --
비교 연산자 : < > <= >= == != === !==
=== 과 !== 은 자료형도 일치하는지 확인한다
문자형 "10"과 숫자형 10은 숫자는 같지만 자료형이 다르기 때문에 false
논리 연산자 : ||(or) &&(and) !(not)
삼항 조건 연산자: 조건식? true일 때 출력할 코드 : false일 때 출력할 코드
let age = 10;
let result = age <= 20 ? "성인입니다" : "미성년자입니다";
document.write(result);
값을 처음에 입력하는 것이 아닌 사용자에게 입력받으려고 할 때에는
prompt("질문", "기본응답");
let age = prompt("몇 살인가요?", "0");
let result = age >= 20 ? "성인입니다" : "미성년자입니다";
document.write(result);
'코딩 배우는 중 > HTML_CSS_JS' 카테고리의 다른 글
| JS : 객체 (0) | 2023.11.20 |
|---|---|
| JS : 배열 (0) | 2023.11.20 |
| HTML : 폼 만들기 (0) | 2023.02.25 |
| HTML : 이미지 삽입, 링크 (0) | 2023.02.25 |
| HTML 기본 , 텍스트 태그 (0) | 2023.02.25 |