阶段02JavaWeb基础day02JavaScript

javascript知识体系
ECMAScript
javascript与html结合方式
内部: <script type="text/javaScript">***</script>
外部文件引入: <script type="text/javaScript" src="外部js路径(***.js)" ></script>
javascript数据类型
原始数据类型
null
string
number
boolean
undefined
当初始化一个变量,并且没有为该变量赋值时,系统会默认初始化为undefined
对象的占位符,当我们声明一个变量,并准备在之后为该变量赋值为对象类型时,我们可以先为该变量赋值为null
对象数据类型
javascript这两种数据类型 在内存中的状态 与 java中 一模一样
基本语法
javascript是弱类型语言,声明变量时不用声明变量类型. 全都使用var关键字;
一行可以声明多个变量.并且可以是不同类型(区别java语法);
声明变量时 可以不用var. 如果不用var 那么它是全局变量;(推荐使用var)
变量命名,首字母只能是 字母、下划线、$美元符 三选一;
命名推荐 匈牙利标记法;
每行结束可以不加分号。没有分号会以折行符作为每行的结束(推荐加分号);
注释:支持多行注释和单行注释。 /* */ 、 //
EcmaScript语句
if语句
for语句
while语句
do-while语句
swith语句
注意:语法规则 与 java 一样
javascript运算符
一元运算符
赋值运算符“=”
正数“+”
特殊案例:

+"10" => 10(字符串类型转换成数字类型)

+"abc12" => NaN (NaN无效数字)

NaN特点:参与所有运算都返回false,除了 != ;如:NaN != NaN 返回true
Boolean运算符
!、&&、||
转换规律:(弱类型)
string 向 boolean 转换 : 除了空字符串("") 转换为false , 其他都为true;
number 向 boolean 转换 : 除了 +0 -0 和 NaN 转换为false, 其他都为true;
null 向 boolean 转换 : false;
undefined 向 boolean 转换 : false;
Object 向 boolean 转换 : true;
关系运算符
>、<、>=、<=
两个数字类型进行比较 : 直接比较即可.
一边是其他类型 一边是数字类型 : 将其他类型试图 转换为数字类型. 然后进行比较.
两边都是字符串时 : 从最高为比较 asc码. 如果相同 继续向后比较.
等性运算符
==、!=、===
特殊说明:

undefined == null : true (规定为true)

"NaN" == NaN : false

NaN != NaN : true

true == 1 : true (true转换为 1)

false == 0 : true (false转换为0)

true == 2 : false

"10" == 10 : true

null == 0 : false (null 转换为NaN)

undefined == 0 : false (undefined 转换为NaN)
全等运算符
比较的时候 包括变量的类型也必须相同
ECMA对象分类(两类): 本地对象(native object) 和 主机对象(host object)!!

注意:

以下介绍的都是本地对象 (native object)

主机对象(host object) 包括BOM和DOM
本地对象
Object
Object对象是所有对象的超类. Object中的属性和方法,子类中都有;
toString()
打印一个对象时,默认调用的就是toString方法(跟java一样)
Function
创建方式三种:

1、function fun1(a,b){alert(a+b)}

2、var fun2 = new Function("a","b","alert(a+b)");

3、var fun3 = function(a,b){alert(a+b);};
调用时的特性:调用时 只看函数名称 跟参数没有关系。
函数的内置对象
arguments : 函数运行时的实际参数列表
arguments.length : 获得实际参数个数
arguments[n] : 获取第n个实际参数
内置对象的应用 : 使用arguments完成重载功能!!
return 关键字
方法返回结果
结束当前方法运行
void 运算符:拦截方法返回值。
以下三个对象,是三个原始类型的包装对象
说明:

三个原始类型是伪对象,可以直接使用对应包装对象的方法!

