JavaScript入门

JavaScript的作用是为网页提供动态效果

基础

如何插入JS

语法：

<script type="text/javascript">
    代码
</script>

引用外部JS文件

javascript代码写在.js文件中

语法：

<script src="js文件"></script>

JS在页面中的位置

html解释器顺序解析html代码，因此js放到不同位置执行顺序不同

放在<head>部分，如初始化的js

放在<body>部分，如通过事件调用执行的function对位置没要求

语句和符号

格式：语句;

注释

单行注释 //

多行注释 /*…*/

变量

存储某种/某些数值的存储器

语法：var 变量名

命名规则：

必须以字母或下划线开始
必须使用英文字母、数字、下划线组成
不能使用JavaScript关键词和JavaScript保留字

注意：

变量要先声明再赋值，否则不规范

变量可以重复赋值

JS中区分大小写

判断语句

If…else…

函数

函数是完成某个特定功能的一组语句。

语法：

function 函数名()
{
     函数代码;
}

说明：

function定义函数的关键字
“函数名”为函数取得名字
“函数代码”替换为为完成特定功能的代码

常用互动方法

输出内容

直接在网页中输出内容

语法：

document.write();

四种输出方式：

1. 输出内容由“”括起，直接输出“”内的内容。

语法：

<script type="text/javascript">
    document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>

2. 通过变量输出内容。

语法：

<script type="text/javascript">
    var mystr="hello world!";
    document.write(mystr);  //直接写变量名，输出变量存储的内容。
</script>

3. 输出多项内容，内容之间由+号连接。

语法：

<script type="text/javascript">
    var mystr="hello";
    document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

4. 输出HTML标签，并起作用，标签使用””括起来。

语法：

<script type="text/javascript">
    var mystr="hello";
    document.write(mystr+"<br>");//输出hello后，输出一个换行符
    document.write("JavaScript");
</script>

警告

网页弹出的对话框，带有确定按钮，在点击“确定”按钮前，不能进行任何其它操作。

如图：

语法：

alert(字符串或变量);

确认

confirm消息对话框包括一个确定按钮和一个取消按钮，通过返回值判断点击了什么按钮。

语法：

confirm(str);
//str: 在消息对话框中要显示的文本。
//返回值：Boolean值。当用户点击“确定”按钮时，返回true；当用户点击“取消”按钮时，返回false。

实例：

<script type="text/javascript">
    function rec()
    {
        var mymessage=confirm("你是女士吗？");
        if(mymessage==true)
        {
            document.write("你是女士!");
        }
        else
        {
            document.write("你是男士!");
        }
    }    
</script>

点击cancel后返回false值，执行else语句。

提问

prompt弹出消息对话框，通常用于询问一些需要与用户交互的信息。

包括确定按钮、取消按钮和文本输入框。

语法：

prompt(str1, str2);
//str1：要显示在消息对话框中的文本，不可修改。
//str2：文本框中的内容。
//返回值：点击确认按钮，返回文本框中的内容；点击取消按钮，返回null。

实例：

<script type="text/javascript">
    function rec()
    {
        var score; //score变量，用来存储用户输入的成绩值。
        score =  prompt("请输入成绩",score) ;
        if(score>=90)
        {
            document.write("你很棒!");
        }
        else if(score>=75)
        {
            document.write("不错吆!");
        }
        else if(score>=60)
        {
            document.write("要加油!");
        }
        else
        {
            document.write("要努力了!");
        }
    }
</script>

输入数字10，返回结果存储到变量score中。

打开新窗口

用于打开一个新的窗口。

语法：

window.open(<URL>, <窗口位置>, <参数字符串>)
//URL:打开新窗口的网址或路径。
//窗口位置：_top，_black，_self。
//参数字符串：设置窗口参数，各参数用逗号隔开。

参数表：

参数	值	说明
top	Number	窗口顶部离开屏幕顶部的像素数
left	Number	窗口左端离开屏幕左端的像素数
width	Number	窗口宽度
height	Number	窗口高度
menubar	yes,no	窗口有没有菜单
toolbar	yes,no	窗口有没有工具条
scrollbars	yes,no	窗口有没有滚动条
status	yes,no	窗口有没有状态栏

实例：

<script type="text/javascript">
    function Wopen()
    {
        window.open('http://www.baidu.com','_blank','width=600,height=400,top=100px,left=0px');  
    } 
</script>

点击按钮，在新窗口打开百度首页。

Dom基础

认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM讲HTML文档呈现为带有元素、属性和文本的树结构。

实例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>DOM</title>
    </head>
    <body>
        <h2><a href="www.baidu.com">javascript DOM</a></h2>
        <p>对HTML元素进行操作，可添加、改变或移除CSS样式等</p>
        <ul>
            <li>JavaScript</li>
            <li>DOM</li>
            <li>CSS</li>
        </ul>
    </body>
</html>

DOM截点层次图：

通过ID获取元素

语法：

document.getElementById(“id”)

获取元素内容

语法：

Object.innerHTML;
//Object是获取的对象

改变HTML样式

语法：

Object.style.property=new style;

基本属性表：

属性	描述
backgroundColor	设置元素的背景颜色
height	设置元素的高度
width	设置元素的宽度
color	设置文本的颜色
font	在一行设置所有的字体属性
fontFamily	设置元素的字体系列
fontSize	设置元素的字体大小

显示和隐藏

语法：

Object.style.display="value";

值

描述

none

此元素不会被显示

block

此元素将显示为块级元素

控制类名

语法：

object.className = classname;

作用：

获取元素的class属性；
为网页的某个元素制定一个css样式来更改元素的外观

恢复设置

语法：

object.removeAttribute('style');