前端WEB开发校招准备笔记（二）-javascript

输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

字面量

在编程语言中，一般固定值称为字面量，如 3.14。
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量 可以使用单引号或双引号。
表达式字面量 用于计算。
数组（Array）字面量 定义一个数组。
对象（Object）字面量 定义一个对象。
函数（Function）字面量 定义一个函数。

对象对象：
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

Undefined 和 Null

var person = null;           // 值为 null(空), 但类型为对象
var person = undefined;     // 值为 undefined, 类型为 undefined

null不会清空类型，undefined会清空类型

字符串

1.字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号
2.可以使用内置属性 length 来计算字符串的长度
3.在 JavaScript 中，字符串写在单引号或双引号中。
因为这样，以下实例 JavaScript 无法解析：

"We are the so-called "Vikings" from the north."

可以使用反斜杠 () 来转义 “Vikings” 字符串中的双引号，如下:

"We are the so-called \"Vikings\" from the north."

4.javascript中“===” 为绝对相等，即数据类型与值都必须相等。
5.字符串中的方法命名很多和java中的相同，具体再查表，这里不罗列
6.字符串的换行需要用反斜杠()

var x = "Hello \
World!";

for/in遍历

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

typeof

你可以使用 typeof 操作符来检测变量的数据类型

typeof "John"                // 返回 string 

正则表达式

1.search()方法：查找字符串中指定正则表达式的位置
2.replace()方法：将字符串中指定正则表达式的部分替换为另一个字符串，并返回结果作为函数返回值
3.test()方法：测试某字符串是否与某正则表达式相匹配

bool类型

表达式值为0为false,表达式值为非0为true

程序块作用域

在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10，而不是 undefined：

for (var i = 0; i < 10; i++) {
    // some code
}
return i;

表单验证

1.自动验证：如果表单字段 (fname) 的值为空, required 属性会阻止表单提交
2.邮箱验证：

function emailCheck(){
    var email = document.forms["myForm"]["email"].value;
    var index1 = email.indexOf("@");
    var index2 = email.lastIndexOf(".");
    if(index1 < 1 || index2 < index1 + 2 || index2 + 2 > email.length){
        document.getElementById("emailAlert").innerHTML = "非法邮箱";
        return false;
    }
    return true;
}

this关键字

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
注意 this 是保留关键字，你不能修改 this 的值。

let和const

var声明的变量不具备块级作用域的性质，如：

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

这样重复定义的话，第二次声明会覆盖第一次的，这里可以使用let,定义的范围就是块级作用域的，所以循环遍历用let比较好

for(let i = 0; i < 5; i++){...}

const声明的常量并非是真的常量，const 可以定义一个变量能调用的不变的值

JSON

JSON.parse():用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify():用于将 JavaScript 值转换为 JSON 字符串。

href="#"与href="javascript:void(0)"的区别

arguments对象

argument 对象包含了函数调用的参数数组。通过这种方式你可以很方便的找到最大的一个参数的值

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

DOM对象

查找HTML元素
getElementById():通过id查找HTML元素
getElementByTagName():通过标签名字查找
getElementByClassName():通过类名字查找

改变HTML
document.write()：用于直接向 HTML 输出流写内容
改变HTML元素内容：document.getElementById(id).innerHTML=新的 HTML
改变HTML元素属性：document.getElementById(id).attribute=新属性值

改变CSS

document.getElementById(id).style.property=新样式

事件：
onload和onunload：进入和离开页面的时候触发

元素（结点）

在进行结点操作之前都必须先创建好新的HTML元素结点

appendChild()：
1.在已经存在的元素后面添加某元素
2.创建新的HTML元素结点

insertBefore()：将新元素添加到开始位置

removeChild()：移除一个元素（你需要知道这个元素的父元素）

replaceChild()：替换一个元素

HTML collection
getElementsByTagName() 方法返回 HTMLCollection 对象。
以下代码获取文档所有的 <p> 元素：

var x = document.getElementsByTagName("p");

访问第二个元素可以用下面的方法：

   y = x[1]; 

HTMLCollection 对象的 length 属性定义了集合中元素的数量。

注意:
HTMLCollection 不是一个数组！HTMLCollection 看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合,NodeList 是一个文档节点的集合,NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。

javascript对象

这个例子创建了对象的一个新实例，并向其添加了四个属性：

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 

替代语法（使用对象 literals）：

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}; 

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

JavaScript for…in 语句循环遍历对象的属性。

定义完结构对象以后，可以通过prototype在结构函数外为结构体新增属性

/*
利用prototype给Person的构造函数添加新的属性
*/
Person.prototype.name = function(){
//firstName和secondName为person对象的两个属性
    return this.firstName + this.secondName;
}

数字对象

1.javascript的数字对象均为64位
2.如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。

var y = 0377;
var z = 0xFF;

所以，绝对不要在数字前写零，除非你需要进行八进制转换
3.可以用toString() 方法输出16进制，8进制，2进制。

var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

4.无穷大：当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。

5.NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

String 对象

length属性：返回string对象的长度
indexOf():定位字符串中某一个指定的字符首次出现的位置，没找到返回-1
match():查找字符串中特定的字符,找到返回这个字符，没找到就返回null
toUpperCase() / toLowerCase():大小写转换
split()把字符串转换为数组

Date对象

new Date()：获取当前日期

数组对象

javascript中的数组对象支持存放不同类型的对象，可以调用数组的内置的对象来实现一些效果:length返回数组的长度，indexof()返回指定对象在数组中的索引

合并两个数组 - concat()
合并三个数组 - concat()
用数组的元素组成字符串 - join()
删除数组的最后一个元素 - pop()
数组的末尾添加新的元素 - push()
将一个数组中的元素的顺序反转排序 - reverse()
删除数组的第一个元素 - shift()
从一个数组中选择元素 - slice()
数组排序（按字母顺序升序）- sort()
数字排序（按数字顺序升序）- sort()
数字排序（按数字顺序降序）- sort()
在数组的第2位置添加一个元素 - splice()
转换数组到字符串 -toString()
在数组的开头添加新元素 - unshift()

浏览器对象模型（BOM)

window.open():打开新页面
window.close():关闭当前页面
screen.availWidth:返回屏幕可用宽度
screen.availHeight:返回屏幕可用高度
location.href：返回当前页面url
location.pathname:返回页面url路径名
location.assign(url):加载新的文档，也可以跳到别的页面
history.back() :加载历史列表中的前一个 URL
history.forward():加载历史列表中的下一个 URL

弹窗

警告框：alert()
确认框：confirm()（返回值为按下的按钮）
提示框：prompt()（返回值为输入的值）

计时

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}

function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
    clearTimeout(myVar);
}