Javascript初步
Javascript基本概念
Javascript 是 ECMAScript标准的一种实现
基本可以认为 Javascript=ECMAScript
ECMAScript 5: ECMAScript的第五个版本，是2015年之前最主要的Javascript标准。
-
ECMAScript 6：简称ES6，2015年问世后，解决了众多Javascript的痛点问题，但目前并非所有浏览器都能支持。
ES支持情况 DOM（文档对象模型）
-
BOM
- window
- navigator
- screen
- location
- document
- history
-
Javascript的特点：
- 动态：在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。
- 弱类：计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。
基本语法
// 开头的行为注释行
/.../ 为多行注释
= 为赋值符
- 为字符串连接符
数据类型
- 数字
- 字符串
- 布尔型（True / False)
- null
- NaN
- undefined
- 数组（引用类型）
- 对象（引用类型）
注意深浅拷贝
x = [1,2]
y = x
x[0] = 2
y
x = [1,2]
y = JSON.parse(JSON.stringify(x))
x[0] = 2
y
比较运算符
== 相等
=== 全等
==和===的区别
>= 大于等于
<= 小于等于
&& 且
|| 或
! 非
字符串
单引号、双引号
myName = 'cenkai'
'my name is ' + myName + ', hello world!'
`my name is ${myName}, hello world!`
对象
实际上数组只是一种特殊的对象
注意in关键字是对对象使用的，查询对象里的key
判断
if (){...}
else if(){...}
switch(){
case '0':
...
break
default:
...
}
循环
- for
var x = 0;
var i;
for (i=1; i<=10000; i++) {
x = x + i;
}
x;
var a = ['A', 'B', 'C'];
for (var i in a) {
alert(i); // '0', '1', '2'
alert(a[i]); // 'A', 'B', 'C'
}
- while
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
- do while
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
- of 关键字
函数
- 函数声明（会被提升）
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
- 函数定义
var abs = function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
};
- 箭头函数
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
map/reduce
- map
var f = function (x) {
return x * x;
};
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
for (var i=0; i<arr.length; i++) {
result.push(f(arr[i]));
}
arr.map((item)=>{
let x = f(item)
result.push(x)
})
arr.map((item)=>{
return f(item)
})
- reduce
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
dom操作
- document.getElementById()
- document.getElementsByClassName()
- document. getElementsByTagName()
- document. querySelector()
- document. querySelectorAll()
dom事件
<div onclick="switchTab(0)">tab1</div>
<div onclick="switchTab(1)">tab2</div>
<div onclick="switchTab(2)">tab3</div>
<div class="tabBar"></div>
作业
- 写一个生成斐波拉契数列-(1,1,2,3,5,8,13...)的函数
1.
function produce(i, n, result){
if (i >= n - 2) return result
result.push(result[result.length-1] + result[result.length-2])
return produce(i + 1, n, result)
}
result = produce(0, 10, [1,1])
2.
function produce(n) {
let result = [1, 1]
for (let i=0; i<n-2; i++) {
result.push(result[result.length - 1] + result[result.length - 2]);
}
return result
}
result = produce(10)
- 用多种方式完成[1,[3,4],[5,[7,8],0]]这个数组的扁平化�
1. [1,[3,4],[5,[7,8],0]].toString().split(',')
2. function produce (ori, result){
if (Array.isArray(ori)){ // Array.isArray函数用于判断一个变量是不是数组
let item;
for (item of ori){
result = produce(item, result);
}
}
else{
result.push(ori)
}
return result
}
produce([1,2,[3,4]], [])
- 基于上一题结果写一个获取[1,[3,4],[5,[7,8],0]]数组最大值的函数
let raw = [1,[3,4],[5,[7,8],0]].toString().split(',');
raw.reduce((x,y)=>{ // 箭头函数
return x>y?x:y // 注意三目运算符，简化if else的写法
})
- 通过js控制dom完成一个 tabbar的移动特效
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
</head>
<body style="margin: 0">
<div class="container">
<div class="tab" onclick="switchTab(0)">选项1</div>
<div class="tab" onclick="switchTab(1)">选项2</div>
<div class="tab" onclick="switchTab(2)">选项3</div>
<div id="bar"></div>
</div>
</html>
</body>
<style>
.container{
width: 100%;
display:flex;
border-bottom: 1px solid #DDD;
position: absolute;
}
.tab{
width: 33.333%;
line-height: 2.4;
font-weight: bold;
text-align: center;
color: forestgreen;
}
#bar{
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 33.33%;
background: forestgreen;
transition: left 0.3s;
}
</style>
<script type="text/javascript">
function switchTab(index){
document.getElementById('bar').style.left = index * 33.33 + '%';
}
</script>
