Web前端----JavaScript入门(一)

最新推荐文章于 2024-01-11 15:11:15 发布

xxyneymar

最新推荐文章于 2024-01-11 15:11:15 发布

阅读量231

点赞数

分类专栏： javaWeb 文章标签： javascript 前端

本文链接：https://blog.csdn.net/xxyneymar/article/details/120659662

版权

1.简介1.1 JavaScript概述 JavaScript是运行在浏览器上的脚本语言，简称JS。JavaScript运行在浏览器的内存当中，不需要程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。JavaScript的"目标程序"以普通文本形式保存，这种语言都叫做"脚本语言"(对于java来说，目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言)。 JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠...

摘要由CSDN通过智能技术生成

1.2.3 第三种方式：引入外部独立的JS文件

2.JavaScript的基本语法(ECMAScript)

2.4.7 值null、NaN、undefined的区别

2.4.8 等同运算符和全等运算符

1.简介

1.1 JavaScript概述

JavaScript是运行在浏览器上的脚本语言，简称JS。JavaScript运行在浏览器的内存当中，不需要程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。JavaScript的"目标程序"以普通文本形式保存，这种语言都叫做"脚本语言"(对于java来说，目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言)。

JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词click。并且任何一个事件都会对应一个事件句柄叫做onclick，事件句柄是以HTML标签的属性存在的。(注意：事件和事件句柄的区别是事件句柄是在事件单词前添加一个on)

比如：

οnclick="JS代码"的执行原理：页面打开的时候js代码并不会执行，只是把这段js代码注册到

按钮的click事件上了；等这个按钮发生click事件后，注册在onclick后面的js代码会被浏览器自

动调用。

在JS中有一个内置的对象叫做window(全部小写)，可以直接拿来使用，window代表的是浏览器对象。window对象有一个函数叫做alter，用法是window.alter("消息"); 通过该方法可以实现弹窗功能，"window."可以省略。

JS中的字符串可以使用双引号，也可以使用单引号。

JS中的一条语句结束之后可以使用";"结尾，也可以不用。

1.2 HTML嵌入JS代码的三种方式

1.2.1 第一种方式：以事件句柄的方式

比如：

οnclick="JS代码"的执行原理：页面打开的时候js代码并不会执行，只是把这段js代码注册到

按钮的click事件上了；等这个按钮发生click事件后，注册在onclick后面的js代码会被浏览器自

动调用。

JS中的字符串可以使用双引号，也可以使用单引号。

JS中的一条语句结束之后可以使用";"结尾，也可以不用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中嵌入JS代码的第一种方式</title>
</head>
<body>
    <!--
        要实现的功能：
              用户点击以下按钮，弹出消息框
        
    <!--input type="button" value="hello" onclick="js代码"/-->

    <input type="button" value="hello" onclick="window.alert('hello js')"/>

    <input type="button" value="hello" onclick='window.alert("hello jscode")'/>

    <input type="button" value="hello" onclick="window.alert('hello wangwu')
                                                window.alert('hello lisi')
                                                window.alert('hello wangwu')"/>
    <input type="button" value="hello" onclick="alert('hello wangwu')
                                                alert('hello lisi')
                                                alert('hello wangwu')"/>
</body>
</html>

1.2.2 第二种方式：脚本块的方式

脚本块可以出现多次，并且没有位置要求。

JS代码

</script>

<!--
    javascript的脚本块在一个页面当中可以出现多次，没有要求。
    javascript的脚本块出现位置也没有要求，随意。
-->

<script type="text/javascript">
    //alter有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）
    window.alert("first....");
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中嵌入JS代码的第二种方式</title>
    <script type="text/javascript">
        window.alert("head....");
    </script>
</head>
<body>
    <input type="button" value="button1"/>
    <!--第二种方式：脚本块的方式
          语法格式：
            <script type="text/script">
                 js代码
            </script>
    -->
    <script type="text/javascript">
        /*
           暴露在脚本快当中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行。
           （这个代码的执行不需要事件）
         */
        window.alert("hello world");//alter函数会阻塞整个HTML页面的加载。
        //JS代码的注释，这是单行注释
        /*
          JS代码的多行注释，和java一样。
         */
        window.alert("hello javascript")
    </script>
    <input type="button" value="button2"/>
</body>
</html>
<script type="text/javascript">
    window.alert("last....");
</script>

1.2.3 第三种方式：引入外部独立的JS文件

JS文件的后缀名为.js，里面写JS语句。

比如有一个1.js文件

window.alert("hello LKD");
window.alert("hello XY");
window.alert("hello RY");
window.alert("hello GI

最低0.47元/天解锁文章

xxyneymar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端----JavaScript入门(一)

1.简介1.1 JavaScript概述 JavaScript是运行在浏览器上的脚本语言，简称JS。JavaScript运行在浏览器的内存当中，不需要程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。JavaScript的"目标程序"以普通文本形式保存，这种语言都叫做"脚本语言"(对于java来说，目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言)。 JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠...
复制链接

扫一扫

专栏目录