JavaScript入门

1、JavaScript的概念

JavaScript是一种客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。

脚本语言：不需要编译，直接就可以被浏览器解析执行。

2、JavaScript的功能

JavaScript可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

3、JavaScript发展史

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验，命名为 C--，后来更名为ScriptEase。
1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来Sun公司的专家，修改LiveScript，命名为JavaScript。
1995年，微软抄袭JavaScript开发出JScript语言。
1997年，ECMA（欧洲计算机制造商协会），ECMAScript，就是所有客户端脚本语言的标准。

JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）。

4、ECMAScript

4.1、基本语法

4.1.1、与html结合方式

内部JS：定义<script>，标签体内容就是js代码。
外部JS：定义<script>，通过src属性引入外部的js文件。

注意：

<script>可以定义在html页面的任何地方，但是定义的位置会影响执行的顺序。
<script>可以定义多个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    alert("Hello World");
  </script>
  <script src="js/a.js"></script>
</head>
<body>

<input type="text">

</body>
</html>

4.1.2、注释

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

4.1.3、数据类型

1、原始数据类型（基本数据类型）：

number：数字。整数/小数/NaN（not a number，一个不是数字的数字类型）。
string：字符串。字符/字符串。"abc"、 "abc'、 'abc'。
boolean：true和false。
null：一个对象为空的占位符。
undefined：未定义。如果一个变量没有给初始化值，则会默认赋值为undefined。

2、引用数据类型：对象。

4.1.4、变量

变量：一小块存储数据的内存空间。

Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据。
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：

var 变量名 = 初始化值;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>

    <script>
        //定义number类型
        var num1 = 1;
        var num2 = 1.2;
        var num3 = NaN;
        //输出到页面上
        document.write(num1 + "---" + typeof (num1) + "<br />");
        document.write(num2 + "---" + typeof (num2) + "<br />");
        document.write(num3 + "---" + typeof (num3) + "<br />");

        //定义string类型
        var str1 = "abc";
        var str2 = 'def';
        document.write(str1 + "---" + typeof (str1) + "<br />");
        document.write(str2 + "---" + typeof (str2) + "<br />");

        //定义boolean类型
        var flag = true;
        document.write(flag + "---" + typeof (flag) + "<br />");

        //定义null和undefined
        var obj1 = null;
        var obj2 = undefined;
        var obj3;
        document.write(obj1 + "---" + typeof (obj1) + "<br />");
        document.write(obj2 + "---" + typeof (obj2) + "<br />");
        document.write(obj3 + "---" + typeof (obj3) + "<br />");
    </script>
</head>
<body>

</body>
</html>

4.1.5、运算符

一元运算符：只有一个运算数的运算符。如：++，--，+（正号），-（负号）。注意：在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动将运算数进行类型转换。
```
-其它类型转number
string转number：按照字面值转换。如果字面值不是数字，则转为NaN。
boolean转number：true转为1，false转为0。
```
算数运算符：+，-，*，/，%，...
赋值运算符：=，+=，-=，*=，/=，%=，...
比较运算符：>，<，>=，<=，===（全等于，在比较之前，先判断类型，如果类型不一样，直接返回false）。比较方式：① 类型相同：直接比较。字符串按照字典顺序比较，按位逐一比较，直到得出大小为止；② 类型不同：先进行类型转换，再比较。

逻辑运算符：&&，||，！。

-其它类型转boolean
number转boolean：0为假，非0为真。
string转boolean：除了空字符串为false，其它都是true。
null、undefined转boolean：都是false。
对象转boolean：所有对象都为true。

如：
obj = "123";
if(obj != null && obj.length > 0) { //防止空指针异常
    alert(123);
}
//js中可以这样定义，简化书写
if(obj) {
    alert(111);
}

三元运算符：表达式？值1:值2。

4.1.6、流程控制语句

if...else...

switch：在JavaScript中，switch语句可以接收任意的原始数据类型。

