CSS+JavaScript

CSS

CSS的作用

层叠样式表语言，修饰HTML，让HTML更好看。

HTML中嵌入CSS样式的三种方式

内联定义方式

<div style="font-size:12px; text-align:center;">HTML中引用CSS的行内式方法</div>

样式块

（1）<style type="text/css"></style>
id选择器
标签选择器
class选择器
（2）CSS的注释怎么写

引入外部独立的CSS样式文件

<link href="css文件路径" rel="stylesheet" type="text/css" />

边框

（1）
div{
    border : 1px solid red;
}
（2）
div{
    border-width : 1px;
    border-style : solid;
    border-color : red;
}

隐藏

div{
    display : none;
}

字体

div{
    font-size : 12px;
    color : red;
}

文本装饰

a{
    text-decoration : none;
}

a{
    text-decoration : underline;
}

列表

ul{
    list-style-type : none;
}

设置鼠标悬停效果

:hover

定位

div{
    position : absolute;
    left : 100px;
    top : 100px;
}

鼠标小手

div{
    cursor : pointer;
}

JavaScript

JavaScript概述

（1）简称JS
（2）一种脚本语言，脚本语言的特点
（3）JavaScript和JScript的关系
（4）JavaScript主要用来操作HTML中的节点，产生动态效果
（5）JavaScript和Java的区别

JavaScript包括三块：ECMAScript、DOM、BOM

（1）ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法
（2）DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。
（3）BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。

嵌入JS三种方式以及JS的注释

行间事件

（1）<input type="button" value="hello" οnclick="window.alert('hello js')" />
（2）JS是一种基于事件驱动型的编程语言，当触发某个事件之后，执行一段代码
（3）JS中的任何一个事件都对应一个事件句柄，例如鼠标单击事件click，对应的事件句柄就是onclick，事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS代码，当触发这个事件之后，这段JS代码则执行了。
（4）JS中的字符串可以使用单引号括起来，也可以使用双引号括起来
（5）window是JS中的内置BOM顶级对象，代表当前浏览器窗口，window对象有一个alert()函数，该函数可以在浏览器上弹出消息框。
（6）JS中的一条语句结束后可以使用“;”结尾，也可以不写。
（7）window.alert()中的window.可以省略。

页面script标签嵌入

（1）<script type="text/javascript">JS代码</script>
（2）window.alert()的执行会阻塞当前页面的加载
（3）一个页面中可以写多个脚本块
（4）脚本块的位置没有限制
（5）暴露在脚本块中的JS代码在页面打开的时候遵循自上而下的顺序依次逐行执行

外部引入

（1）<script type="text/javascript" src="js文件路径"></script>
（2）<script type="text/javascript" src="js文件路径">这里不能写JS代码</script>
（3）这种写法错误：<script type="text/javascript" src="js文件路径"/>

标识符和关键字

（1）标识符命名规则和规范按照java执行
（2）关键字不需要刻意记

变量

变量的声明与赋值

（1）变量未赋值，系统默认赋值undefined
（2）JS是一种弱类型编程语言，一个变量可以接收任何类型的数据
（3）一行上也可以声明多个变量

函数的定义与调用

（1）函数类似于java语言中的方法，是一段可以完成某个功能的可以被重复利用的代码片段
（2）定义函数的两种语法
第一种：普通函数定义，这种方式较多
function 函数名(形式参数列表){
    函数体;
}

例如：
function sum(a, b){
    return a + b;
}

注意：
a和b是形式参数列表，也是两个局部变量。
JS中的函数不需要指定返回值类型，因为JS是弱类型编程语言，变量可以接收任何类型的数据，也就是说JS中的函数可以返回任何类型的数据，当然也可以不返回任何数据。返回数据使用return语句。
JS中的函数在调用的时候，实参可以随意，例如调用以上的sum函数，可以这样调用：sum()，没有传任何实参的时候a和b变量没有赋值，则a和b都是undefined。也可以这样调用sum(10)，这样就表示a变量赋值10，b变量仍然是undefined。还可以这样调用：sum(1,2)，这样则表示a是1，b是2。

第二种：如果是把函数的声明当做类进行定义这种方式较多
函数名 = function(形式参数列表){
    函数体;
}

