JavaScript快速入门学习笔记

程序员文章站 2022-07-12 15:37:29

...

JavaScript快速入门学习笔记

JavaScript简述

HTML 可以为网页搭建结构并提供内容，CSS 可以为网页提供了样式和排版。有了 HTML 和 CSS 这两个标记型语言，一个完整的网页可以制作完成并呈现到用户浏览器上，那么，为什么还需要学习 JavaScript 呢？相比 HTML/CSS，JavaScript 是一个真正意义上的 Web 前端语言，它是专门为 Web 而生的面向对象的客户端脚本语言。JavaScript语言可以直接嵌入网页运行，实现动态特效、表单验证、创建Cookies、修改 HTML 等一系列高级功能。按照 HTML/CSS/JavaScript 这三种技术在网页中的功能，我们这样总结它们各自的功能：HTML 实现网页的结构层、CSS 实现网页的表现层、JavaScript 实现网页的行为层。

JavaScript 只运行在 web 前端，是一种浏览器语言，在此基础上拓展为多种前端框架。

JavaScript组成

完整的 ECMAScript 标准并不仅仅是 JavaScript，还包括了 DOM 和 BOM。JavaScript 描述了该语言的语法和基本对象；DOM（文档对象模型）描述了处理网页内容的方法和接口；BOM（浏览器对象模型）描述了与浏览器进行交互的方法和接口。
JavaScript快速入门学习笔记

JavaScript使用位置

JS 脚本可以放置在三个位置，包括 HTML 的 head 区域、HTML 的 body 区域、以及外部 JS 文件中。
当放置在 HTML 页面中时，不管是head 还是 body 区域，都需要使用 <script></script> 标签包含起来。

JS的每条语句之间用分号 ; 隔开，代码块用花括号 { } 括起来，代码块缩进为4个空格。

JavaScript变量

变量可以是任意的数据类型，包括数字、字符串、数组、词典等，变量（variable）是存储信息的“容器”。通过变量可以实现复杂运算和高级编程。JS 的变量需要提前声明，并且需要通过关键字 var 来实现（variable的缩写），JS 是一种动态脚本语言，不需要制定变量的数据类型，声明之后直接指定值即可。
JavaScript 解释程序遇到未声明过的标识符时，用该变量名创建一个全局变量，并将其初始化为指定的值，这是该语言的便利之处（其实Python语言就无需声明，直接采用上面的语法），不过如果不能紧密跟踪变量，这样做也很危险，最好的习惯是像使用其他程序设计语言一样，总是声明所有变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
</head>
<body>
<script>
    var a; // 变量申明，JS中没有赋值的变量，默认值为undefined
    var x = 1; // 变量申明并赋值
    var y = 2;
    var z = x + y;
    var name = "xiaoming"; // 变量相当于一个容器，可以映射不同数据类型的内容，包括数字、字符串、数组等
    var age = 18;
    var b = 2, c = 3, d = 4; // 一个JS语句多个变量赋值
    var f = function myFisrtFunction () {  // 变量也可以是一个函数
    }
    document.write(z + "<br>");
    document.write(name + ' is ' + age);
</script>
</body>
</html>

document.write();
console.log()；

二者的区别是 document.write() 是将值输出到浏览器页面；而 console.log() 是将值输出到 console 日志中。

ECMAScript 中有5种简单数据类型(也称为基本数据类型)：Undeﬁned、Null、Boolean、Number和 String；
还有1种复杂数据类型：Object。
typeof(变量) 可以用于检测变量的类型。

JavaScript数字

JavaScript数字（Number）对象只有一种数据类型，就是 Number 类型，不区分整数、浮点数等。数字对象可以支持十进制、八进制、十六进制、科学计数法等，可以实现的算术运算包括加法、减法、乘法、除法、求余、累积、递减等。另外，由于 JavaScript 类似 Java 和 Python 等面向对象语言，所以数字对象也具备属性和方法。