var a;
switch(a) {
    case 1:
        alert("number");
        break;
    case "abc":
        alert("string");
        break;
    case true:
        alert("true");
        break;
    case null:
        alert("null");
        break;
    case undefined:
        alert("undefined");
        break;
}

while
do...while
for

练习：99乘法表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>

    <script>
        document.write("<table align='center'>");

        //1、完成基本的for循环嵌套，展示乘法表
        for(var i = 1; i <= 9; i++) {
            document.write("<tr>");
            for(var j = 1; j <= i; j++) {
                document.write("<td>");
                //输出
                document.write(i+"*"+j+"="+(i*j)+"&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        //完成表格嵌套
        document.write("</table>");
    </script>
</head>
<body>

</body>
</html>

4.1.7、特殊语法

语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略。（不建议）
变量的定义使用var关键字，也可以不使用。① 用：定义的变量是局部变量；② 不用：定义的变量是全局变量。（不建议使用）

4.2、基本对象

4.2.1、Function对象

1、创建
    方式1：var fun = new Function(形式参数列表,方法体)
    方式2：function 方法名称(形式参数列表) {方法体}
    方式3：var 方法名 = function(形式参数列表) {方法体}
2、方法
3、属性
    length：代表形参的个数。
4、特点
    1）方法定义时，形参的类型不用写，返回值类型也不用写；
    2）方法是一个对象，如果定义名称相同的方法，会覆盖；
    3）在JS中，方法的调用只与方法的名称有关，和参数列表无关；
    4）在方法声明中有一个隐藏的内置对象（数组）arguments封装所有的形式参数；
5、调用
    方法名称(实际参数列表);

4.2.2、Array对象

1、创建
    方式1：var arr = new Array(元素列表);
    方式2：var arr = new Array(默认长度);
    方式3：var arr = [元素列表];
2、方法
    join("分隔符")：讲数组中的元素按照指定的分隔符拼接为字符串；
    push()：向数组的末尾添加一个或更多的元素，并返回新的长度；
    ...
    
3、属性
4、特点
    1）在JS中，数组元素的类型可变，如 var arr = [1, 'abc', true];；
    2）在JS中，数组的长度可变；

4.2.3、Boolean对象

4.2.4、Date对象

1、创建
    var date = new Date();
2、方法
    toLocalString()：返回当前date对象对应的时间本地字符串格式；
    getTime()：获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差；
    ...
3、属性
4、调用

4.2.5、Math对象

1、创建
    Math对象不用创建，直接使用。
2、方法
    random()：返回0~1之间的随机数，区间为[0,1)。
    ceil(x)：对数进行上舍入。
    floor(x)：对数进行下舍入。
    round(x)：把数四舍五入为最接近的数。
3、属性
    PI：圆周率。
4、调用

4.2.6、Number对象

4.2.7、String对象

4.2.8、RegExp（正则表达式）对象

1、正则表达式：定义字符串的组成规则。

单个字符 []：如[a],[ab],[a-zA-Z0-9_]。特殊符号代表特殊含义的单个字符：① \d：单个数字字符[0-9]；② \w：单个单词字符[a-zA-Z0-9_]。
量词符号：① ?：表示出现0次或1次；② *：表示出现0次或多次；③ +：出现1次或多次。如\w*。\w{m,n}：表示m<=数量<=n，m如果缺省（{,n}），表示最多n次，n如果缺省({m,})，表示最少m次。
开始结束符号：① ^：开始；② $：结束。

2、正则对象

1、创建
    方式1：var reg = new RegExp("正则表达式");
    方式2：var reg = /正则表达式/;
2、方法
    test(参数):验证指定的字符串是否符合正则定义的规范。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        var reg1 = new RegExp("^\\w{6,12}$");
        var reg2 = /^\w{6,12}$/;

        var username = "zhangsan";
        reg2.test(username);
        alert(flag);
    </script>
</head>
<body>

</body>
</html>

4.2.9、Global对象

1、特点
    全局对象，这个Global中封装的方法不需要对象就可以直接调用。
2、方法
    encodeURI()：url编码。
    decodeURI()：url解码。
    
    encodeURIComponent()：url编码，编码的字符更多。
    decodeURIComponent()：url解码。

    parsrInt()：将字符串转为数字。逐一判断每一个字符是否是数字，直到不是数字为止，将前面的数字部分转为number。
    isNaN()：判断一个值是否是NaN。NaN参与的==比较全部为false（包括与NaN自己比较）。
    eval()：将JavaScript字符串转换成脚本代码执行。

5、BOM

5.1、BOM概念

BOM（Browser Object Model，浏览器对象模型）：将浏览器的各个部分封装成对象。

5.2、BOM组成

5.2.1、Window：窗口对象

1、创建
2、与弹出框有关的方法
    alert()：显示带有一段信息和一个确认按钮的警告框。
    confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
        如果用户点击确定按钮，则方法返回true；
        如果用户点击取消按钮，则方法返回false。
    prompt()：显示可提示用户输入的对话框。
        返回值：获取用户输入的值
3、与打开、关闭有关的方法
    close()：关闭浏览器窗口；
        注意：谁调用该方法，该方法就关谁。
    open()：打开一个新的浏览器窗口。
        返回一个新的Window对象。
4、与定时器有关的方法
    setTimeout()：在指定毫秒数后调用函数或计算表达式。
        参数：① js代码或者方法对象；② 毫秒值；③ 返回值：唯一标识，用于取消定时器。
    clearTimeout()：取消由setTimeout()方法设置的timeout。
    setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
        参数：① js代码或者方法对象；② 毫秒值；③ 返回值：唯一标识，用于取消定时器。
    clearInterval()：取消由setInterval()方法设置的timeout。
5、属性-获取其它BOM对象
    history：
    location：
    Navigator：
    Screen：
6、属性-获取DOM对象
    document
7、特点
    Window对象不需要创建，可以直接使用window使用，如window.方法名();
    window引用可以省略，如 方法名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
</head>
<body>

<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">

<script>
  // var flag = confirm("您确定要退出吗？");
  // if(flag){
  //   //退出操作
  //   alert("欢迎再次光临！");
  // }else{
  //   //提示
  //   alert("手别抖！")
  // }
  //
  // //输入框
  // var result = prompt("请输入用户名");
  // alert(result);

  //打开新窗口
  var newWindow;
  var openBtn = document.getElementById("openBtn");
  openBtn.onclick = function () {
    newWindow = open("https://www.baidu.com");
  }

  //关闭新窗口
  var closeBtn = document.getElementById("closeBtn");
  closeBtn.onclick = function () {
    newWindow.close();
  }

  // //一次定时器
  // //setTimeout("alert('aaa');",2000);
  // var id = setTimeout(fun1,2000); //返回这个timeout的编号id
  // function fun1(){
  //   alert('aaa');
  // }
  // clearTimeout(id); //关闭定时器
  // //循环定时器
  // var id2 = setInterval(fun1,2000); //返回这个timeout的编号id
  // clearInterval(id2);

  //获取history
  var h1 = window.history;
  var h2 = history;
  var openBtn1 = window.document.getElementById("openBtn");
  var openBtn2 = document.getElementById("openBtn");
</script>

</body>
</html>

5.2.2、Navigator：浏览器对象

5.2.3、Screen：显示器屏幕对象

5.2.4、History：历史记录对象

1、创建（获取）
    window.history
    history
2、方法
    back()：加载history列表中的前一个URL。
    forward()：加载history列表中的下一个URL。
    go()：加载history列表中的某个具体页面。
        正数：前进几个历史记录；
        负数：后退几个历史记录。
3、属性
    length：返回当前窗口历史列表中的URL数量。

5.2.5、Location：地址栏对象

1、创建（获取）
    window.location
    location
2、方法
    reload()：重新加载当前文档。
3、属性
    href：设置或返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>

<p>
    <span id="time">5</span>秒之后,自动跳转到首页...
</p>

<script>
    var second = 5;
    var time = document.getElementById("time");
    //倒计时读秒效果实现
    function showTime(){
        second --;
        time.innerHTML = second + "";
        if(second <= 0){
            //跳转
            location.href = "https://www.baidu.com";
        }
    }
    //设置定时器,1秒执行一次该方法
    setInterval(showTime,1000);
</script>

</body>
</html>

6、DOM

DOM（Document Object Model，文档对象模型）：将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作。

W3C DOM标准被分为3个不同的部分：

1）核心DOM：针对任何结构化文档的标准模型；

Document：文档对象；

Element：元素对象；

Attribute：属性对象；

Text：文本对象；

Comment：注释对象；

- Node：结点对象，其它5个的父对象。

2）XML DOM：针对XML文档的标准模型；

3）HTML DOM：针对HTML文档的标准模型。

DOM的功能：控制html文档的内容。

-获取页面标签（元素）对象Element。通过元素id获取元素对象。
document.getElementById("id值");

操作Element对象：

-修改属性值
1、明确获取的对象是哪一个；
2、查看API文档，找其中有哪些属性可以设置。如：
    <script>
        //通过id获取元素对象
        var img = document.getElementById("Id名");
        alert("换图片");
        img.src = "image/new.png";
    </script>

-修改标签体内容

6.1、核心DOM模型

6.1.1、Document：文档对象

1、创建（获取）：在html dom 模型中可以使用window对象来获取
    window.document
    document
2、方法
    1）获取Element对象：
        getElementById()：根据id属性值获取元素对象。id属性值一般唯一。
        getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
        getElementsByClassName()：根据class属性值获取元素对象们。返回值是一个数组。
        getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组。
    2）创建其它DOM对象：
        createAttribute(name)：
        createComment()：
        createElement()：
        createTextNode()：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
</head>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

<div class="cls1">div4</div>
<div class="cls1">div5</div>

<div type="text" name="username">div6</div>

<script>
  //根据元素名称获取元素对象们.返回值是一个数组
  // var divs = document.getElementsByTagName("div");
  // alert(divs.length);

  //根据Class属性值获取元素对象们.返回值是一个数组
  // var div_cls = document.getElementsByClassName("cls1");
  // alert(div_cls.length);

  //根据name属性值获取元素对象们.返回值是一个数组
  var ele_username = document.getElementsByName("username");
  alert(ele_username.length);

</script>

</body>
</html>

6.1.2、Element：元素对象

1、获取（创建）
    通过document来获取和创建。
2、方法
    removeAttribute()：删除属性
    setAttribute()：设置属性
3、属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>
<body>

<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性"><br />

<script>
    //获取btn
    var btn_set = document.getElementById("btn_set");
    btn_set.onclick = function () {
        //获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }
    var btn_remove = document.getElementById("btn_remove");
    btn_remove.onclick = function () {
        //获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }
</script>

</body>
</html>

6.1.3、Node：结点对象

1、特点
    所有DOM对象都可被认为是一个结点。
2、方法
    CRUD DOM树：
        appendChild()：向结点的子结点列表的结尾添加新的子结点。
        removeChild()：删除（并返回）当前结点的指定子结点。
        replaceChild()：用新结点替换一个子结点。
3、属性
    parentNode:返回结点的父结点。

6.2、HTML DOM模型

6.2.1、标签体的设置和获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
</head>
<body>

<div id="div1">
  div1
</div>

<script>
  var div1 = document.getElementById("div1");
  var innerHtml = div1.innerHTML;
  div1.innerHTML = "<input type='text'>";

  //div1标签中追加一个文本输入框
  div1.innerHTML += "<input type='text'>";
</script>


</body>
</html>

6.2.2、使用html元素对象的属性

6.2.3、控制元素样式

方式1：使用元素的style属性来设置；
方式2：提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制样式</title>

    <style>
        .d1 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .d2 {
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div id="div1">
    div1
</div>
<div id="div2">
    div2
</div>

<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function () {
        //修改样式方式1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";

        //font-size --> fontSize
        div1.style.fontSize = "20px";
    }
    var div2 = document.getElementById("div2");
    div2.onclick = function () {
        //修改样式方式2
        div2.className = "d1";
    }
</script>

</body>
</html>

6.2、事件监听机制

事件的功能：某些组件被执行了某些操作后，触发某些代码的执行。

事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了，...
事件源：组件，如：按钮，文本输入框，...
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

如何绑定事件：

方式1：直接在html标签上，指定事件的属性，属性值就是JS代码。事件onclick：单击事件。
方式2：通过js获取元素对象，指定事件属性，设置一个函数。

常见的事件：

点击事件：① onclick：单击事件；② ondblclick：双击事件。
焦点事件：① onblur：元素失去焦点。一般用于表单验证；② onfocus：元素获得焦点。
加载事件：① onload：一张页面或一幅图像完成加载。
鼠标事件：① onmousedowm：鼠标按钮被按下。定义方法时，定义一个形参来接收event对象，event对象的button属性可以获取鼠标按扭哪个键被点击了；② onmouseup：鼠标按键被松开；③ onmousemove：鼠标被移动；④ onmouseover：鼠标移到某元素之上；⑤ onmouseout：鼠标从某元素移开。
键盘事件：① onkeydown：某个键盘按键被按下；② onkeyup：某个键盘按键被松开；③ onkeypress：某个键盘按键被按下并松开。
选中和改变：① onchange：域的内容被改变；② onselect：文本被选中。
表单事件：① onsubmit：确认按钮被点击。可以阻止校验失败的表单的提交，方法返回false则阻止提交；② onreset：重置按钮被点击。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>

<img id="img1" src="image/logo.jpg" onclick=fun1()>

<img id="img2" src="image/logo.jpg">



<script>
    function fun1(){
        alert('我被点了。');
        alert('我又被点了。');
    }
    function fun2(){
        alert('我也被点了。')
    }

    //获取img2对象
    var img2 = document.getElementById("img2");
    //绑定事件
    img2.onclick = fun2;
    //或者可以直接定义函数fun2：
    //img2.onclick = fun2(){方法体}
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM常见事件</title>

    <script>
        //2、加载完成事件
        window.onload = function() {
            // //1、失去焦点事件
            // document.getElementById("username").onblur = function() {
            //     alert("失去焦点了")
            // }
            // //3、绑定鼠标事件
            // document.getElementById("username").onmouseover = function() {
            //     alert("鼠标来了..");
            // }
            // document.getElementById("username").onmousedown = function (event) {
            //     alert("鼠标被按下了..");
            //     alert(event.button);
            // }
            //4、绑定键盘事件
            document.getElementById("username").onkeydown = function(event) {
                if(event.keyCode == 13) {//回车键被按下
                    alert("提交表单");
                }
            }
            //5、域的内容被改变
            document.getElementById("city").onchange = function() {
                alert("改变了..");
            }
            //6、表单事件
            // document.getElementById("form").onsubmit = function () {
            //     //校验用户名格式是否正确
            //     var flag = false;
            //
            //     return flag; //false则组织表单提交
            // }
            function checkForm() {
                return false;
            }
        }
    </script>
</head>
<body>

<form action="#" id="form" onclick="return checkForm();">
    <input name="username" id="username">

    <select id="city">
        <option>--请选择--</option>
        <option>北京</option>
        <option>上海</option>
        <option>西安</option>
    </select>
    <input type="submit" value="提交">
</form>

<script>
</script>

</body>
</html>

posted on 2022-09-18 15:48 啊噢1231 阅读(35) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

aoe1231