什麼是JavaScript?
- JavaScript 是世界上最流行的語言之一,是一種運作在用戶端的腳本語言 (Script 是腳本的意思)。
- 腳本語言:不需要編譯,運作過程中由 js 解釋器( js 引擎)逐行來進行解釋并執行。
- 現在也可以基于 Node.js 技術進行伺服器端程式設計。
JS 組成
ECMAScript
ECMAScript 是由ECMA 國際( 原歐洲計算機制造商協會)進行标準化的一門程式設計語言,這種語言在網際網路上應用廣泛,它往往被稱為 JavaScript或 JScript,但實際上後兩者是 ECMAScript 語言的實作和擴充。
ECMAScript:規定了JS的程式設計文法和基礎核心知識,是所有浏覽器廠商共同遵守的一套JS文法工業标準。
DOM:文檔對象模型
文檔對象模型(DocumentObject Model,簡稱DOM),是W3C組織推薦的處理可擴充标記語言的标準程式設計接口。通過 DOM 提供的接口可以對頁面上的各種元素進行操作(大小、位置、顔色等)
BOM:浏覽器對象模型
浏覽器對象模型(Browser Object Model,簡稱BOM) 是指浏覽器對象模型,它提供了獨立于内容的、可以與浏覽器視窗進行互動的對象結構。通過BOM可以操作浏覽器視窗,比如彈出框、控制浏覽器跳轉、擷取分辨率等。
定義常量和變量
- const用來定義常量。
- let和var用來定義變量,推薦使用let,作用域更加嚴格。
<!-- 行内引入 -->
<!-- <button onclick="alert('xxx')">點選我</button> -->
<!-- 内部引入 -->
<script>
var b;
b = 3;
var b = 4;
console.log(b);
var a = 1;
console.log(a);
console.log('hello world.');
// console.log('hello world.');
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// let a = 'cat';
// console.log(a);
</script>
</head>
<body>
<script>
let a;
a = 1;
// let a = 2;
console.log(a);
const PI = 3.1415926;
// PI = 3.15;
console.log(PI, typeof PI);
</script>
<!-- 外部引入 -->
<script type="text/javascript" src="./static/js/test01.js">
// console.log('xxx');
</script>
<!-- 子產品引入 -->
<script type="module">
import { info, add } from "./static/js/test02.js";
console.log(info['name']);
console.log(add(1, 2));
</script>
</body>
</html>
資料類型
JS 把資料類型分為兩類:
- 簡單資料類型 (Number,String,Boolean,Undefined,Null)
- 複雜資料類型 (object)
- typeof 檢視資料類型
<script>
// let name = prompt('請輸入你的名字');
// console.log(name, typeof name);
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(Infinity);
console.log(-Infinity);
console.log(NaN);
console.log(isNaN(123));
console.log(isNaN('hello'));
console.log('10' == 10);
console.log('10' === 10);
</script>
輸入輸出
方法 | 說明 | 歸屬 |
alert(msg) | 浏覽器彈出警示框 | 浏覽器 |
console.log(msg) | 浏覽器控制台列印輸出資訊 | 浏覽器 |
prompt(info) | 浏覽器彈出輸入框,使用者可以輸入 | 浏覽器 |
const readline = require('readline');
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
let n = -1, buf = '';
rl.on('line', line => {
if (n < 0) n = parseInt(line.trim());
else {
buf = line.split(' ').map(x => {
return parseInt(x);
});
rl.close();
}
});
rl.on('close', () => {
let s = '';
buf.sort();
for (let i = 0; i < n; i++) s += buf[i].toString() + ' ';
console.log(s);
process.exit(0);
});
轉義字元
轉義符 | 解釋說明 |
\n | 換行符,n 是 newline 的意思 |
\ \ | 斜杠 \ |
\t | tab 縮進 |
\b | 空格 ,b 是 blank 的意思 |
let name = 'cat', age = 28;
let info = `My name is ${name}, I\'m ${age} years old.`;
console.log(info);
console.log(`My name is ${name}, I\'m ${age} years old.`);
比較運算符
選擇結構和循環結構
<script>
let a = 2;
if(a > 1) {
console.log("yes");
console.log("yes");
}
else console.log("no");
for(let i = 1; i <= 10; i++)
console.log(i);
let i = 20;
while(i <= 30){
console.log(i);
i += 2;
}
</script>
相關推薦
- 【幹貨】一文詳解html和css,前端開發需要哪些技術?
- 什麼是Linux系統?我們是否要用Linux
- 學習Linux指令行,用手就行!
- 一文詳解Linux作業系統程序管理
- Linux Shell正規表達式,高效操作字元串
- 全球最大同性交友網站,github代碼版本管理
- 一文詳解git分支管理,平行宇宙中的代碼合并
- 一文詳解git版本建立與回退,程式猿居家旅行必備技能
- 一文詳解Nginx伺服器配置,反向代理和負載均衡