关于 JS 数字的存储方式和精确度，JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，所有数字都存储为根为 10 的 64 位（8 比特）的浮点数。因此，整数最多为 15 位，小数的最大位数是 17，但是浮点运算并不总是 100% 准确。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Number数字对象</title>
</head>
<body>
<script>
    //JS中数字不分为整数、浮点数等区别，统一为Number对象
    var a = 10; // 整数，最多为15位
    var b = 3.14; // 浮点数
    var c = 123e5; // 科学计数法，12300000
    var d = 0.1 + 0.2; // 浮点数相加不精确，最大位数17位
    var e = 0123; // 八进制在数字前面加0
    var f = 0x1F; // 十六进制在数字前面加f

    // 算术运算
    var x = 1;
    var y = 2;
    var z1 = x + y; //加法运算
    var z2 = x - y; //减法运算
    var z3 = x * y; //乘法运算
    var z4 = x / y; //除法运算
    var z5 = x % y; //求余运算
    var z6 = x ++; //累加运算
    var z7 = x --; //递减运算

    // 算法方法
    var g = parseFloat("0.123abcdef");
    document.write(g+'<br>');

    var h = parseInt("100px");
    document.write(h+"<br>");

    // HTML输出
    document.write(z1 + '<br>')
    document.write(z2 + '<br>')
    document.write(z3 + '<br>')
    document.write(z4 + '<br>')
    document.write(z5 + '<br>')
    document.write(z6 + '<br>')
    document.write(z7 + '<br>')
</script>
</body>
</html>

JavaScript字符串

JavaScript 字符串（String）对象用于处理字符串信息，字符串可以存储一系列的字符信息，例如 hello,world ，与Python语言相同，JS的字符串采用单引号和双引号括起来。字符串对象具备一系列属性和方法，可以实现字符串相加、查询、匹配、替代等处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript String字符串对象</title>
</head>
<body>
<script>
    // 字符串创建
    var s = 'Hello';
    var x = 'World!';
    var k = "what's your name?";

    // 字符串相连
    var y = s + x;

    // 字符串索引
    s[0];
    s[1];
    x[0];
    x[1];

    // 字符串长度
    var l1 = s.length;
    var l2 = x.length;

    // 字符串处理
    var a = y.toUpperCase(); //全部转换为大写；
    var b = y.toLowerCase(); //全部转换为小写；

    // 字符串搜索
    var c1 = y.indexOf('o'); // 返回搜索字符所在的下标位置
    var c2 = y.lastIndexOf('o'); // 返回搜索字符所在的下标位置

    // 字符串截取
    var d1 = y.substr(0, 3);  // 返回字符串区间内容
    var d2 = y.substring(0, 3);  // 返回字符串区间内容
    var d3 = y.slice(0, 3);  // 返回字符串区间内容

    // HTML输出
    document.write(s+'<br>')
    document.write(x+'<br>')
    document.write(a+'<br>')
    document.write(b+'<br>')
    document.write(c1+'<br>')
    document.write(d1+'<br>')

    // 字符串应用（邮箱信息截取）
    function getMail(){
        var mail = prompt("登录邮箱");  // 通过prompt方法获取用户输入
        var pos = mail.indexOf("@");  // 获取@字符的位置
        var name = mail.slice(0, pos);  // 获取开头到pos的字符
        var address = mail.substr(pos+1); // 获取pos及之后的字符(含pos自身)，可以通过加1去除自身字符
        document.write("您输入的用户名是: "+name+"<br>");
        document.write("您输入的邮箱域名是: "+address+"<br>");
    }
    getMail();  // 执行函数


    // 字符串应用（网址信息截取,获取后缀名）
    var url = "http://www.baidu.com/index.html";

    function getFileFormat(url) {
        var pos = url.lastIndexOf(".");  // 获取.的位置
        return url.substr(pos+1);  // 通过substr返回后缀名
    }

    var formatName = getFileFormat(url);  // 调用函数并赋值给变量formatName
    document.write("文件后缀为: "+ formatName);  // 打印后缀名到html
</script>
</body>
</html>

JavaScript数组

JavaScript 数组（Array）对象可以存储一系列信息的“容器”，包括数字、字符串、数组、布尔值等。与字符串类似，数组对象有一系列的属性和方法，可以实现相加、索引、截取等操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Array数组对象</title>
</head>
<body>
<script>
    // 创建数组
    var a = [1, 2, 3, 4, 5];  // 纯数字的数组
    var b = [1, 'a', 2, 'b', 3, 'c'];  // 既有数字和字符串的数组
    var c = [10, 20, 'hello', 'arry', [1,2,3], true];  // 有数字、字符串、数组、布尔值的数组

    // 数组索引
    var d = a[0];
    var e = b[1];
    var f = c[4][0];

    // 数组长度
    var g = a.length

    // 数组截取
    a.slice(0,2);
    b.slice(1,3);

    // 数组相连
    var h = a.concat(b);

    // 数组搜索
    a.indexOf(5);
    a.lastIndexOf(5)
    c.indexOf('hello');

    // 数组赋值(修改）
    a[0] = 10;
    b[1] = 'hello';

    // HTML输出
    document.write(a + '<br>')
    document.write(b + '<br>')
    document.write(c + '<br>')
    document.write(d + '<br>')
    document.write(e + '<br>')
    document.write(f + '<br>')
    document.write(g + '<br>')
    document.write(h + '<br>')
