前端(三)-JavaScript

<input type="button" value="轻轻点我一下" onclick="javascript:alert('正在学习Javascript!')">

<script type="text/javascript">
    function testClickTwo(){
        alert("正在学习JavaScriptTwo")
    }
</script>

<input type="button" value="轻轻点我一下Two" onclick="testClickTwo()">

<!-- 引入外部js脚本文件 -->
<script src="js/test.js" type="text/javascript"></script>

<!--启用strict模式的方法是在JavaScript代码的第一行写上：-->
<script>
    `use strict`;
    // 如果浏览器支持strict模式，下面的代码将报ReferenceError错误:
    abc = 'Hello, world';  //没有使用var声明变量
    console.log(abc);
</script>

`这是一个
多行
字符串`;

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

//定义数组1：var 数组名 =new Array([长度]),长度可以省略
var varArray1 = new Array();
//访问数组元素
varArray1[0] = "LPL";
varArray1[1] = "LCK";
varArray1[3] = "LEL";
console.log(varArray1);

//定义数组2,支持直接初始化
var varArray2 = new Array(10,20,30,40,50);
varArray2[5] = 60;
console.log(varArray2);

//定义数组3：直接支持使用中括号
var varArray3 = [100,90,80];
console.log(varArray3);

var 对象名 = {
    key: 'value',
    key: 'value',
    key: 'value'
}

对象.属性

var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

1 'toString' in xiaoming; // true
//因为 toString 定义在 object 对象中，而所有对象最终都会在原型链上指向 object，所以xiaoming 也拥有 toString 属性。

var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}
//请注意，for... in 对 Array 的循环得到的是 String 而不是 Number 。

//初始化 Map 需要一个二维数组，或者直接初始化一个空 Map;
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

//由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3,3,'3']); // 含1, 2, 3,'3'
//重复元素在 Set 中自动被过滤：3
//通过 delete(key) 方法可以删除元素：

var a = new Array(元素...);
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
})

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
	console.log(value);
});

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
	console.log(element);
});

function abs(x) {
    if (x >= 0) {
    	return x;
    } else {
    	return -x;
    }
}
//一旦执行到 return 时，函数就执行完毕，并将结果返回。
//如果没有 return 语句，函数执行完毕后也会返回结果，只是结果为 undefined 。

var abs = function (x) {
    if (x >= 0) {
    	return x;
    } else {
    	return -x;
    }
};
//在这种方式下， function (x) { ... } 是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量 abs ，所以，通过变量 abs 就可以调用该函数。
//上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个 ; ，表示赋值语句结束。

function foo(x) {
console.log('x = ' + x); // 10
for (var i=0; i<arguments.length; i++) {
console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
}
}
foo(10, 20, 30)

function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

//举例
document.getElementById("cart").style.backgroundColor="#fff";

//carOut类属性时在CSS外部样式中已经存在的
document.getElementById("cart").className = "cartOut";