例如：
sum = function(a, b){
    return a + b;
}

（3）JS中的函数定义在脚本块中，页面在打开的时候，函数并不会自动执行，函数是需要手动调用才能执行的。
（4）由于JS是一种弱类型编程语言，所以函数不能同名，没有重载机制
（5）这样的代码顺序是可以的，页面打开的时候会先进行所有函数的声明，函数声明优先级较高。

<script type="text/javascript">

    sayHello();
    
    function sayHello(){
        alert("Hello JS");
    }

</script>
（6）用户点击按钮，调用函数
<script type="text/javascript">
    function sayHello(){
        alert("hello js");
    }
</script>

<input type="button" value="hello" οnclick="sayHello();"/>

局部变量和全局变量

（1）局部变量：函数的形参是局部变量，另外使用var关键字在函数体中声明的变量是局部变量，函数执行结束之后，局部变量的内存就释放了。
（2）全局变量：在函数体外声明的变量属于全局变量，另外不使用var关键字声明的变量无论位置在哪，它都是全局变量，全局变量在浏览器关闭时销毁。

JS数据类型

typeof运算符

JS中为什么会有typeof运算符

typeof运算符怎么用，代码怎么写

语法格式是：
    function sum(a, b){
        if("number" === typeof a && "number"=== typeof b){
            return a + b;
        }
        alert("数据格式不合法");
        return 0;
    }

typeof运算符的运算结果都是全部小写的字符串

"undefined"
"number"
"string"
"boolean"
"object"
"function"

ES6版本之前的数据类型有6种

Undefined

只有一个值undefined，变量声明没赋值，系统默认赋值undefined

Number

（1）Number类型包括哪些值：0,1，-1,3.14,12,300，NaN，Infinity
（2）parseInt()函数
（3）parseFloat()函数
（4）Math.ceil()函数：向上取整
（5）isNaN()函数

String

（1）可以使用单引号，也可以用双引号
（2）JS中的字符串包括小String，也包括大String，小String属于原始类型，大String是JS的内置对象，大String属于Object类型。
（3）无论大String还是小String，它们的属性和方法都是通用的。
（4）字符串中常用方法讲一些，主要讲解字符串的substr()和substring()的区别。

Null

（1）该类型只有一个值：null
（2）typeof运算符的执行结果是"object"

Boolean

（1）只有两个值：true和false
（2）Boolean()函数
（3）JS中的if语句自动调用Boolean()函数。

Object

（1）JS中如何定义一个类。
（2）JS中如何创建一个对象。
（3）JS中如何访问对象属性，调用对象的方法。
（4）JS中的一个函数，既是函数声明，又是类的定义，同时函数名也可以看做构造方法名。直接调用函数表示普通函数调用，如果使用new运算符来调用该函数则会创建对象。
（5）使用prototype属性动态的给对象扩展属性以及方法。

ES6版本及之后包括的数据类型有7种

除了以上6种类型之外，还有一种类型叫做：Symbol

null NaN undefined区别

（1）=、==、===三者的区别
（2）null NaN undefined三者类型不同，null和undefined的值可以等同

JS中的事件

常用事件

（1）blur失去焦点
（2）change下拉列表选中项改变，或文本框内容改变
（3）click鼠标单击
（4）dblclick鼠标双击
（5）focus获得焦点
（6）keydown键盘按下
（7）keyup键盘弹起
（8）load页面加载完毕
（9）mousedown鼠标按下
（10）mouseover鼠标经过
（11）mousemove鼠标移动
（12）mouseout鼠标离开
（13）mouseup鼠标弹起
（14）reset表单重置
（15）select文本被选定
（16）submit表单提交

注册事件的两种方式

（1）在标签中使用事件句柄的方式注册事件
<body οnlοad="sayHello()"></body>
（2）在页面加载完毕后使用JS代码给元素绑定事件
<script>
    window.onload = sayHello;
</script>

<script>
    window.onload = function(){

    }
</script>

重点：通过事件注册，理解回调函数的概念

代码的执行顺序

这是一种错误的写法：
<body>
    <script type="text/javascript">
        var elt = document.getElementById("btn");
    </script>
    <input type="button" id="btn" value="mybtn"/>
