JavaScript前言

Xc_.xC

于 2022-10-01 20:05:28 发布

阅读量394

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52215881/article/details/127131643

版权

1,什么是JavaScript？有什么用？

  JavaScript是运行在浏览器上的脚本语言。简称js。

        JavaScript是网景公司（NetScape）的布兰登艾奇开发（js之父）的，

          最初叫做LiveScript。

LiveScript的出现让浏览器更加生动了，不再是单纯的静态页面了。页面更具有交互性。

它和Java没有什么关系，只是语法上有点相似

它们的运行位置不同，Java运行在JVM当中，js运行在浏览器的内存当中。

        js程序不需要我们程序员手动编译，编写完代码之后，浏览器直接打开解释运行。

js的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。

Java当中需要编译生成.class文件.class文件时Java的目标程序，非脚本语言

2，在HTML怎么嵌入JavaScript代码？

第一种方式：使用事件句柄。

JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
在js中有很多事件，其中有一个事件叫做：鼠标单击，单词click。

并且任何事件都会对应一个事件句柄：鼠标单击事件句柄Onclick。

【注意事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on。】而事件句柄是以HTML标签的属性存在的。

   <!-- 只有事件发生的时候，js代码才会执行 -->
    <input type="button" value="hello" onclick="js代码"/>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html 嵌入js的第一种方式</title>
    </head>
    <body>
        <!-- 
            1,要实现的功能：
                用户点击以下按钮，弹出消息框。
            2，JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
            在js中有很多事件，其中有一个事件叫做：鼠标单击，单词click。并且
            任何事件都会对应一个事件句柄：鼠标单击事件句柄Onclick。【注意事件和事件句柄的区别是：
            事件句柄是在事件单词前 添加一个on。】而事件句柄是以HTML标签的属性存在的。

            3,onclick="js代码",执行原理是什么？
                页面打开的时候，js代码并不会执行，只是把这段js代码注册到按钮的click事件上了
                等这个按钮发生 click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
            4，怎么使用js代码弹出消息框？
                在js中有一个内置对象叫做，window,全部小写，可以直接拿来用，window代表的是浏览器对象。
                window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了。
            5,js中字符串可以使用单引号也可以使用双引号，嵌套使用的时候要不一样，会冲突
            6，js中的一条语句结束之后可以使用";",也可以不用
         -->
         <!-- 只有事件发生的时候，js代码才会执行 -->
            <input type="button" value="hello" onclick="window.alert('hello js')"/>
            <!-- 按顺序依次执行，可以用逗号隔开也可以不用 -->
            <input type="button" value="hello" onclick="window.alert('hello zhansan'),
                                                        window.alert('hello wangwu'),
                                                        window.alert('hello  lisi')
                                                        "/>
            <!--”window.“ 可以省略 -->
            <input type="button" value="hello" onclick="alert('hello zhansan'),
                                                        alert('hello wangwu'),
                                                        alert('hello  lisi')
                                                         "/>
            
    </body>
</html>

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

脚本块的方式，可以放在任意位置，甚至是html根标签外面

       <!-- 第二种方式：脚本块的方式-->
            <script type="text/javascript">
                    js代码块
            </script>

<!DOCTYPE html>

<!-- javascript的脚本快在一个页面当中可以出现的次数,没有要求
     Javascript的脚本块 出现的位置也没有要求,随意.
-->
<script type="text/javascript">
    window.alert("first.....")
</script>

<html>
    <head>
        <title>html嵌入js代码的第二种方式</title>

        <!-- 样式块 -->
        <style type="text/css">
            /* css代码 */
        </style>
        
        <script type="text/javascript">
            window.alert("head.....")
        </script>

    </head>
    <body>
        <!-- 第二种方式：脚本块的方式-->
            <script type="text/javascript">
                    // js代码块,js的单行注释
                /*js的多行注释
                暴露在脚本块当中的程序 ，在页面打开的时候执行
                并且遵循从上到下的循序依次逐行执行，（这个代码的
                执行不需要事件）
                */
               //alert函数会阻塞整个页面的加载,直到用户点击确定按钮
                    window.alert("hello js")
                    window.alert("hello world")
            </script>
            <!-- 只有把上面的代码都执行完才会出现按钮,从上到下依次逐行执行 -->
            <input type="button" value="我是一个按钮"/>
    </body>
</html>

<script type="text/javascript">
    window.alert("last.....")
</script>

第三种方式：引入外部".js"文件

<!DOCTYPE html>
<html>
    <head>
        <title>html嵌入js代码的第三种方式,引入外部独立的js文件</title>
    </head>
    <body>
        <!-- 在需要的位置引入外部独立的js文件 -->
        <!-- 引入外部独立的js文件的时候,j
            s文件中的代码会遵循自上而下的顺序依次逐行执行.
         -->
         <!-- 注意是src,css当中使用link引入文件是href -->
         <!-- 同一个js文件可以被引入多次,但是实际很少 -->
        <script type="text/javascript" src="js/1.js">
            //注意:这里的代码是不会执行的.
            window.alert("Test");
        </script>

        <!-- 引入脚本文件之后,可以写脚本块 -->
        <script type="text/javascript">
            window.alert("hello js")
        </script>
        <!-- 注意:这种方式不行,结束的script标签必须有,不能用斜杠代替
            <script type="text/javascript" src="js/1.js"/> 
        -->
    </body>
</html>