day42 js
day42 js
一.javascript
1.ECMAScript5基础语法
js引入方式:
外接方式:<script type="text/javascript" src="./index.js"></script>
内接方式:<script type="text/javascript"></script>
加载顺序,从上往下
var 声明变量
测试语句
console.log(变量名):控制台输出内容, 测试
alert(变量名):弹出框测试
数据类型
基本数据类型
number
var a = 123;
console.log(typeof a) //typeof 变量名: 检查当前变量是什么数据类型
var a1 = 5/0; //特殊情况
console.log(typeof a1) //输出:Infinity无限大, 类型:number
<script>
var a = 5/0;
console.log(a);
console.log(typeof a);
</script>
string
var str = '123';
console.log(typeof str)
//字符串的 *
var a = "one";
var b = "two";
console.log(a*b); 输出:NaN(not a number), 类型: number
//字符串拼接使用+
<script>
//字符串的拼接, 变量的替换
var name = 'bajie';
var age = 18;
var str = name+" is "+age+" years old."; //正常使用js语法, 用+号拼接(行内替换: "+name+")
var str1 = `${name} is ${age} years old.`; //使用es6的模板字符串, 整个字符串反引号``, 里面用shell的变量引用方法替换
console.log(str);
console.log(str1);
</script>
boolean
var b1 = false; //flase 和 true都是小写
console.log(typeof b1)
null
var c1 = null; //输出null本身 类型:object
console.log(c1)
undefined
var d1; //表示变量未定义
console.log(typeof d1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script> //script可以写在body,尾部,任何地方
var a = 2; //声明并赋值
var b;
b = 6; //先声明再赋值
var c = 'bajie';
console.log(a); //测试打印
console.log(b);
console.log(c);
console.log(window.c); //变量的落脚点, python是global, 这里是窗口window,可省略不写
console.log(typeof a); //查看变量的类型
console.log(typeof c);
var ac = a + c; //数值 + 字符串 = 字符串(浏览器的隐式转换)
console.log(ac);
console.log(typeof ac);
console.log(typeof (66+'')); //数字+一个空的字符串, 就能隐式转换成字符串
alert('弹出警告框');
// 每行结束为什么要加一个分号; 因为这些js文件上线的时候要压缩,以节省文件大小; 分号在其中起分隔作用
var a = prompt('今天是什么天气?'); //js 自带的弹出输入框, 基本不用这个.
console.log(a);
//直接量; 字面量; 常量都一个意思, 就是看到什么就是什么
// console.log(notdefined); //Uncaught ReferenceError: notdefined is not defined: 没定义过的变量会报错:
//js中有报错,会中止程序, 先注释掉
var e; //只声明没有赋值的变量:
console.log(e); //输出是undefined
console.log(typeof e); //变量类型是undefined
//变量的命名规范: 和python不同的是可以使用美刀$符号来命名
//保留字: 此语言保留的,将来可能成为关键字, 不允许用做变量名, 不用记, IDE会给你提示
var a = 3;
var b = '1';
var c = a - b;
console.log(c);
console.log(typeof c); //只要出现了减号, 无论是字符串还是数值,个数是几个,运算后的结果都是数值
</script>
</head>
<body>
</body>
</html>
引用数据类型
Function
Object
Array
Date
运算符
赋值运算符
= 也有+= -=等
算数运算符
有++ 和--, 用法和c语言一样
比较运算符
有个 === !== 和is差不多
<script>
console.log(26 == '26'); //结果是true, 当比较时, 比较的是数值(如有字符串会隐式转成数值)
console.log(26 === '26'); //结果是false, 等同于, 要求内存地址相同,即数值和数据类型都相同
</script>
数据类型转换
将数值转成字符串
<script>
var a = 123;
console.log(String(a));
console.log(a.toString())
</script>
将字符串转成数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(parseInt('66.55'));
console.log(parseInt('66bajieai2018'));
console.log(parseInt(66.55)); //结果都是数值66, 1.将字符串转换数值, 2.净化作用, 只保留开头的数字 3.截取功能,只保留小数点前面的内容
</script>
</head>
<body>
</body>
</html>
<script>
console.log(Number('123.432abc')); //输出NaN; 没有净化作用, 有字母时, 返回的结果是NaN, 类型是number
console.log(Number('123.432')); //输出123.432; 将字符串转换成number类型, 这个没有截取
console.log(parseFloat('123.432abc55.6cdf')); //输出123.432; 和parseInt()类似, 返回浮点数(浮点数不用截取); 也有净化作用: 返回开头的浮点,其他不要
</script>
任何数据类型都可转为boolean类型
<script>
var a1 = '123';
var a2 = -123;
var a3 = Infinity;
var a4 = NaN;
var a5 = 0;
var a6;
var a7 = null;
console.log(Boolean(a1),Boolean(a2),Boolean(a3),Boolean(a4),Boolean(a5),Boolean(a6),Boolean(a7)); //true true true false false false false
</script>
流程控制
if-else
<script>
var age = 10;
if(age > 18){ //用法和c语言的一样
console.log('go to school');
}else{
console.log('go to home');
}
</script>
&& ||
和python的 and 和 or的用法一样
switch
<script>
var age = 20;
switch (age) { //用法和c语言的一样
case 18: console.log('is 18 man'); break;
case 19: console.log('is 19 man'); break;
case 20: console.log('is 20 man');
default: console.log('is other man');
}
</script>
while
<script>
// 循环三步走: 1,初始化循环变量 2,判断循环条件 3,更新循环变量
var a = 1;
while(a<=9){ //用法和c语言的一样
console.log(a);
a++;
}
var a;
while(a=1,a<=9,a++){
console.log(a);
}
</script>
<script>
// 循环三步走: 1,初始化循环变量 2,判断循环条件 3,更新循环变量
var a = 0;
while(a<=100){ //和c不完全一样{a=0,a<=100,a+=2}这样就不支持
console.log(a);
a+=2;
}
</script>
do-while
先做一次, 再去while
for
<script>
for(var i = 0; i<=100; i++) {
if (i%2==0) {
console.log(i);
}
}
</script>
常用内置对象
Array
prototype: 可以认为是数组的父类, 在父类上挂载一些方法, 在子类上可以继承使用
<script>
var arr = ['bajie','wukong','datang']; //字面量方式创建
console.log(arr);
var arr1 = []; //字面量方式创建
arr1[0] = 'xixi';
console.log(arr1);
//es5的js中没有class的概念, 我们创建对象使用构造函数 new
var arr = new Array(); //构造函数方式创建(这里的Array是内置的)
console.log(arr);
</script>
prototype: 数组常用的方法(proto 原型)
<script>
var a1 = [1,2,3];
var a2 = ['a','b','c'];
var a3 = a1.concat(a2); //合并两个数组为一个
console.log(a3);
var a4 = a2.join(''); //把数组中的元素用('')里的东西拼接起来
console.log(a4);
var a5 = a1.toString(); //把数组转换成字符串,每个元素之间使用逗号隔开
console.log(a5);
console.log(typeof a5);
var a6 = a2.slice(1,4); //切片,返回一个新的数组, 猜开头不猜结尾
console.log(a6);
a2.push('d'); //追加元素: 直接加, 返回的不是新列表, 而是新列表的个数
console.log(a2);
a2.push('e','f'); //追加多个元素
console.log(a2);
a2.push(['g','h']); //追加一个列表进去
var a7 = a1.pop(); //弹出最后一个元素,返回弹出的元素. 不能按下标弹出
console.log(a7);
console.log(a1);
var a8 = a2.reverse(); //反转数组
console.log(a2);
console.log(a8); //返回值和源数组一样...
var a9 = [1,4,11,9,2,3,10,5,65]; //只按第一个数或字母排序;没啥用
var a10 = a9.sort();
console.log(a9);
console.log(a10); //返回值和源数组一样...
console.log(Array.isArray(a9)); //判断是不是数组
var a11 = [1,2,3,4];
a11.shift(); //从前面弹出一个元素
console.log(a11);
a11.unshift(1); //从前面追加一个元素
console.log(a11);
arr = ['bajie','wukong','datang'];
for(var i = 0; i < arr.length; i++){ //遍历数组
console.log(arr[i]);
document.write(arr[i]);
}
</script>
String
<script>
var str = 'bajie'; //字面量声明字符串并赋值,
console.log(str.charAt(0)); //按索引下标取字符
var str = new String(); //构造方法声明字符串: 这个在控制台可以显示父类挂载的方法
console.log(str);
var str1 = 'ba12a3';
var str2 = 'jie';
console.log(str1.concat(str1,str2,str2)); //几个字符串的拼接
console.log(str1.replace('b',123456)); //字符串中元素的替换
console.log(str1.indexOf(2)); //查找char在字符串中的索引, 没有则返回 -1
console.log(str1.slice(0,1)); //切片, 猜开头,猜不到结尾
console.log(str1.split('a')); //分隔, 和python一样返回的是数组, 如果有第二个参数,表示的是返回数组的最大长度
console.log(str1.substr(0,2)); //和slice一样也是切片
console.log(str1.toLowerCase()); //
console.log(str1.toUpperCase()); //
var str3 = 1234.5678;
console.log(str3.toFixed(2)); //四舍五入, 括号里面的是保留的小数个数
console.log(' bajie '.trim()); //python 中的strip()
</script>
Date
<script>
var date = new Date(); //创建日期对象只有这一种方式,
console.log(date); //Date Fri Nov 15 2019 19:42:43 GMT+0800 (中国标准时间)
console.log(date.getDate()); //1-31
console.log(date.getMonth()); //0-11 显示的时候要+1: 1-12
console.log(date.getFullYear()); //
console.log(date.getDay()); //0-6
console.log(date.getHours()); //0-23
console.log(date.getMinutes()); //0-59
console.log(date.getSeconds()); //0-59
console.log(date.toLocaleString()); //返回的是我想要的时间: 2019/11/15 下午8:36:22
</script>
Math内置对象
<script>
console.log(Math.random()); //范围: 猜到开头, 猜不到结尾. 从0~1之间的随机数
console.log(200+Math.random()*(500-200)); //生成一个 200~500 之间的随机数
console.log(Math.min(45,66));
console.log(Math.max(45,66));
console.log(Math.floor(1.234)); // 1; 向下取整
console.log(Math.ceil(1.234)); // 2; 向上取整
</script>
Function函数
<script>
add(6,9); //调用函数: 和python不同的是, 调用时可以在任何地方(可以在定义函数之前调用)
function add(x,y) { //声明函数
alert(x+y);
}
add(5,6); //调用函数:
</script>
<script>
function add(x) {
console.log(x); //形参和实参的数量不用一一对应
console.log(arguments); //arguments是个伪数组: 所有的实参元素都会传到这个伪元素里
// arguments.push('wukong'); //伪数组不能用数组函数的功能, 但是可以使用遍历
// console.log(arguments);
console.log(arguments[1]); //有数组的下标和长度
}
add('bajie',123)
</script>
2.DOM: Document object model: 文档对象模型
<script>
document.write('<h1>八戒</h1>') //js可以把写的标签或文本渲染到浏览器上
</script>
cocument对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(document); //获取的是文档对象(整个网页的文档)
console.dir(document);
console.log(document.documentElement); //获取html部分
console.log(document.body); //擦, body是null, 获取不到 ? 因为js不能随便写,和之前说的不一样: 不是, 是因为之前的操作确实是可以随便写
window.onload = function() { //如何解决: 方式二,使用入口函数:窗口加载: 先是文档加载, 图片是后加载的, 最后才能执行js
console.log(document.body); //方式二: 有个问题; 如果网络卡顿, 图片没加载完, 那么你点击图片就没有反应(也就是说js点击动作不会生效),所以请看方式三
}; //方式二: 有另外一个问题: 当有多个"窗口加载"时,有事件覆盖现象,即只有最后一个"窗口加载"被执行
//异步: 不等待, 下面的代码不会等上面的代码执行完采取执行.(所以"窗口加载"这个函数是异步函数)
//函数对象: 就是一个匿名函数,然后赋值给一个变量
var add = function () {
alert(123321);
};
add();
</script>
</head>
<body>
<script>
console.log(document.body); //如何解决: 方式一, 写到body部分的最后面, 以及之后的位置
</script>
</body>
</html>
事件三步走, 单击事件
<html lang="en">
<head>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
//需求: 默认盒子200*200 红色, 点击盒子让盒子变成绿色
//事件三步走: 1.获取事件源(获取你的标签) 2.事件(比如点击) 3.事件驱动程序
//1.获取事件源, 下面介绍的是获取DOM的三种方式
var objDiv = document.getElementById('box');
console.log(objDiv);
var objDiv2 = document.getElementsByClassName('box')[0]; //Elements 是负数, 获取出来的是伪数组, 可以加下标取某个标签如[0]
console.log(objDiv2);
var objDiv3 = document.getElementsByTagName('div');
console.log(objDiv3[0]);
//还有一种获取DOM的方式, 现在基本不用了
var objDiv4 = document.querySelector('.box'); //按类名获取标签: 多个类名时, 只能获取第一个标签
var objDiv5 = document.querySelector('#box'); //按id获取标签
//2.事件
//(onclick: 点击鼠标)
objDiv.onclick = function () { // 函数里的代码默认不会被执行,只有(事件)点击的时候才会执行
//3.驱动程序
console.log(objDiv.style);
objDiv.style.backgroundColor = "green"; //当这句执行时, 样式被加到了行内标签里, 优先级最高
}
</script>
</body>
</html>
驱动程序里: 简单的流程控制
<html lang="en">
<head>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
//不停地点击: 在红色和绿色之间交替变换
var isRed = true;
var objDiv = document.getElementsByTagName('div')[0];
objDiv.onclick = function () {
if(isRed){
objDiv.style.backgroundColor = 'green';
isRed = false;
}else{
objDiv.style.backgroundColor = 'red';
isRed = true;
}
}
</script>
</body>
</html>
盒子的显示与隐藏: 方式一: 使用display实现
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box"></div>
<script>
var objBtn = document.getElementById('btn');
var objDiv = document.getElementById('box');
var isShow = true;
objBtn.onclick = function () {
if(isShow){
objDiv.style.display = 'none';
isShow = false;
this.innerText = '显示'; //this相当于python中的self, innerText: 设置文本内容
}else{
objDiv.style.display = 'block';
isShow = true;
this.innerText = '隐藏';
}
}
</script>
</body>
</html>
盒子的显示与隐藏: 方式一: 使用display实现: 获取事件源的简化代码
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box"></div>
<script>
// var objBtn = document.getElementById('btn');
// var objDiv = document.getElementById('box');
//简化代码: 获取事件源, 可以用函数封装起来, 返回事件源对象
function $(id){ //$是函数名, 理论上可以是任何合法的标识名, 只是习惯用$
return document.getElementById(id);
}
var isShow = true;
$('btn').onclick = function () {
if(isShow){
$('box').style.display = 'none';
isShow = false;
this.innerText = '显示';
}else{
$('box').style.display = 'block';
isShow = true;
this.innerText = '隐藏';
}
}
</script>
</body>
</html>
盒子的显示与隐藏: 方式二: 提前写好隐藏的样式, 用标签属性添加隐藏样式的类名(实际和方式一一样也是使用的display属性)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
.active{
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box" class="app"></div>
<script>
function $(id){
return document.getElementById(id);
}
$('btn').onclick = function () {
console.log($('box').className); //这里用到的是标签的属性: .className; 刚刚用到的是标签样式属性.style.
$('box').className += ' active'; //因为 = 是赋值, 会把className之前原有的属性覆盖掉, 所以用 += , ' active':注意value前面有个小技巧: 有个空格
}
</script>
</body>
</html>
标签属性的简单介绍
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button id="btn">隐藏</button>
<img src="" alt="" id="myImg">
<script>
function $(id){
return document.getElementById(id);
}
$('btn').onclick = function () {
$('myImg').src = './guanggao.jpg';
$('myImg').alt = 'guanggao';
}
</script>
</body>
</html>
事件类型: onclick 单击鼠标时
onm ouseover 鼠标悬停
onm ouseout 鼠标移出
ondblclick 鼠标双击
onkeyup 按下并释放键盘上的一个键时触发
onchange 文本内容或下拉菜单中的选项发生改变
onfocus 获得焦点, 表示文本框等获得鼠标光标
onblur 失去焦点, 表示文本框失去鼠标光标
onl oad 网页文档加载事件
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
3.BOM: browser object model: 浏览器对象模型
二.推荐阅读
百度一下: es6 阮一峰
看网页的发展:
2004.sina.com.cn
2008.sina.com.cn
2012.sina.com.cn
前端的一个网页
百度一下: 开发者网络 (MDN Web 文档); 权威