window对象-BOM-DOM-ECMA

2017-08-16 本文已影响0人轻思维

window对象-8.17

by 曾庆林

复习

数组的常见方法
数组的遍历3种方法
数组如何去重

作业讲解

随机生成指定长度的字符串
实现一个算法，随机生成指制定长度的字符串。
比如给定 长度 8  输出 4ldkfg9j


function randomString(n) {  
  // 包含所有字符的字符串
  var str = 'abcdefghijklmnopqrstuvwxyz9876543210';
  var tmp = '',
  // 临时的字符串变量 用来存取生成的随机字符串
      i = 0,
      l = str.length;
  for (i = 0; i < n; i++) { // 需要多长的随机字符串 就要循环多次次（也就是n次）
    tmp += str.charAt(Math.floor(Math.random() * l));
    // 随机取一个字符并加入 临时字符串中
  }
  return tmp; 
  //返回的随机字符串
}

判断一个单词是否是回文？

回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。比如 mamam   

很多人拿到这样的题目非常容易想到用for 将字符串颠倒字母顺序然后匹配就行了。其实重要的考察的就是对于reverse的实现。其实我们可以利用现成的函数，将字符串转换成数组，这个思路很重要，我们可以拥有更多的自由度去进行字符串的一些操作。

function checkRetrunWord(str) {  
   return str == str.split('').reverse().join('');
   // str.split('')字符串转换为数组
   // reverse() 将数组反转
   // join('') 将反转的数组转换为字符串
}

单词预习

parse | 转换
int | 整数
Float | 浮点数（小数）
NaN | not a number 不是一个数
BOM | （不用记）Browser Object Model 浏览器对象模型
DOM | （不用记）Document Object Mode 文档对象模型
history | 历史
location |地址
close |关
open |打开
back |返回
foword |前进
go | 去
reload | 重新加载

知识点讲解

4.1 常用window 系统对象

名称	说明
parseInt	将字符串转换为整型数字如: parseInt ("86")将字符串“86”转换为整型值86
parseFloat	将字符串转换为浮点型数字如: parseFloat("34.45")将字符串“34.45”转换为浮点值34.45
isNaN()	用于检查其参数是否是非数字
prompt	显示可提示用户输入的对话框
alert	显示带有一个提示信息和一个确定按钮的警示框
confirm	显示一个带有提示信息、确定和取消按钮的对话框
close	关闭浏览器窗口
open	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout	在指定的毫秒数后调用函数或计算表达式
setInterval	按照指定的周期（以毫秒计）来调用函数或表达式

4.2 javascript组成

image

1. EMCAScript

ECMAScript 不是一种编程语言，仅仅是一种脚本语言规范，由欧洲计算机协会制定和发布，任何基于此规范实现的脚本语言都要遵守它的约定。

ECMAScript 规定了 JavaScript 脚本的核心语法，如数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。Web 浏览器对于 ECMAScript 来说只是一个宿主环境，但它并不是唯一的宿主环境。事实上，还有不计其数的其他各种环境（例如Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript，如现在很火的nodejs）可以容纳 ECMAScript 实现。也就是说除了我们常说的JavaScript是基于他实现的，另外还有其他的语言也是根据他实现的

2. BOM
浏览器对象模型是针对浏览器或者说是针对浏览器窗口的应用程序编程接口。这个概念实现就没有了标准规范了，都是根据各自浏览器厂商自定的规范实现的，但是也基本趋于一致。最多的像我们常用的navigator、window里的一些浏览器相关的对象、location等对象都是这个接口所提供的内容

image
　　
　　
3. DOM
文档对象模型（DOM，Document Object Model）是针对XML 但经过扩展用于HTML 的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML 页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

举一个很简单的例子，我们所熟悉的getElementById函数是document对象下的一个方法。document对象就是DOM中定义的一个内容，浏览器实现了他，依据EMCAScript的特性，然后我们又可以通过他来获取到页面中的某一个节点，获取到的这个节点被实现为一个对象，他拥有许多属性和方法，这些属性和方法也是在DOM的定义下由浏览器实现的。但是DOM的这些实现依据的是EMCAScript规范所制定的语言的特性，所以这才会让我们误认为他们就是JavaScript，其实这个只是JavaScript的组成部分而已

image

4.3 window open 和close 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

window.open(URL,name,specs,replace)

specs 参数不需要掌握

参数	说明
URL	打开指定的地址
name	_blank _self
specs参数	height=100 高 width=100 宽 left=100 该窗口的左侧位置 top=100 窗口顶部的位置. location=yes&#124no	1	0 是否显示地址字段.默认值是yes menubar=yes	no	1	0 是否显示菜单栏.默认值是yes resizable=yes	no	1	0 是否可调整窗口大小.默认值是yes scrollbars=yes	no	1	0 是否显示滚动条.默认值是yes status=yes	no	1	0 是否要添加一个状态栏.默认值是yes titlebar=yes	no	1	0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes toolbar=yes	no	1	0 是否显示浏览器工具栏.默认值是yes

specs 谷歌只支持前四项目（咱们也就记 width height top left）

function open_win() { 
    window.open("http://www.520mg.com"); 
}

function openWin(){ 
    myWindow=window.open('','_blank','width=200,height=100'); 
    myWindow.document.write("<p>这是'我的窗口'</p>"); 
    myWindow.focus(); 
}

function open_win(){
    window.open("http://www.520mg.com","_blank","toolbar=yes, location=yes,  status=no, menubar=yes, scrollbars=yes, resizable=no, width=400, height=400");
}

关闭窗口
自己打开的才能自己关闭

<script>
var myWindow;
function openWin(){
    myWindow=window.open("","","width=400,height=200");
}
function closeWin(){
    if (myWindow){
        myWindow.close();
    }
}
</script>
<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />

4.4 hsitory 对象

back() 后退历史记录
forward() 前进历史记录
go() 跳转到某个历史记录

4.5 location 对象

href 获取当前的地址如果设置值是跳转到设置地址
reload() 刷新（重新加载）

4.6 扩展

console.log(window)
console.log(window.location)

判断对象的数据类型 (* 面试必会被问到)

null：空、无。表示不存在，当为对象的属性赋值为null，表示删除该属性
undefined：未定义。当声明变量却没有赋值时会显示该值。可以为变量赋值为undefined
number：数值。最原始的数据类型，表达式计算的载体
string：字符串。最抽象的数据类型，信息传播的载体
boolean：布尔值。最机械的数据类型，逻辑运算的载体
object：对象。Array Math String Date Object

typeof  简单数据类型  typeof ”123“
instanceof 复杂数据类型  [] instanceof Array
constructor 检查构造函数 [].constructor == Object
Object.prototype.toString  最简单 Object.prototype.toString.call([])

复习

window 常用方法有哪些
默写 history 的方法
默写 location 对象的方法