【Web-Note】 JavaScript概述

JavaSript基本语法

• JavaSript程序不能独立运行，必须依赖于HTML文件。

• script标记是成对标记。

• type属性：说明脚本的类型。
•  "text/javascript"：使用JavaScript编写的程序是文本文件。

src属性是可选属性，用于加载指定的外部JS文件。

script标记既可以放在HMTL的头部，也可以放在HTML的主体部分，只是装载的时间不同。

第一个JavaSript实例

document.write使用方法 

JavaSript放置的位置

• JavaScript代码一般放在页面的head或body部分。
• 页面载入时，自动执行位于body部分的JavaScript；
• 位于head部分的只有在被显式调用时才会被执行。

head标记中的脚本

• head标记中的JavaScript代码必须定义成函数形式，并在主体body标记内调用时可以直接执行（提高了脚本的执行速度）。

head标记中的脚本基本语法

function functionname(参数1,参数2,参数3,...,参数n){
    函数体语句;
}

实例head标签中定义JS函数

    
    
    
    


    
head标记内定义两个JS函数
    
无返回值函数：message()
    
有返回值函数：sum(x,y)
    

        
    

 JavaScript函数与C语言函数区别

JavaScript	C语言
无函数返回类型 只有function	函数返回类型 void、int、char
均可有可无参数
function sum( x,y ) { return x+y; }	int sum( x,y ) { return x+y; }

alert相关知识

alert作用效果

alert（）方法用于显示带有一条指定消息和一个确认的按钮的警告框。

alert使用方法

方法一：直接写在script标签内 

    
    
    
    


    
alert（）方法用于显示带有一条指定消息和一个确认的按钮的警告框。

注意：

• 本应该执行主体部分的p标签，但是并没有执行；
• 这是因为在script中直接定义alert标签，alert之后的脚本都不会运行；
• 只有在点击确认之后，关闭警示框之后，才会执行；
• 此类方法，虽然简单但是不建议使用，会影响用户体验。

方法二：写在body的某个标签内

    
    
    


    
    你点我一下
    

    
    别点我
    

    
来试试看

注意：

• 这种情况不会出现像方法一的问题；
• 但是在一个页面中，可能会出现多个alert标签；
• 不容易维护，所以也不建议使用。 

方法三：使用外部alert

// 定义一个alert_usage3_out.js文件，用于专门存放alert标签
alert("这是一个外部文件的警告");

注意： 

• 使用这种方式，需要记住外部alert的路径，才能进行引用；
• 最好写在同一个文件夹下；
• 该方式不会出现第一种方式的问题，不会影响用户观感，也易于维护；
• 但使用该方式后，这一个scrip标签下的内部alert就不能执行了，只能重新写一个script；
• 推荐使用这种方式。 

alert使用实例

    
    
    
    


    
head标记内定义两个JS函数
    
无返回值函数：message()
    
有返回值函数：sum(x,y)
    

        
    

input使用方法

    
    
    


    

        账号：
        密码：
                                //注意name就是相当于变量名称，无意义，便于装饰
    
    

        
    

body标记中的脚本 

• 在body标记中的脚本，JavaScript可以定义成函数形式，在主体body标记内调用或通过事件触发。
• 也可在script标记内直接编写脚本语句，在页面装载时直接执行相关代码，这些执行结果直接构成网页的内容。

外部JS文件中的脚本

• JavaScript函数可以单独写成一个JS文件（类似CSS文件）；
• 在HTML文件中直接引用；
• 在“ .js ”文件中不需要使用标签来包围代码；
• 在“ .html ”文件中设置src属性即可链接外部定义的“ .js ”文件；
• 在设置src属性之后，在内的所有语句都不会执行，除非再写一个标签且不链接。

//use_out_js_text_addInput.js
function message(){
    alert("成功调用外部JS文件！");
}

//use_out_js_text_addInput.html



    
    
    
    
    


    



    

        
    

事件处理代码中的脚本

• JavaScript可以直接写在事件处理代码中。
• 注意需要利用双引号（“”）引起来。