我们不生产代码,但我们是bug的专业制造者

Javascript笔记整理

1.js输出

1
2
3
4
window.alert()弹出警告窗
document.write()将内容写到HTML文档中
innerHTML写入到HTML文档中
console.log()写入到浏览器的控制台

2.js数组,主要有四种方式

1
2
3
4
var arr1 = new Array('a', 'b', 'c'); //这是一个预定义的数组,在创建时初始化
var arr2 = ['a', 'b',' 'c' ]; //同样是在创建时初始化,但是这种创建更为边界直观
var arr3 = new Array( );
var arr4 = [ ]; //这两种是创建空的数组

3.js对象的创建

1
2
3
4
5
6
7
8
9
10
11
function demo1() {
var obj = new Object();
obj.name = "Object";
obj.firstName = "huang";
obj.lastName = "lin";
obj.func = function () {
};
console.log(obj);
console.log(obj.lastName);
}
1
2
3
4
5
6
7
8
function demo2(){
this.name="songlin";
this.boss="sunshuang";
this.func=function(){
}}
var testDemo2=new demo2();
console.log(testDemo2.boss);

4.js Number对象

  • 当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。
  • NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把Number对象设置为该值,来指示其不是数字值。
    你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

    5.字符串转为数组

    1
    2
    3
    4
    txt="a,b,c,d,e"; // String
    txt.split(","); // 使用逗号分隔
    txt.split(" "); // 使用空格分隔
    txt.split("|"); // 使用竖线分隔

6.js去掉字符串收尾空格

JavaScript 本身并不提供 trim() 方法,不过可以用正则表达式,通过给 String 对象增加 trim 方法的方式实现。

1
2
3
4
5
6
7
8
9
10
11
if(typeof(String.prototype.trim) === "undefined")
{
String.prototype.trim = function()
{
return String(this).replace(/^\s+|\s+$/g, '');
};
}
if(" dog ".trim() === "dog") {
document.write("成功去除首尾空格");
}

7.数组的处理方法

  • 合并两个数组

    1
    2
    3
    4
    5
    var hege = ["Cecilie", "Lone"];
    var stale = ["Emil", "Tobias", "Linus"];
    var kai = ["Robin"];
    var children = hege.concat(stale);
    document.write(children);
  • 合并三个数组

    1
    2
    3
    4
    5
    6
    7
    var hege = ["Cecilie", "Lone"];
    var stale = ["Emil", "Tobias", "Linus"];
    var kai = ["Robin"];
    var children = hege.concat(stale,kai);
    document.write(children);
    console:["Jani", "Jenny", "Joe", "Harry", "Liff", "Lufy", "Tom", "John"]
  • 用数组的元素组成字符串

    1
    2
    3
    4
    5
    var fruits=["Banana","Apple","cherry"];
    var result=fruits.join();
    console.log(result);
    console:Banana,Apple,cherry
  • 截取数组

    1
    2
    3
    4
    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1,3);//截取数组下标为1~2的元素
    ----
    console:Orange,Lemon

8.js的数据类型

在 JavaScript 中有 5 种不同的数据类型:
string
number
boolean
object
function
3 种对象类型:
Object
Date
Array
2 个不包含任何值的数据类型:
null
undefined

1
2
3
4
5
6
7
8
9
10
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object

  • NaN 的数据类型是 number,数组(Array)的数据类型是 object,日期(Date)的数据类型为 object,null 的数据类型是 object,未定义变量的数据类型为 undefined

    9.constructor 属性

    constructor 属性返回所有 JavaScript 变量的构造函数。
    例如:
    1
    2
    3
    4
    5
    myArray.constructor.toString()
    返回function Array() { [native code] }
    function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
    }

用来判断对象是否是数组

10.js易错点

  • JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
    所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:
    1
    2
    3
    4
    var x = 0.1;
    var y = 0.2;
    var z = x + y // z 的结果为 0.3
    if (z == 0.3) // 返回 false

为解决以上问题,可以用乘除法来处理
var z = (x 10 + y 10) / 10; // z 的结果为 0.3

  • 在字符串中直接使用回车换行是会报错的:
    1
    2
    var x = "Hello
    World!";

字符串断行需要使用反斜杠(),

1
2
var x = "Hello \
World!";

  • 定义数组元素,最后不能添加逗号
    points = [40, 100, 1, 5, 25, 10,];
  • 定义对象,最后不能添加逗号
    websites = {site:”菜鸟教程”, url:”www.runoob.com”, like:460,}
  • Undefined 不是 Null
    在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。
    对象只有被定义才有可能为 null,否则为 undefined。
    如果我们想测试对象是否存在,在对象还没定义时将会抛出一个错误。
    错误的使用方式:
    if (myObj !== null && typeof myObj !== “undefined”)
    正确的方式是我们需要先使用 typeof 来检测对象是否已定义:
    if (typeof myObj !== “undefined” && myObj !== null)

    11.json

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

    12.javascript:void(0)

    该操作符指定要计算一个表达式但是不返回值,当用于超链接时用户点击不会返回任何东西。
    var a,b,c;
    a = void ( b = 5, c = 7 );
    document.write(‘a = ‘ + a + ‘ b = ‘ + b +’ c = ‘ + c );
    结果:a = undefined b = 5 c = 7
  • href=”#”与href=”javascript:void(0)”的区别

    包含了一个位置信息,默认的锚是#top 也就是网页的上端。

    而javascript:void(0), 仅仅表示一个死链接。
    在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
    如果你要定义一个死链接请使用 javascript:void(0) 。

    13.js函数

  • 如果函数在调用时未提供隐式参数,参数会默认设置为: undefined
    1
    2
    3
    4
    5
    function myFunction(x, y) {
    if (y === undefined) {
    y = 0;
    }
    }

或者,更简单的方式:

1
2
3
4
function myFunction(x, y) {
y=y||0;
}
如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false

  • 作为函数方法调用函数
    call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
    1
    2
    3
    4
    function myFunction(a, b) {
    return a * b;
    }
    myObject = myFunction.call(myObject, 10, 2); // 返回 20
1
2
3
4
5
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray); // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

14.js计时事件

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

1
2
3
4
5
6
7
8
9
10
在页面显示一个时钟
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

1
2
3
4
5
6
7
8
9
10
11
12
<button onclick="myStopFunction()">停止时钟</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>

Css笔记整理

  1. 1. 1.js输出
  2. 2. 2.js数组,主要有四种方式
  3. 3. 3.js对象的创建
  4. 4. 4.js Number对象
  5. 5. 5.字符串转为数组
  6. 6. 6.js去掉字符串收尾空格
  7. 7. 7.数组的处理方法
  8. 8. 8.js的数据类型
  9. 9. 9.constructor 属性
  10. 10. 10.js易错点
  11. 11. 11.json
  12. 12. 12.javascript:void(0)
  • 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
    1. 1. 13.js函数
    2. 2. 14.js计时事件