</body>

这样写：
<body>
    <input type="button" id="btn" value="mybtn"/>
    <script type="text/javascript">
        var elt = document.getElementById("btn");
    </script>
</body>

或者这样写：
<body>
    <script type="text/javascript">
        window.onload = function(){
            var elt = document.getElementById("btn");
        }
    </script>
    <input type="button" id="btn" value="mybtn"/>
</body>

通过keydown事件演示回车键13，ESC键27

JS运算符之void

void主要讲：javascript:void(0)的用法。

其它运算符和java一样用。

JS之控制语句

告诉学生控制语句和Java一样用，课堂上不再讲解。只讲一下for..in语句的使用，使用for..in语句遍历数组，以及遍历一个对象的属性。

JS内置对象

Array

（1）创建数组
（2）JS中的数组特点
（3）JS中数组对象常用方法：push，pop，join，reverse等。
（4）数组遍历

Date

（1）new Date() 获取当前系统时间
（2）new Date().getTime()获取时间戳
（3）new Date().getFullYear()、getMonth()等方法。

BOM和DOM的区别与联系

DOM编程案例

innerHTML innerText操作div和span

JS的正则表达式(Regular Expression)

正则表达式概述

（1）正则表达式是一门独立的学科，不止用在JS中
（2）正则表达式专门用来做字符串格式匹配的

常用的正则表达式符号

正则表达式：
^    字符串开始
$    字符串结束
\s    空白
*    0~N次
+    1~N次
?    0或1次
{3}    3次
{3,}    3~N次
{3,5}    3~5次
(a|b)    a或b
[a-z]    a到z
[^abc]    不是abc

会写简单的正则表达式

（1）qq号正则
（2）必须由数字和字母组成，不能含有其它符号的正则
（3）了解一些常用的正则表达式

会创建JS中的正则表达式对象

（1）var regExp = new RegExp("^[1-9][0-9]{4,}$");
（2）var regExp = /^[1-9][0-9]{4,}$/;

会调用JS中正则表达式对象的test()函数

写一个校验用户名只能由数字和字母组成的案例

表单验证

（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交

复选框全选和取消全选

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
以上三个函数告知学生很重要

获取下拉列表选中项的value

change事件

显示网页时钟

window.setInterval()
window.clearInterval()
主要两个函数
捎带着提一下window.setTimeout()

拼接html的方式，设置table的tbody

<table>
    <thead></thead>
    <tbody id="userListTbody"></tbody>
</table>
<script>
    var html = "";
    html += "<tr>";
    html += "<td>";
    html += "zhangsan";
    html += "</td>";
    html += "<td>";
    html += "2000-10-11";
    html += "</td>";
    html += "</tr>";

    html += "<tr>";
    html += "<td>";
    html += "lisi";
    html += "</td>";
    html += "<td>";
    html += "2001-10-11";
    html += "</td>";
    html += "</tr>";

    var userListTbody = document.getElementById("userListTbody");
    userListTbody.innerHTML = html;
<script>

会使用浏览器的F12

会使用F12调试面板：第一会调错；第二会定位并查看HTML页面元素。

BOM编程案例

window.open()和window.close()

window.alert()和window.confirm()

如果当前窗口不是顶级窗口，将当前窗口设置为顶级窗口

if(window.top != window.self){
    window.top.location = window.self.location;
}

// ?????????????????
if(window.top != window.self){
    window.top = window.self;
}

历史记录

window.history.back(); window.history.go(-1); window.history.go(1);

window.location.href

提示一下document.location.href也可以完成同样功能

JSON对象

eval函数

怎么创建json对象以及访问json对象的属性

json在开发中有什么用

数据交换作用

写一个这样的JSON

描述一个班级的总人数，另外包括描述班级中每个学生的信息，这样的JSON怎么写

JS中[]和{}的区别

总结一下浏览器向服务器发送请求的常见方式

（1）直接在浏览器地址栏上写URL，get请求。
（2）点击页面超链接，get请求。
（3）提交form表单，可以是get，也可以是post。
（4）window.open(url);
（5）window.location.href=url;
（6）document.location.href=url;