Javascript（一） Javascript与HTML结合使用简单学习

来源：互联网发布：淘宝商家物流成本编辑：程序博客网时间：2024/05/22 09:02

Javascript介绍

(1)javascript是一种基于对象和事件驱动并具有安全性的脚本语言。它可以嵌入到HTML文档中使网页更加生动活泼，并具有交互性。
脚本：嵌入在其他语言中的语言
事件驱动：网页交互会产生一些效果
基于对象：针对已经存在的对象
(2)作用：为页面添加动态效果

Javascript语言组成

EcMAScript+BOM+DOM
EcMAScript：规定了一些语法、变量，for循环等等结构
BOM：Browser Object Model 浏览器对象模型
DOM：Document Object Model 文档对象模型

Javascript与HTML结合使用

（1）方式一：在标签中使用

采用事件来调用，代码写在字符串中

/*         * 方式一：直接在标签中调用         */        <p onclick="alert('你好')">大家好</p>

（2）方式二：在`<script>`标签中使用

采用定义函数的方式: 用function来定义函数
function fun(){ alert(‘你好’)} ;
//方式二：这种形式是由于有的浏览器不支持javascript，在使用时会报错，因此以这种形式兼容低版本，使浏览器不支持时不要进行报错。

<script type="text/javascript">        <!--        alert('Hi');        //-->    </script>

（3）引入外部文件

  <script src="js/index.js"></script>

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <script type="text/javascript">        //方式二：在<!-- alert('Hi');//-->这种形式是为了兼容低版本浏览器，不要进行报错        <!--        alert('Hi');        //-->    </script>    <body>        /*         * 方式一：直接在标签中调用         */        <p onclick="alert('你好')">大家好</p>    </body></html>

三种方式

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        /*         * 方式一：直接在标签中调用         */        <p onclick="alert('你好')" id='a'>大家好</p>    </body></html><script type="text/javascript">        //方式二：在<!-- alert('Hi');//-->这种形式是为了兼容低版本浏览器，不要进行报错        <!--        alert('Hi');        var a=document.getElementById('a');        alert(a.onclick);        //-->    </script>    /*     * 方式三：单独编写js文件并使用script标签进行引入     */

解析界面时，从上到下。

js文件的后缀名可以随便写

0 0