JavaScript基础__1_ltosjs-CSDN博客

本文链接：https://blog.csdn.net/slom_fxt/article/details/120512082

一、什么是JavaScript

JavaScript 是一个面向对象的脚本语言，目前互联网上较流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

面向对象是一种编程思想

面向对象是从面向过程升华而来。

面向过程--例如：从电视塔到钟楼

将从电视塔开始到钟楼结束中途所经历的每一步都要记录【公交车】

面向对象--例如：从电视塔到钟楼

将电视塔作为起始对象，钟楼作为结束对象【滴滴】

脚本语言--编写好以后放到运行环境中直接可以运行的语言

二、JavaScript的版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

年份

名称

描述

1997

ECMAScript 1

第一个版本

1998

ECMAScript 2

版本变更

1999

ECMAScript 3

添加正则表达式，添加 try/catch

ECMAScript 4

没有发布

2009

ECMAScript 5

添加 "strict mode"，严格模式，添加 JSON 支持

2011

ECMAScript 5.1

版本变更

2015

ECMAScript 6

添加类和模块

2016

ECMAScript 7

增加指数运算符 (**)，增加 Array.prototype.includes

ECMAScript 6 也称为 ECMAScript 2015。

ECMAScript 7 也称为 ECMAScript 2016。

三、JavaScript的作用

1.直接向HTML文件写出数据
2.JavaScript：对事件的4反应
3.JavaScript：改变内容
4.JavaScript：改变 HTML 图像
5.JavaScript：改变 HTML 样式
6.JavaScript：验证输入

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript的作用</title>
        <script>
            function test1(){
                document.write("这是直接向HTML文件写出的数据。");
            }

            function test2(){
               document.getElementById('img').width="250";
               document.getElementById("img").height="250";
               
            }

            function test3(){
                //document.getElementById("dome").innerHTML="这是改变后的文本内容"
                x= document.getElementById("dome");
                x.innerHTML="这是改变后的内容。";
            }

            function test4(){
                ig=document.getElementById("img1");
                ig.src="../../../Bootstrap/imgs/avatar5.png";
            }
            
            function test5(){
                document.getElementById("wenzi").style.color="red";
            }

            function test6(){
            //验证是否为数字
             /* var obj = document.getElementById("text1").value;
              if(isNaN(obj)||obj.replace(/(^\s*)|(\s*$)/g,"")==""){
		        alert("不是数字");
              }*/
            //验证手机号并给出验证的六位数字
            var con=document.getElementById("text1").value;
                var patt=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
                var flag=patt.test(con);
                if(flag){
                    alert("123456");
                }else{
                    alert("手机号码有误!");
                }
            }
        </script>
    <body>
        <h5>直接向HTML文件写出数据</h5>
        <input type="button" value="想HTML文件写出数据" onclick="test1()">
        <h5>JavaScript：对事件的4反应</h5>
        <img id="img" src="../../../Bootstrap/imgs/avatar04.png" onmouseover="test2()">
        <h5>JavaScript：改变内容</h5>
        <input type="button" value="改变文字内容" onclick="test3()">
        <p id="dome">这是要即将改变的内容</p>
        <h5>JavaScript：改变 HTML 图像</h5>
        <input type="button" value="改变图片" onclick="test4()">
        <img id="img1" src="../../../Bootstrap/imgs/avatar2.png" alt="">
        <h5>JavaScript：改变 HTML 样式</h5>
        <input type="button" value="测试改变字体样式" onclick="test5()">
        <p id="wenzi" style="color: chartreuse;font-size: 20px;">测试要用的文字样式</p>
        <h5>JavaScript：验证输入</h5>
        <input id="text1" type="text" placeholder="请输入电话号">
        <input type="button" value="验证" onclick="test6()">
    </body>
</html>

四、JavaScript 用法

HTML 中的脚本必须位于script标签之间。

script标签可被放置在 HTML 页面的 body 和 head 部分中。

通过javacript需要被具体某一个事件触发执行。

通常的做法是把函数放入head部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

当页面中的javascript代码过多的时候，我们就需要将这些javascript代码从网页中剥离，形成独立的javascript文件，

在html页面中使用的时候通过script标记导入，这样可以保证html的完整性，方便维护代码

低耦合，高内聚

1.创建独立的javascript文件【.js】

2.在html网页中通过script标记的src属性将独立的javascript文件【.js】导入当前html中

例如：

HTML文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript的用法</title>
        <script src="test2.js"></script>
        <script>
            function test2(){
                zhaopian= document.getElementById("img2");
                if(zhaopian.src.match("2048378")){
                    zhaopian.src="../../20210927javascrip基础(1)/code/imgs/2048374.jpg";
                }else{
                    zhaopian.src="../../20210927javascrip基础(1)/code/imgs/2048378.jpg";
                }
            }
        </script>
    <body>
        <h4>JavaScript 用法</h4>
        <h5>HTML 中的脚本必须位于script标签之间。</h5>
        <h5>script标签可被放置在 HTML 页面的 body 和 head 部分中。</h5>
        <h5>通过javacript需要被具体某一个事件触发执行。</h5>
        <h5>通常的做法是把函数放入head部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。</h5>
        <h5>当页面中的javascript代码过多的时候，我们就需要将这些javascript代码从网页中剥离，形成独立的javascript文件，
            在html页面中使用的时候通过script标记导入，这样可以保证html的完整性，方便维护代码
            低耦合，高内聚
        </h5>
        <h5>1.创建独立的javascript文件【.js】</h5>
        <h5>2.在html网页中通过script标记的src属性将独立的javascript文件【.js】导入当前html中</h5>
        <input type="button" value="点击出发事件" onclick="test1()">
        <img id="img1" src="../../../Bootstrap/imgs/2048374.jpg" alt="" style="width: 300px;">

        <input type="button" value="点击灯泡就可以打开或关闭这盏灯" onclick="test2()">
        <img id="img2" src="../../20210927javascrip基础(1)/code/imgs/2048374.jpg" alt="" style="width: 300px;">
    </body>