</script>
</body>
</html>

JavaScript字典

JavaScript 字典对象通过映射的方式实现一系列键值对的存储。字典可以访问、修改、判断。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript对象(字典)</title>
</head>
<body>
<script>
    // 创建对象
    var dict =
        {
            a:1,
            b:2,
            c:'hello',
            d:'world',
        };
    // 访问属性
    var e = dict.a;
    var f = dict.b;

    // 修改属性
    dict.c = 'hi';
    var g = dict.c;

    // 属性判断
    var h = 'a' in dict;
    var i = 'toString' in dict
    var j = dict.hasOwnProperty('toString')

    // HTML输出
    document.write(e + '<br>')
    document.write(f + '<br>')
    document.write(g + '<br>')
    document.write(h + '<br>')
    document.write(i + '<br>')
    document.write(j + '<br>')
</script>
</body>
</html>

JavaScript流程控制之条件语句

JavaScript 流程控制语句（statement）包括 if、for 、while、switch、continue、break语句，通过这些语句，程序根据不同情况执行不同动作。
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码。
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码。
if…else if….else 语句 - 使用该语句来选择多个代码块之一来执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if条件语句</title>
</head>
<body>
<script>
    'use strict'
    // if(){}语句
    var a = -10;
    if (a > 5)
    {
        var b = 11
    }
    // if(){} else{}语句
    var c = 10;
    if (c < 0)
    {
        var d = 15
    }
    else
    {
        d = 20
    }
    // if(){} else if(){} else{}语句
    var e = 60;
    if (e > 90)
    {
        var f = 200;
    }
    else if(e > 80)
    {
        f = 150;
    }
    else
    {
        f = 0;
    }
    // HTML输出
    document.write(b + '<br>')
    document.write(d + '<br>')
    document.write(f + '<br>')

    // 期末考试分数判断
    var e = prompt("请输入您的期末考试成绩：");
    if (e > 80)
    {
        var f = "优秀，戒骄戒傲！";
    }
    else if(e > 70)
    {
        var f = "良好，再接再厉！";
    }
    else if(e > 60)
    {
        var f = "中等，仍需努力！";
    }
    else
    {
        var f = "学渣，回家种田！";
    }
    document.write(f);
</script>
</body>
</html>

switch 语句 - 使用该语句来选择多个代码块之一来执行（一般当if判断超过3个的时候使用此语句）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Switch语句</title>
</head>
<body>
<script>
    var d = new Date().getDay();
    switch (d)
    {
        case 0:
            x = "星期日";
            break;
        case 1:
            x = "星期一";
            break;
        case 2:
            x = "星期二";
            break;
        case 3:
            x = "星期三";
            break;
        case 4:
            x = "星期四";
            break;
        case 5:
            x = "星期五";
            break;
        default: // 规定不匹配时，默认执行的语句
            x = "星期六";
    }
    document.write(x)
</script>
</body>
</html>

JavaScript流程控制之循环语句

若有重复的动作需要执行，则会采用循环语句。循环语句可以根据需求，执行一定次数的代码块。
JavaScript 支持以下循环语句：
for - 循环代码块一定的次数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for语句</title>
</head>
<body>
<script>
    // for语句（循环代码块一定的次数直到条件不满足）
    var x = 0;
    var i;
    for (i=1; i<=100; i++) // 初始变量；循环条件；递增条件（循环代码块被执行之后执行）
    {
        x = x + i;
    }
    document.write(x+'<br>');

    // for语句（遍历数组）
    var arr = ['Apple', 'Google', 'Microsoft'];
    var n, y;
    for (n=0; n<arr.length; n++)
    {
        y = arr[n];
        document.write(y + '<br>');
    }

    //for语句（遍历数组）
    cars = ["BMW", "Volvo", "Saab", "Ford"];
    var r=0;
    for (;cars[r];)
    {
        document.write(cars[r] + "<br>");
        r++;
    }
    // for_in语句（循环遍历对象的属性）
