[Javascript]
1. 자바스크립트
HTML : 브라우저에 표시할 내용 나열
CSS : HTML 요소에 디자인 접목
Javascript : 정적인 웹 문서에 동작을 부여(동적)
@ 1) 객체 기반의 스크립트 프로그래밍 언어
웹브라우저 내에서 많이 사용, 다른 응용프로그램의 내장 객체에도 접근 가능한 기능있음.
웹 브라우저에는 javascript 엔진 (번역해서 실행시켜주는 역할)이 탑재되어 있다.
브라우저가 아닌 환경에서 실행시키고 싶으면 엔진을 설치해야함
(node검색 > 엔진 다운받아 설치 가능)
2. 기본사항
1) 작성 방법
- HTML 문서안에 <script> 태그안에 작성
- 확장자가 .js 파일에 js코드 작성하고 html문서에 연결.
<script src="js파일경로"></script>
2) 주석
// 한줄 주석
/* 여러줄 주석 */
3. 변수
int num 10; double num 10.123;
var num = 10; var num = 10.123;
* ES6 버전부터 바뀐 : let, const
4. 데이터 타입
: 값의 종류들
1) 숫자형 Number
정수: 10진수 그냥쓰면됨
16진수 0x로 시작, 0~9 A~F (주로 색상값 나타낼때 사용)
실수: 소수점 있는수
2) 문자형 String
문자열 홑/겹 따옴표로 묶은 형태
3) 논리형 Boolean
true / false 두가지 경우의 값을 갖는 형태
4) undefined
: 변수를 선언만하고, 초기화하지 않는것 출력
함수 인자값 없이 호출되는 경우
존재하지 않는 속성을 접근한 경우
5. 연산자
1) 산술 : + _ * / %
2) 대입 : =
3) 복합대입 : += -= *= /= %=
4) 증감 : ++ -- (전위형, 후위형)
5) 비교 : < <= => >
== : 데이터의 타입 관계없이 같으면 true 10=="10" true
=== : 데이터의 타입도 같아야 true 10 === "10" false
!= : 데이터 타입 관계없이 같으면 false
!== : 데이터 타입도 일치해야 false
6) 논리 : || or / && and / !
7) 삼항 : var b = (5 < 4) ? 50 (참일때): 40; (거짓일때)
<!-- js01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 자바스크립트 작성 영역
// #1. console.log() (-> 브라우저 개발자도구의 console탭에 출력)
//console.log("hello!!!");
// #2. alert() (-> 브라우저에 경고창으로 띄우기)
//alert("안녕하세요");
// #3. document.write() (-> 브라우저 화면에 출력하기)
document.write("<h1>hello js</h1>");
var name = "홍길동";
var age = 30;
var play = false;
console.log(name);
console.log(typeof name); // 해당 변수의 타입 리턴
console.log(typeof age);
console.log(typeof play);
var test;
console.log(test);
</script>
</body>
</html>
6. 형변환
: 데이터 타입을 변환 시키는 작업
# 자동형변환
1) 숫자 + 문자 => 문자
2) 불린 + 문자 => 문자
3) 불린 + 숫자 => 숫자 (true = 1, false = 0)
(*제일많이씀*) 숫자 -> 문자 : 10+"" -> "10"
# 강제형변환
1) 문자 -> 숫자
정수 : parseInt()
Number()
실수 : parseFloat()
Number()
2) 숫자 -> 문자
일반문자 : String()
16진수 : .toString(진수)
실수문자: .toFixed(소수점자리수)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//자동형변환
var a = "30";
var res = 1 + a + 10; //13010로 나옴
var res2 = a + 1 + 10; //30110
console.log(res2);
res = 2 + true;
console.log(res);
//
//강제 형변환
//문자 -> 숫자
var num = "123.456";
res3 = parseInt(num); //정수로 변환 소수점 x
console.log(res3);
res4 = Number(num); // 숫자로 변환 소수점 o/x
console.log(res4);
res5 = parseFloat(num); //실수로 변환
console.log(res5);
//숫자 -> 문자
var num = 123.343
res6 = String(num);
console.log(res6);
console.log(typeof res6);
</script>
</body>
</html>
'P-Language > [Javascript]' 카테고리의 다른 글
| [Javascript] 12. 자바스크립트 변수 선언 방식 (0) | 2022.06.08 |
|---|---|
| [Javascript] 11. 함수 리터럴(function literal)과 익명 함수(anonymous function) (0) | 2022.06.08 |
| [Javascript] 10 - 함수 function (0) | 2022.06.08 |
| [Javascript] 9 - 배열 array (0) | 2022.06.08 |
| [Javascript] 7 - 입력문과 8. 제어문 (0) | 2022.06.08 |