</html>

js脚本文件test2.js

function test1(){
    document.getElementById("img1").src="../../../Bootstrap/imgs/2048378.jpg";
}

五、JavaScript 输出显示数据

JavaScript 输出显示数据

1.使用 window.alert() 弹出警告框。

2.使用 document.write() 方法将内容写到 HTML 文档中。

3.使用 innerHTML 写入到 HTML 元素。

4.使用 console.log() 写入到浏览器的控制台。

例如

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript的用法</title>
        <script>
            function test1(){
                var a=10;
                var b=2;
                var c=a+b;
                //使用window.alert()弹出警告框
                //window.alert("c="+c);
                //使用 document.write() 方法将内容写到 HTML 文档中。
                //document.write("<h1>c=="+c+"</h1>");
                //使用 innerHTML 写入到 HTML 元素
                 //document.getElementById("p1").innerHTML=("c="+c);
                 //使用 console.log() 写入到浏览器的控制台
                console.log("c="+c);
            }
        </script>
    <body>
        <h4>JavaScript 输出显示数据</h4>
        <h5> 1.使用 window.alert() 弹出警告框。</h5>
        <h5> 2.使用 document.write() 方法将内容写到 HTML 文档中。</h5>
        <h5> 3.使用 innerHTML 写入到 HTML 元素。</h5>
        <h5> 4.使用 console.log() 写入到浏览器的控制台。</h5>
        <input type="button" value="点击出发事件" onclick="test1()">
        <p id="p1">显示运行结果</p>
    </body>
</html>

六、JavaScript 注释

单行注释：//注释内容

多行注释：/*注释内容*/

七： JavaScript 变量

什么是变量？

            在程序运行的过程中可以随时被修改的就是变量。

变量的作用？

            变量是用来存储具体数据值的容器

为什么需要变量来存储数据值？

节省存储空间

例如:一个程序中需要使用10个"hello",每一个“hello”占5个字符存储空间，

那么10个"hello"就是50个字符存储空间。如果将“hello”保存在一个变量中，

那么我们只需要5个字符存储空间，在其他需要使用"hello"的地方只需要调用这个变量,而无需在开辟新的存储空间。

怎么创建变量？

使用var 关键字来定义创建变量。

            格式: var 变量名称;

            var num;

            变量的赋值

            格式: 变量名称=数据值;

            num=100;

            上面的变量创建方式是先定义后赋值

            我们也可以定义和赋值一起完成

            var  num2=200;

            我们也可以一次性定义赋值多个变量。

            var perid,pername,perage; //一次性定义多个变量

            perid=1002;

            pername="lisi";

            perage=24;

或者var  stuid=1001,stuname="zhangsan",stuage=23;

关于变量名称的命名

            1.可以使用字母，数字，下划线“_”,美元符号“$”,变量必须以字母开头

            2.不能使用空格

            3.不能用关键字

            关键字---javacript语法规范中为一些单词赋予了特殊的含义，这些被赋予特殊含义的单词就是关键字

            javacript语法规范占用的单词。

            var var1=100;

            4.不能用中文[乱码]

            5.区分大小写

            变量的名称,全部小写，如果有多个单词组成可以使用"—"/"$"区分。

七、JavaScript 数据类型

数据类型的作用?

           决定所定义的变量将来所能进行那些操作。

           JavaScript中的数据类型有2大类：值类型(基本类型)和引用数据类型

           1.值类型(基本类型)

           //字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol[ES6]。

           2.引用数据类型

           对象(Object)、数组(Array)、函数(Function)

          //JavaScript 字符串类型

           字符串类型就是使用引号包围的文本数据。推荐使用双引号

           var carname1="Volvo XC60";

           var carname2='Volvo XC60';

           如果出现双引号中包含双引号报错

           var carname3="Volvo "XC60"";

           1.将双引号中的双引号改成使用单引号

           var carname3="Volvo 'XC60' ";

           2.使用转义字符转换双引号【\"】

           var carname3="Volvo \"XC60\" ";

           //JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。

           var num1=100;  //数字型

           var num2=12.5;  //数字型

           极大或极小的数字可以通过科学（指数）计数法来书写

           var y=123e5;      // 12300000

           var z=123e-5;     // 0.00123

           //JavaScript 布尔

           布尔（逻辑）只能有两个值：true 或 false。布尔常用在条件判断中。

           var boo1=true;

           var boo2=false;

           //javascript中的null

           在 JavaScript 中 null 表示 "什么都没有"。

           var test1=0;

           var  test2=null;

           当我们不知道当前变量应该是什么类型的时候，可以使用null代替。

           用 typeof 检测 null 返回是object。

           你可以设置为 null 来清空对象.

           //javascript中的未定义（Undefined）

           是指这个变量定义了，但是没有赋值

           var test3;  //undefined

           alert(test3);

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式，添加 try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加 "strict mode"，严格模式，添加 JSON 支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符 (**)，增加 Array.prototype.includes