Javascript（一） Javascript与HTML结合使用简单学习-CFANZ编程社区

Javascript介绍

(1)javascript是一种基于对象和事件驱动并具有安全性的脚本语言。它可以嵌入到HTML文档中使网页更加生动活泼，并具有交互性。
脚本：嵌入在其他语言中的语言
事件驱动：网页交互会产生一些效果
基于对象：针对已经存在的对象
(2)作用：为页面添加动态效果
(3)JavaScript最初的目的
判断客户端的输入（以前的网速慢）
(4)JavaScript现在的意义

页面特效(PC端的网页效果)
移动端(移动web和app)
异步和服务器交互
服务端开发(nodejs)

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">'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>