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

﹏ヽ暗。殇╰゛Y 2024-04-17 05:24 84阅读 0赞

## 输出 ##

使用 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);
    }