天天看點

Javascript簡介和基礎資料類型

作者:黑貓程式設計

什麼是JavaScript?

  • JavaScript 是世界上最流行的語言之一,是一種運作在用戶端的腳本語言 (Script 是腳本的意思)。
  • 腳本語言:不需要編譯,運作過程中由 js 解釋器( js 引擎)逐行來進行解釋并執行。
  • 現在也可以基于 Node.js 技術進行伺服器端程式設計。
Javascript簡介和基礎資料類型

JS 組成

Javascript簡介和基礎資料類型

ECMAScript

ECMAScript 是由ECMA 國際( 原歐洲計算機制造商協會)進行标準化的一門程式設計語言,這種語言在網際網路上應用廣泛,它往往被稱為 JavaScript或 JScript,但實際上後兩者是 ECMAScript 語言的實作和擴充。

Javascript簡介和基礎資料類型

ECMAScript:規定了JS的程式設計文法和基礎核心知識,是所有浏覽器廠商共同遵守的一套JS文法工業标準。

DOM:文檔對象模型

​ 文檔對象模型(DocumentObject Model,簡稱DOM),是W3C組織推薦的處理可擴充标記語言的标準程式設計接口。通過 DOM 提供的接口可以對頁面上的各種元素進行操作(大小、位置、顔色等)

BOM:浏覽器對象模型

​ 浏覽器對象模型(Browser Object Model,簡稱BOM) 是指浏覽器對象模型,它提供了獨立于内容的、可以與浏覽器視窗進行互動的對象結構。通過BOM可以操作浏覽器視窗,比如彈出框、控制浏覽器跳轉、擷取分辨率等。

定義常量和變量

  • const用來定義常量。
  • let和var用來定義變量,推薦使用let,作用域更加嚴格。
Javascript簡介和基礎資料類型
<!-- 行内引入 -->
    <!-- <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 檢視資料類型
Javascript簡介和基礎資料類型
<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.`);           

比較運算符

Javascript簡介和基礎資料類型

選擇結構和循環結構

<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伺服器配置,反向代理和負載均衡

繼續閱讀