变量 、作用域、内存 基本包装类型 内置对象 BOM DOM

复习

. 
[a-z]
\d
\D
\w
\W
\s
\S
baidu|guge|so
() $1 $2 $3  
+
? 
*
{m,n}
{n}
{n,}
^  []    //
$

guize.test(内容); true false
      exec(内容) 匹配到的内容

内容.match(规则)
    replace
    search
    split

变量 、作用域 、内存

全局 不可以调用局部的  
局部可以调用全局  
if(){

}
for(){

}
for 和 if 不存在作用域  也就是说  

if(true){
    var color = 'red';
}
function box(){
    var color = 'blue';
}
alert(this.color); //red  函数可以直接调用 if中的变量   


数组  对象  正则表达式  统称为 引用类型   typeof 查看的时候 返回object   

需求 查看是否是  数组 正则  对象     instanceof  只能判断引用类型 

var test = /test/ig;
//alert(typeof test);
console.log(test instanceof RegExp);

var test1 = [1,2,3,4,5];
//alert(typeof test1);
console.log(test1 instanceof Array);

var test2 = {};
console.log(test2 instanceof Object);


js 具备自动的垃圾回收机制 

function box(){
    i='test';   //这个时候 i变成全局 
}
对于全局的变量 及对象来讲 我们怎么样释放内存   


var box ={
    name:'zangsan',
}

box = null; //释放内存   

全局变量  对象 用完了以后记得 null 释放  

基本包装类型

• 什么是基本包装类型 了解
  
  • js数据类型分为 基本类型和引用类型 原本是引用类型 才可以使用 对象.属性 对象.方法()
  • 但是系统也给了 字符串 number boolean 类型一些权限 它们也可以 实线 基本类型变量名.方法()
  • 相当于给基本类型 包装了 一下 于是 叫做 基本包装类型
• boolean
  
  • 没有特定的属性和方法
• number
• string

number类型的属性和方法

alert(Number.MAX_VALUE);

alert(test.toString());//123456.789
alert(test.toLocaleString());//123,456.789
alert(test.toFixed(2));*/
console.log(test.toExponential());//以指数的形式表示数字 1.23456789e+5
console.log(test.toPrecision(3));//也是以指数的形式体现 但是 可以指定小数点后面的位数
1.23e+5

string 类型

以上方法 用来操作 字符

操作字符串的方法

var box = '玛莎玛拉';
//alert(box.concat('买油','脉动','!'));
/*console.log(box.slice(1));
console.log(box.slice(1,3)); //[1，3)
console.log(box.slice(0));*/
/*var box1 = box.slice(1);
//跟数组方法 slice 一样  1表示从下标为一的元素开始截取  直到最后包含第一个元素
console.log(box1); 莎玛拉
console.log(box);玛莎玛拉
console.log(box.substring(2));*/玛拉


console.log(box.substr(0,2)); //玛莎


console.log(box.length);
console.log(box.slice(-3));//box.length+（-3） 相当于slice(1)            
console.log(box.slice(3,-1));//slice 3,box.length+（-1）
console.log(box.substr(3,-1)); //如果第二个参数为负数 变成0

字符串位置方法

var box = '我的院子里有两棵树,一颗正树，一颗负两树';

console.log(box.indexOf('两'));//6 返回所在的索引位置
console.log(box.indexOf('鲁'));//如果字符不存在 返回-1
console.log(box.indexOf('两',1));//从1开始向后找 找到返回所在的位置  找不到返回-1
console.log(box.lastIndexOf('两'));//相同字符 最后出现的位置 取第二个两的位置
console.log(box.lastIndexOf('两',3));//从下边为3的位置开始向前查找

转大小写

只有部分语言支持本地化特性 比如土耳其语言

字符串模式匹配方法

console.log(box.match('good')); //返回匹配到的字符串
console.log(box.replace('good','cool'));//将good 替换成cool  
console.log(box.search('study'));
console.log(box.split(' ') instanceof Array);

额外了解的方法 没多大的意义

document.write(box.link("www.91talk.com"));
document.write("<br />");
document.write(box);
document.write("<br />");
document.write(box.big());
document.write("<br />");
document.write(box.bold());
document.write("<br />");
document.write(box.fontcolor('pink'));
document.write("<br />");
document.write(box.fontsize('100px'));
document.write("<br />");
document.write(box.small());
document.write("<br />");
document.write(box.fixed());

内置对象

• Global 对象
• Math 对象

global 对象

• encodeURI() 不需要加对象名 直接用方法即可
• eval() 可以解析并运行js代码 功能强大 但是不太安全 容易sql注入

var box = '//test扛把子'; //只编码中文  
alert(encodeURI(box));

//eval('alert("123")'); //解析弹出代码  
eval('var box="test"');//解析了字符串代码 
//alert(box);
eval('function test(){return "666";}');
console.log(test());

Math对象

常用属性

console.log(Math.PI); //Π的值 
console.log(Math.E);//e的值  对数的底数 
console.log(Math.SQRT1_2);//1/2的平方根
console.log(Math.SQRT2);//2的平方根

常用方法

console.log(Math.min(11,22,33,4,55));
console.log(Math.max(11,22,33,4,55));
console.log(Math.ceil(10.1));//11
console.log(Math.floor(10.1));//10
console.log(Math.round(10.6));//11
console.log(Math.round(10.1));//10*/
console.log(Math.random())

需求: 生成1-100之间的随机数 5-50之间的随机数

公式:console.log(Math.floor(Math.random()*总数+第一个数));
console.log(Math.floor(Math.random()*100+1));
console.log(Math.floor(Math.random()*46+5));

扩展 精确的指定范围

//这个方法用来精确生成指定范围随机数
//mins 开始 
//maxs 结束 
function selectFrom(mins,maxs){
    var sums = maxs-mins+1;
    return Math.floor(Math.random()*sum+mins);
}


for (var i=0;i<10;i++) {
    document.write(selectFrom(5,10));
    document.write('<br />');
}

Math对象 其它方法

BOM

browser object model 浏览器对象模型

• window对象
• history对象
• location对象

window对象

open方法

window.open('http://www.qfedu.com');//新建一个窗口并且打开url
//window.open('http://www.qfedu.com','qf');//新建一个窗口 命名并且打开url
//window.open('http://www.qfedu.com','_blank');//blank 新建页面
window.open('http://www.qfedu.com','_parent'); //_prant 表示在父页面
window.open('http://www.qfedu.com','_self'); //_self 表示在当前页面

open方法的参数


window.open('http://www.qfedu.com','qianfeng','width=400,height=300,toolbar=yes,top=200,left=300');


获取页面的高度 宽度 页面最大化 页面缩小 这些值是发生变化的

console.log(outerWidth); //页面的宽度+边框
console.log(innerWidth); 
console.log(outerHeight); //页面的高度+边框
console.log(innerHeight);

location 对象 一定在服务器打开 比如hbuider 不要本地打开

console.log(location.hostname);//127.0.0.1
console.log(location.port);//8020
console.log(location.protocol);//http:
console.log(location.href);//http://127.0.0.1:8020/day8/bom.html
location.assign('zoumadeng.html'); //相当于href 跳转到指定的页面           

history 对象 对历史记录进行操作

<a href="zoumadeng.html">走马灯</a>
<a href="javascript:qianjin()">前进</a>
<a href="javascript:backto()">后退</a>
<a href="javascript:go(4)">跳转到</a>
function backto(){
    history.back();
}

function qianjin(){
    history.forward();
}

function go(num){
    history.go(num);  //-1 表示后退一个历史记录
                     //1 表示向前跳转一个历史记录
}