这三个包装对象的构造方法可以用来做类型转换!!
Number
Boolean
String
属性:
length : 返回字符串长度
方法:
不常用的方法(了解):
anchor( ) : 创建 HTML 锚
big( ) : 用大号字体显示字符串
sup( ) : 把字符串显示为上标
sub( ) : 把字符串显示为下标
重要的方法:
charAt( ) : 返回在指定位置的字符
charCodeAt( ) : 返回在指定的位置的字符的 Unicode 编码
indexOf( ) : 检索字符串
lastIndexOf( ) : 从后向前搜索字符串
subString( ) : 提取字符串中两个指定的索引号之间的字符
slice( ) : 提取字符串的片断,并在新的字符串中返回被提取的部分 ( 支持负数 )
与正则结合的方法:
match( ) : 找到一个或多个正则表达式的匹配(了解)
search( ) : 检索与正则表达式相匹配的值(了解)
split( ) : 把字符串分割为字符串数组
replace( ) : 替换与正则表达式匹配的子串
Array
创建方式:
var arr1 = [1,2,3,4]; //初始化元素 var arr2 = [];
var arr2 = new Array(1,2,3,4); //初始化元素
//构造函数只填一个参数并且是数字的话,这个数字是数组的初始化长度

var arr3 = new Array(3);
属性:
length : 获得数组长度
方法:
concat( ) 将两个数组结合成一个数组
join( ) 按照参数的连接符连接元素返会连接后的字符串
pop( ) 弹出并返回最后一个元素
push( ) 向数组末尾添加一个元素并返回数组的最新长度
reverse( ) 将数组元素反转
sort( ) 将数组排序 默认排序规则是按照字符串比较。

如果希望自定义比较规则 需要准备一个比较器(函数)!!
特性
1.数组中的类型,可以任意.不要求是同类型的.
2.数组的长度,使用到哪就有多长.
Date
构造方法:new Date( ) 获取当前时间
方法:
1.new Date() 获取当前时间

2.getFullYear() 获取年份

3.getMonth() 获取月份注意 1月份结果为0

4.getHours() 小时

5.getDate() 日期

6.getMinutes() 分钟

7.getSeconds() 获取秒

8.getDay();获得星期

9.getTime() 获取毫秒值.

10.toLocalString() 获取本地的时间格式字符串.
RegExp
创建方式:
var reg1 = new RegExp("正则表达式","gi");

参数1:正则表达式 、 参数2:匹配模式

g 全局匹配 i 匹配是忽略大小写
var reg2 = /正则表达式/gi;
方法:
test( ) 按照正则的规则匹配某个字符串。 匹配正确返回true 错误返回false
与string结合的4个方法
本地对象(native object)中有一部分特殊的对象: 内建对象 (build in object)

特点: 不需要创建实例,直接使用即可。
Global
方法:
encodeURI( ) 对字符串进行编码 只对中文进行编码
decodeURI( ) 对字符串进行解码
encodeURIComponent( ) 对字符串进行编码 范围比encodeURI要大。

包括一些特定字符 例如 / , : , ? , &
decodeURIComponent( ) 对字符串进行解码
escape( ) 现已过时
unescape( ) 现已过时
isNaN( ) 对某个变量进行判断,是否是NaN。因为NaN == NaN : false;
parseInt( ) 对字符串向数字(整数)转换
parseFloat( ) 对字符串向数字(小数)转换;

以上这两种转换,在转换时是从左到右寻找可以被转换的字符依次转换。
Math
属性:
PI
方法:
random( ) 获得0~1之间的随机数
round( ) 四舍五入取整
min( )/max( ) 返回两个参数中的最小/最大值
pow( 参数1,参数2 ) 获得参数1的参数2次方的值.
BOM(Browser Object Model)
功能上讲: 控制浏览器窗口的. 使用上讲: 与Global 类似.window对象同样不需要创建对象,直接使用即可.
window
一个window对象代表一个html文档。
属性:
self : 自己的所在窗口的window对象
parent : 指向自己父窗口的window对象
top : 指向自己顶层窗口的window对象
frames : 获得所有自己子窗口的window对象数组
opener : 如果一个窗口是使用window.open方法打开的,

那么在新打开的窗口中 要获得打开自己窗口的window对象使用该属性
方法:
alert( ) 提示框
confirm( ) 确认框,返回值是 true / false
prompt( ) 提示输入框,返回值是 用户输入的值
open( ) 打开新窗口