</script>
</body>
</html>

for/in - 循环遍历对象的属性。
while - 当指定的条件为 true 时循环指定的代码块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>While语句</title>
</head>
<body>
<script>
    var x=0, i=0;
    while (i < 5)
    {
        x = x + i;
        i++;
        document.write(x + "<br>");
    }
    // while循环读取数组元素
    cars = ["BMW", "Volvo", "Saab", "Ford"];
    var n = 0;
    while (cars[n])
    {
        document.write(cars[n] + "<br>");
        n ++;
    }
</script>
</body>
</html>

do/while - do/while 循环是 while 循环的变体，该循环会执行一次代码块，在检查条件是否为真之前，如果条件为真的话，就会重复这个循环。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>do_while语句</title>
</head>
<body>
<script>
    var x="", i=0;
    do
    {
        x = x + " The number is " + i + "<br>";
        i ++;
    }
    while (i < 5)
    document.write(x)
</script>
</body>
</html>

JavaScript流程控制之终止语句

很多时候，循环语句需要根据特定条件来终止循环，此时就需要用到循环语句，JavaScript 支持 break 和 continue 语句。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Break语句</title>
</head>
<body>
<script>
    var x = "", i = 0;
    for (i=0; i<10; i++)
    {
        if (i == 3)
        {
            break;
        }
        x = x + " The number is " + i + "<br>";
    }
    document.write(x)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Continue语句</title>
</head>
<body>
<script>
    var x = "", i = 0;
    for (i=0; i<10; i++)
    {
        if (i == 3)
        {
            continue;
        }
        x = x + " The number is " + i + "<br>";
    }
    document.write(x)
</script>
</body>
</html>

JavaScript函数

函数（Function）是封装好的、可直接调用的、可重复使用的代码块，一般由变量、数据类型、表达式、流程控制等语句组成。函数是一种更高维度的编程方法，合理的创建和使用函数，可以让代码更加简洁，也可以实现更复杂的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>
<script>

    // 不含参函数
    function abs() {
        var x = -1;
        if (x >= 0)
        {
            return x;
        }
        else
        {
            return -x;
        }
    }
    document.write(abs());

    // 含参函数
    function abs(x)
    {
        if (x >= 0)
        {
            return x;
        }
        else
        {
            return -x;
        }
    }
//    var a = abs(-10)
//    document.write(a)

    // 获取用户输入再取绝对值
    var a = prompt("输入一个数字:")
    var b = abs(a)
    document.write(b)

</script>
</body>
</html>

JavaScript快速入门学习笔记

JavaScript快速入门学习笔记

JavaScript简述

JavaScript组成

JavaScript使用位置

JavaScript变量

JavaScript数字

JavaScript字符串

JavaScript数组

JavaScript字典

JavaScript流程控制之条件语句

JavaScript流程控制之循环语句

JavaScript流程控制之终止语句

JavaScript函数

Linux学习笔记（一）：入门知识

JavaScript学习笔记之数组基本操作示例

C学习笔记（3）---作用域，数组, （少量指针入门）

C#线程学习笔记八：async & await入门

javascript学习笔记_浅谈基础语法,类型,变量

JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用

JavaScript学习笔记整理_关于表达式和语句

JavaScript学习笔记整理_setTimeout的应用

荐「「 Python从入门到实践」」学习笔记（连载中）

荐「「 Python从入门到实践」」学习笔记（连载中）

JavaScript快速入门学习笔记

JavaScript快速入门学习笔记

JavaScript简述

JavaScript组成

JavaScript使用位置

JavaScript变量

JavaScript数字

JavaScript字符串

JavaScript数组

JavaScript字典

JavaScript流程控制之条件语句

JavaScript流程控制之循环语句

JavaScript流程控制之终止语句

JavaScript函数

Linux学习笔记（一）：入门知识

JavaScript学习笔记之数组基本操作示例

C学习笔记（3）---作用域，数组, （少量指针入门）

C#线程学习笔记八：async & await入门

javascript学习笔记_浅谈基础语法,类型,变量

JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用

JavaScript学习笔记整理_关于表达式和语句

JavaScript学习笔记整理_setTimeout的应用

荐 「「 Python从入门到实践 」」学习笔记（连载中）

荐 「「 Python从入门到实践 」」学习笔记（连载中）

荐「「 Python从入门到实践」」学习笔记（连载中）

荐「「 Python从入门到实践」」学习笔记（连载中）