『黑马程序员济南』JavaEE就业笔记串讲---JS【JS的概述】
?什么是JavaScript：
运行在浏览器端的脚本语言!
?JavaScrpt的组成：
ECMAScript：JavaScript的基本的语法
BOM：Browser Object Model
：
DOM：Document Object Model
：
?其他的脚本语言：
JavaScript,ActionScript,Flex
?JS的用途：
使页面更加丰富,使页面动起来！！！
【JS的基本语法】
?区分大小写：
?弱变量类型语言：（与Java不同）
* Java
* int i = 3;
* String s = “abc”;
* JavaScript:
* var i = 3;
* var s = “abc”;
?分号可有可无：
?变量命名：
【JS的数据类型】
JS将数据类型分成两类：
* 原始类型：
* undefined：未定义类型
* boolean:布尔类型
* number:数字类型
* string:字符或字符串.
* null：空
* 引用类型：
* 对象类型.对象类型默认值是null.
【JS的运算符】
JS中的运算符与Java中基本一致！
JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.
【JS的语句】
JS中的语句与Java的语句一致！
【JS的通常开发的步骤】
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.
定义函数:
* function 函数名称(){
// 函数体
}
* window.onload = function(){
}
常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...
【JS的引入方式】
通常两种方式：
一种：页面内直接编写JS代码,JS代码需要使用.
二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
将JS的代码定义成一个文件引入:
获得页面中的元素:
* document.getElementById(“”);
正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
【HTML的window对象】
* setInterval();
:每隔多少毫秒执行某个表达式.
* setInterval(“change()”,5000);
* setTimeout();
:隔多少毫秒执行一个该表达式.
* setTimeout(“change()”,5000);
【CSS的显示和隐藏的属性】
* display
* block：显示元素：
* none：隐藏元素：
JS中的BOM对象:
?Window
* alert();
--弹出对话框
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm();
--弹出一个确认窗口
* prompt();
--弹出一个可输入的对话框
* open();
--打开一个新窗口
?Navigator ：包含的是浏览器的信息.
?Screen:用来获得屏幕信息:
?History:浏览器的历史对象:
?Location:包含URL信息的对象
【JS的输出】
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
【JS的事件】
* onfocus
:获得焦点.
* onblur
:失去焦点.
* onsubmit
:提交的时候.
JS的事件的总结：
* onload
:
* onclick
:
* onsubmit:
* onfocus
:
* onblur
:
* onchange:下拉列表改变事件.
* ondblclick:双击某个元素的事件.
键盘操作事件:
* onkeydown
:
* onkeyup
:
* onkeypress:
鼠标操作事件：
* onmousemove：
* onmouseout：
* onmouseover：
* onmousedown
* onmouseup
【使用JS获得表格的行数】
* 获得到控制的表格元素:
* var tab1 = document.getElementById(“tab1”);
* var len = tab1.rows.length;
表格中的tbody和thead标签
function changeColor(){
// 获得操作的表格的控制权:
var tab1 = document.getElementById("tab1");
// 获得tbody中的所有的行.
var len = tab1.tBodies[0].rows.length;
for(var i = 0;i< len ;i++){
if(i % 2 == 0){
tab1.tBodies[0].rows.style.backgroundColor = "green";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}
【DOM的概述】
?什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
?DOM的使用：
知道document，element，attribute中的属性和方法
【DOM的常用的操作】
?获得元素：
* document.getElementById();
-- 通过ID获得元素.
* document.getElementsByName();
-- 通过name属性获得元素.
* document.getElementsByTagName();
-- 通过标签名获得元素.
?创建元素：
* document.createElement();
-- 创建元素
* document.createTextNode();
-- 创建文本
?添加节点：
* element.appendChild();
-- 在最后添加一个节点.
* element.insertBefore();
-- 在某个元素之前插入.
?删除节点：
* element.removeChild();
-- 删除元素
【使用DOM完成对ul中添加一个li元素】
function addElement(){
var city = document.getElementById("city");
// 创建一个元素:
var liEl = document.createElement("li");
// 创建一个文本节点:
var text = document.createTextNode("深圳");
// 添加子节点:
liEl.appendChild(text);
city.appendChild(liEl);
}
【JS中创建数组】
【JS的事件】
下拉的列表的改变的事件.onchange.
【JS的DOM的操作】
JS的内置对象:
?Array:
?Boolean:
?Date:
* http://www.baidu.com?time=new Date().getTime();
?Math对象:
?String对象:
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr();
JS的全局函数：
* parseInt();
* parseInt(“11”);
* parseFloat();
* parseFloat(“32.09”);
* 编码和解码的方法：
// 解码
* decodeURI();
* decodeURIComponent();
// 编码
* encodeURI();
* encodeURIComponent();
eval函数：
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss); |