参数1: 新窗口的地址;

参数2(用的比较少): 新窗口的名字;

参数3: 新窗口打开时的一些参数(窗口的宽 高 有没有滚动条, 地址栏,可否调整大小)
close( ) 关闭当前window对象(关闭当前窗口)
setInterval( ) 设置定时器方法(循环执行)

参数1: 要执行的函数;

参数2: 间隔的事件 (毫秒);

返回值是定时器的ID;
clearInterval( ) 停止一个定时器

参数: 要停止的定时器的ID
setTimeout( ) 设置定时器方法(只执行一次)

参数1: 要执行的函数;

参数2: 间隔的事件 (毫秒);

返回值是定时器的ID;
clearTimeout( ) 停止一个定时器.

参数: 要停止的定时器的ID
history
属性:
length : 该窗口访问过的 页面个数
方法:
back( ) 后退
forward( ) 前进
go( ) 跳转

参数接受一个整数;

0代表当前页面;

1代表下一页面;

-1代表上一页面;
location
属性:
href 当前窗口的地址。可以用来做跳转
方法:
reload( ) 重新加载当前页面 !刷新
DOM(Document Object Model)
DOM : Document Object Model (文档对象模型)

整合javascript和html、css,控制html文档行为 ;

DOM就是把页面当中所有内容全部封装成对象 ;

HTML文档中万物皆对象 ;
DOM五类对象
Document(掌握)
Element(掌握)
Attribute(理解)
Text(理解)
Common(理解)
DOM中5类对象,抽象出的父类:Node
自身属性:
nodeName(了解)
nodeValue(了解)
nodeType(了解)
导航属性
firstChild(了解)
lastChild(了解)
parentNode(掌握)
nextSibling(了解)
previousSibling(了解)
childNodes(了解)
Document
获取(文档下的)元素对象
getElementById( )
getElementsByClassName( )
getElementsByTagName( )
getElementsByName( )
Element
获取(该元素下的)元素对象
getElementsByClassName( )
getElementsByTagName( )
事件
javascript是基于对象和事件驱动的脚本语言。

给Element对象附加事件属性 ;

属性的类型是Function类型 ;
事件类别:
onclick : 单击时触发
ondblclick : 双击时触发
onblur : 失去焦点时触发
onfocus : 得到焦点时触发
onchange : 用于表单元素, 当元素被修改时触发
onkeydown : 当键盘按键被按下时
onmousemove : 当鼠标移动时触发
onmousedown : 当鼠标按键按下时触发
onmouseover : 当鼠标指向时触发
onmouseout : 当鼠标移出时触发
onsubmit : 当表单提交时触发
onload : 只给body标签使用.当页面加载完成后 执行
事件详情获得:
我们获得事件详情要找到“侦探”来知道(事件Event对象);

Event对象是在事件发生时被创建, 并传递给我们的事件Function中,所以我们直接使用即可;
Event对象
属性:
keyCode : 按键的ASC码返回值
button : 鼠标按钮(左中右)
clientX : 返回当事件被触发时,鼠标指针的水平坐标。
clientY : 返回当事件被触发时,鼠标指针的垂直坐标。
方法:
preventDefault( ) : 阻止默认关联事件的发生
stopPropergation( ) : 阻止事件的向下传播
页面对象的增删改查
Document对象
createElement( )
Element对象
属性:
innerHTML
方法:
appendChild( ) 追加子节点
removeChild( ) 删除子节点
replaceChild( ) 替换子节点
cloneNode( ) 克隆节点
setAttribute(key,value) 设置属性值
getAttribute(key) 获得属性值
insertBefore() 插入到某元素之前
DHTML(动态网页技术)
整合4门技术 : DOM HTML CSS JavaScript
用通俗的话说: DHTML就是 对我们的之前学的DOM对象进行增强(增加新的属性、获得方法).

猜你喜欢

转载自www.cnblogs.com/MessiXiaoMo3334/p/10055834.html