JavaScript
1.js简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="myjs.js"></script>
</head>
<body>
<!-- js的书写位置-->
<div></div>
<script>
// js的单行注释
/*
js的多行注释
js的多行注释
js的多行注释
js的行注释
*/
var a = 1;
a = 10;
console.log(a)
// 定义常量
const pi = 3.14
console.log(pi)
let b = 1
console.log(b)
</script>
</body>
</html>
2.js数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// c = 123e5 => 123 * 10 ** 5 =》 1.23 * 10 7
// c = 123e-5 => 123 * 10 ** 5
var a = '123'
var b = 123
var c = 123.12
var d = '123.12'
// console.log(typeof a);
// console.log(typeof b);
// console.log(typeof c);
// console.log('hello' + 'world');
// console.log(b + a)
// console.log(b + parseInt(a))
// console.log(b + parseFloat(d))
// console.log(typeof Number(a))
// console.log(typeof Number(d))
// a = parseInt(a)
// console.log(parseInt(a))
// console.log(typeof a)
// console.log(typeof parseInt(a))
// console.log(Number(a))
// console.log(typeof a)
// console.log(parseInt('123fssdfds423432dfsdfd'))
// console.log(parseInt('fsdfsdfs123fsdfsdfd'))
// var s = 's'
// var s1 = "a"
var s = 'hello babydsadasbaby'
var s1 = 'oldboy';
var s2 = 'ly';
// console.log(s.length)
// console.log(s.charAt(7))
// console.log(s.concat(s1,' ',s2,s3,s4))
// console.log(s + ' ' + s1 + s2)
// console.log(s.indexOf('baby'))
// console.log(s.indexOf('baby1') == -1)
// s.toUpperCase()
// var s = 'my name is ly, my age is 18'
var name = 'ly'
var age = 18
// s = 'my name is ' + name + ', my age is ' + age
// console.log(s)
// 模板语法， es6的语法
var s = `my name is ${name}, my age is ${age}`
console.log(s)
var s1;
</script>
</body>
</html>
3.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var a = [1, 2, 3]
// console.log(a.length)
// console.log(a[0])
// console.log(a[1])
// console.log(a[2])
// a.push(4)
// console.log(a)
// var b = ['a', 'b', 'c']
// console.log(b.join(','))
// var c = 'a|b|c|d'
// console.log(c.split('|'))
var arr = [1, 4, 6, 783, 3, 5, 7]
// arr.sort()
// console.log(arr)
// console.log(arr.reverse())
// arr.forEach(function (value, index) {
// console.log(value, index)
// })
var a = [10, 20, 30, 40];
for (var i = 0;i < a.length;i++) {
console.log(i);
}
//
// var i=0;
// for (;i<a.length;) {
// console.log(a[i])
// i += 1
// }
</script>
</body>
</html>
4.运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var x = 10;
var res1 = x++;// 先赋值在加1
var res2 = ++x;// 先加1，在赋值
console.log(res1)
console.log(res2)
var a = 10;
// if (a > 5) {
// console.log("yes");
// console.log("yes");
// console.log("yes");
// console.log("yes");
// console.log("yes");
// console.log("yes");
// console.log("yes");
// } else {
// console.log("no");
// }
// var a = 10;
// if (a > 5) {
// console.log("a > 5");
// } else if (a < 5) {
// console.log("a < 5");
// } else {
// console.log("a = 5");
// }
var day = new Date().getDay();
console.log(day)
switch (day) {
case 0:
console.log(123)
break
case 1:
console.log("Monday");
break;
}
</script>
</body>
</html>
5.三元运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var a = 1;
// var b = 2;
// var c = a > b ? a : b
// console.log(c)
var a = 10, b = 20;
var x = a > b ? a : (b == "20") ? a : b;
</script>
</body>
</html>
6.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 定义函数
function f() {
// console.log(123)
// console.log(123)
// console.log(123)
// console.log(123)
// console.log(a, b)
// console.log(c, d)
// console.log(a)
// console.log(arguments)
// console.log(arguments[1])
// console.log(arguments[2])
// console.log(arguments[3])
// console.log(arguments[4])
// console.log(arguments.length)
console.log(123)
return [1, 2, 3, 4]
}
// // 调用函数
// var res = f(1, 2, 3, 4, 5)
// console.log(res)
// 匿名函数方式
var sum = function (a, b) {
return a + b;
}
sum(1,2)
</script>
</body>
</html>
7.局部变量和全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var city = "BeiJing";
// function f() {
// // var city = "ShangHai";
//
// function inner() {
// // var city = "ShenZhen";
// console.log(city);
// }
//
// inner();
// }
//
// f(); //输出结果是？
// var city = "BeiJing";
//
// function Bar() {
// console.log(city);
// }
//
// function f() {
// var city = "ShangHai";
// return Bar;
// }
//
// var ret = f();
// ret(); // 打印结果是？
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner() {
console.log(city);
}
return inner;
}
var ret = f();
ret();
</script>
</body>
</html>
8.自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 自定义对象,两种方式
// 1. 第一种方式
var obj = {'username': 'egon'} // object, 空对象
// 增加
// obj.age = 10;
// obj['gender'] = 'male';
//
// // 修改
// obj.age = 11
//
// // 删除
// delete obj.age
// console.log(typeof obj)
// console.log(obj)
// 第二种方式
var obj1 = new Object()// {} object, 空对象
obj1.age = 10;
obj1['gender'] = 'male';
// 修改
obj1.age = 11
console.log(typeof obj1)
console.log(obj1)
// console.log(obj.age)
console.log(obj1.age)
// {'username':'aaa', 'password':'123'}
var a = {"name": "Alex", "age": 18};
// 遍历对象的
for (var i in a) {
console.log(i, a[i]);
}
</script>
</body>
</html>
9.date对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var d = new Date();
// getDate() 获取日
// getDay () 获取星期
// getMonth () 获取月（0-11）
// getFullYear () 获取完整年份
// getYear () 获取年
// getHours () 获取小时
// getMinutes () 获取分钟
// getSeconds () 获取秒
// getMilliseconds () 获取毫秒
// getTime () 返回累计毫秒数(从1970/1/1午夜)
// console.log(d.getDate())
// console.log(d.getDay())
// console.log(d.getMonth())
// console.log(d.getFullYear())
// console.log(d.getYear())
// console.log(d.getMinutes())
// console.log(d.getSeconds())
// console.log(d.getMilliseconds())
// console.log(d.getTime())
console.log(d.toLocaleString())
</script>
</body>
</html>
10.json对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// json
// dumps JSON.stringify(obj1) object类型转换string
// loads JSON.parse(str1) string转换object对象类型
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
console.log(typeof obj1)
console.log(JSON.stringify(obj1))
console.log(typeof JSON.stringify(obj1))
// str_obj = JSON.parse(str1) // 反序列化
// console.log(str_obj)
// console.log(str_obj.name)
// console.log(typeof str1)
// console.log(typeof str_obj)
</script>
</body>
</html>
11.正则对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 定义正则表达式两种方式
// var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
// var reg1 = new RegExp("13[123569]{1}\\d{8}|15[1235689]\\d{8}|188\\d{8}");
// var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
// var reg1 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/
// console.log(reg1.test('31312312'))
// console.log(reg1.test('a434'))
// console.log(reg1.test('15838665930'))
var s1 = 'egondsb dsb dSb';
// s
console.log(s1.match(/s/gi)) // i => ignore
console.log(Math.random())
console.log(Math.round(4.55555))
</script>
</body>
</html>
12.定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1, 几秒之后执行一次
function f() {
console.log(123)
}
// // 时间单位是毫秒
// let t = setTimeout(f, 5000)
//
// // 清除定时器
// clearTimeout(t)
let t = setInterval(f, 2000)
clearInterval(t)
</script>
</body>
</html>
13.BOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
/*
* navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
* */
/*
* location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
*
* */
// alert("你看到了吗？");
// var res = confirm("你确定吗？")
// console.log(res)
var res = prompt("请在下方输入","你的答案")
console.log(res)
</script>
</body>
</html>
14.查找标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" class="c1 c2">d1</div>
<div id="d2" class="c2">d2</div>
<script>
// ID查找
// var d1 = document.getElementById('d2')
// class
// var d1 = document.getElementsByClassName('c2')[0]
// 标签名
var d1 = document.getElementsByTagName('div')[0]
console.log(d1)
</script>
</body>
</html>
15.间接查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" class="">
<p class="p1">p1
<span class="span1"></span>
</p>
<p class="p2">
p2
</p>
</div>
<div id="d2">
222
</div>
<!--<ul>-->
<!-- <li>1</li>-->
<!-- <li>2</li>-->
<!-- <li>3</li>-->
<!-- <li>4</li>-->
<!-- <li>5</li>-->
<!--</ul>-->
<script>
// var p = document.getElementsByClassName('p1')[0]
//
// var div1 = p.parentElement
// console.log(div1)
// var span = document.getElementsByClassName('span1')[0]
//
// var div1 = span.parentElement.parentElement.parentElement
// console.log(div1)
// var div1 = document.getElementById('d1')
// var p = div1.children[0]
// console.log(p)
var div = document.getElementById('d1')
var p = div.firstElementChild
console.log(p)
</script>
</body>
</html>
