JavaScript基础和JavaScript内置对象：
#js三大组成部分：
1.ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2.BOM (Browser Object Model): 浏览器对象模型 - 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等
3.DOM (Document Object Model): 文档对象模型 - 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
#JavaScript代码的书写位置
行内式，
内嵌式，
外链式
#变量（重点）
变量指的是在程序中保存数据的一个容器
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
语法： var 变量名 = 值
#数据类型（重点）
是指我们存储在内存中的数据的类型
我们通常分为两大类 基本数据类型 和 复杂数据类型
*基本数据类型
数值类型（number）
一切数字都是数值类型（包括二进制，十进制，十六进制等）
NaN（not a number），一个非数字
字符串类型（string）
被引号包裹的所有内容（可以是单引号也可以是双引号）
布尔类型（boolean）
只有两个（true 或者 false）
null类型（null）
只有一个，就是 null，表示空的意思
undefined类型（undefined）
只有一个，就是 undefined，表示没有值的意思
*复杂数据类型
对象类型（object）
函数类型（function）
。。。
*判断数据类型
既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据
使用 typeof 关键字来进行判断
*判断一个变量是不是数字
可以使用 isNaN 这个方法来判断一个变量是不是数字
isNaN ：is not a number
#数据类型转换
数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等
*其他数据类型转成数值
Number(变量)
parseInt(变量)
parseFloat(变量)
除了加法以外的数学运算
*其他数据类型转成字符串
变量.toString()
String(变量)
使用加法运算
*其他数据类型转成布尔
Boolean(变量)
案例：四位数拆分
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 11 <title>Document</title> 12 13 </head> 14 15 <body> 16 17 <script> 18 19 var num = 4565 20 21 var a 22 23 a = num % 10 24 25 num=parseInt(num/10) 26 27 console.log("个位是"+a) 28 29 a = num % 10 30 31 num=parseInt(num/10) 32 33 console.log("十位是"+a) 34 35 a = num % 10 36 37 num=parseInt(num/10) 38 39 console.log("百位是"+a) 40 41 a = num % 10 42 43 num=parseInt(num/10) 44 45 console.log("千位是"+a) 46 47 </script> 48 49 </body> 50 51 </html>
#函数
*函数的创建
两种方式1. 声明式函数 2. 赋值式函数
**声明式函数
+ 语法: function 函数名() {}
function: 声明函数的关键字
空格: 分隔关键字和函数名使用的
函数名: 就是我们自己定义的一个名字, 遵循变量命名规则和规范
(): 形参, 一会再说, 必须写
{}: 大括号里面就是我们这个函数帮我们保存的一段 JS 代码
**赋值式函数
+ 语法: var 函数名 = function () {}
前面需要一个 var
把函数名提到前面来了
*函数的执行
1. 直接执行2. 依赖行为执行
**直接执行:
+ 语法: 函数名()
函数名: 表示你需要让哪一个函数执行
(): 就是让你确定的这个函数执行以下
也就是把你定义的时候存放在里面的代码执行一遍
**依赖事件执行：
+我们把这个函数依托在页面中某一个元素的事件上当这个元素触发这个事件的时候, 就会执行对应的函数
比如: 我把 weibolu 这个函数依托在页面的一个 div 元素的 点击行为上
当你点击页面中的这个 div 的时候, 就会执行 weibolu 这个函数
语法:指定页面元素.onclick = 函数名怎么找到指定元素, 页面中元素身上的 id 属性, 就可以在 JS 里面直接表示这个元素 找到页面元素, 只能使用元素的 id 来直接使用className 标签名 不能直接使用
**函数调用上的区别:
+ 声明式函数可以在声明之前调用, 也可以在声明之后调用
+ 赋值式函数只能在声明之后调用, 声明之前调用会报错
案例：两年份之间的闰年
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 11 <title>Document</title> 12 13 </head> 14 15 <body> 16 17 <script> 18 19 function year(num1,num2){ 20 21 if(num1>num2){ 22 23 var a 24 25 a = num1 26 27 num1 = num2 28 29 num2 = a 30 31 } 32 33 for(var i = num1 ; i <= num2 ; i++){ 34 35 if(i % 4 === 0 && i % 100 !==0 || i % 400 === 0){ 36 37 console.log(i+"年是闰年") 38 39 } 40 41 } 42 43 } 44 45 year(2008,2020) 46 47 48 49 </script> 50 51 </body> 52 53 </html>
#对象
*对象的创建
两种方式
字面量方式创建对象var obj = {}注意: 是大括号
内置构造函数创建对象 var obj = new Object()
注意:new 必须要有Object 的 O 大写
*对象的操作(增删改查)
CRUD： C: Create 创建 / 增加 R: Read 读取 / 查询U: Update 更新 / 修改 D: Delete 删除
对象的操作有两种语法
两种语法做的是一个事情, 只是给我们提供了两种
你觉得哪一个方便, 哪一个你使用起来高兴, 你就用哪一个
- 点语法2. 数组关联语法
#数组
*数组创建：
一、用构造函数的方式定义 var arr = new Array();
二、字面量的方式var arr = [];//等价于：var arr = new Array();
*数组的length属性
length:表示数组的长度，就是数组中元素的个数。
案例：求一组数中的平均值
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 6 7 <head> 8 9 <meta charset="UTF-8"> 10 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 13 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 14 15 <title>数组</title> 16 17 <style> 18 19 .box{ 20 21 color:red; 22 23 } 24 25 </style> 26 27 </head> 28 29 <body> 30 31 <input type="button" value="测试" onclick="fn1()" /> 32 33 </body> 34 35 </html> 36 37 <script> 38 39 function fn1() { 40 41 var scores = [1,2,3,4,5,6]; 42 43 // 1、求和 44 45 var sum = 0; 46 47 for(var i in scores){ 48 49 sum = sum + scores[i]; 50 51 } 52 53 // 2、求平均值 54 55 var avg = sum/scores.length; 56 57 console.log(avg); 58 59 } 60 61 // 封装求平均值的函数 62 63 // 功能：求一组数的平均值 64 65 // 参数：一组数 66 67 // 返回值：平均值 68 69 function average(scores){ 70 71 // 1、求和 72 73 var sum = 0; 74 75 for(var i in scores){ 76 77 sum = sum + scores[i]; 78 79 } 80 81 // 2、求平均值 82 83 var avg = sum/scores.length; 84 85 return avg; 86 87 } 88 89 console.log(average([3,4,5,2,1,7,8])); 90 91 92 93 console.log(average([12,23,34,21,98])); 94 95 96 97 console.log(average([87,2,3,9])); 98 99 </script> 100 101 102 103 冒泡排序： 104 105 function fn(){ 106 107 var arr=[5,3,7,1,2,8]; 108 109 // 需要5轮，分别拿出剩下的数中的最大的，最后一个数，就不用管了。 110 111 for(var i=0;i<5;i++){ 112 113 for(var j=0;j<5-i;j++){ 114 115 if(arr[j]>arr[j+1]){ 116 117 //交换arr[j] 和 arr[j+1]； 118 119 var t = arr[j]; 120 121 arr[j] = arr[j+1]; 122 123 arr[j+1] = t; 124 125 } 126 127 } 128 129 } 130 131 console.log(arr); 132 133 }
#字符串
*字符串创建
1）、构造函数的方式
var str = new String("hello"); 注意：用构造函数方式定义的字符串是引用类型
2）、字面量的方式
var str2 = "hello";注意：字母量定义的字符串是基本类型
*官方函数：
charAt()：返回字符串中某个下标的字符，跟数组的下标是同样的意思
charCodeAt(): 获得字符串中指定下标的字符对应的编码
String.fromCharCode(); 把编码转成字符，不需要定义字符串变量
split() 和数组的join函数时相逆的把字符串按照指定的分隔符进行分割，结果是数组；
substring() 截取字符串的一部分字符；
substr()截取字符串中一部分 参数：起始下标 长度：截取的字符串的长度（可选的参数）返回值：截取后的字符串
toUpperCase()把字符串中的字符转成大写；返回值：转成大写后的字符串
slice():截取字符串中的一部分 参数：起始下标：可以是负数。结束下标：可以是负数（可选），如果说slice函数的参数是负数的话，那么表示从尾部算起，-1表示最后一个字符，-2表示倒数第二个字符；返回值：字符串的一部分
indexOf();在字符串里查找指定的字符串，返回第一次出现的下标参数：查找的字符串起始位置（查找的起始位置） （可选参数）返回值：下标。
lastIndexOf();在字符串里查找指定的字符串，返回最后一次出现的下标 参数：查找的字符串 起始下标 返回值：下标。
concat();把字符串和其它字符串拼接起来 参数：若干个字符串 返回值：拼接的结果字符串
字符串的属性 length：返回字符串的长度（字符的个数）
案例：回去十六进制随机数值
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 11 <title>Document</title> 12 13 </head> 14 15 <body> 16 17 <script> 18 19 function getColor(){ 20 21 var ch="0123456789ABCDEF" 22 23 var a = "" 24 25 //循环产生四个随机数 26 27 for(var i=0;i<6;i++){ 28 29 a+=ch.charAt(Math.random()*16) 30 31 } 32 33 return "#"+a 34 35 } 36 37 console.log(getColor()) 38 39 </script> 40 41 </body> 42 43 </html>
#Math
*Math对象相关的官方函数
1、 Math.round(n)：四舍五入取整。
2、 Math.ceil(n)：向上取整。(比n大的最小整数)
3、 Math.floor(n) : 向下取整(舍去小数位)
4、Math.max(n1,n2,...) : 参数是多个数字，求最大数字。
5、 Math.min(n1,n2,...) : 参数是多个数字，求最小数字。
6、 Math.pow(底数，指数)：求幂
7、Math.sqrt(n)：开根号。
8、 Math.abs(n)：求绝对值
#Date
*Date对象：表示的是日期和时间
定义Date对象(使用构造函数)var d = new Date(); //默认是当前计算机的时间
*get开头
getFullYear();获取日期对象上的年份 参数：无 返回值：年份
getMonth(); 功能：获取日期对象上的月份（从0开始） 参数：无 返回值：月份
getDate(); 功能：获取日期对象上的日 参数：无 返回值：日
getHours() //返回小时数
getMinutes() //返回分钟数
getSeconds() //返回秒数
getDay(): 返回的是星期
getTime()(): 返回的是从1970年1月1日0点0分0秒到现在的毫秒数。
Set开头
改变对象d的年份setYear(a);
...
一、跟本地区（本地域）相同的日期显示格式
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 locale:是本地意思，就是执行程序的计算机所在的地区 Date:是日期
toLocaleTimeString(); locale:是本地意思，就是执行程序的计算机所在的地区 Time:是 时间
二、国际（通用）日期显示格式
toDateString() //把 Date 对象的日期部分转换为字符串。
toTimeString();
toUTCString() ;// 格林尼治时间：就是零时区的时间。
案例：数字时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="div"> <img src="img/0.png" /> <img src="img/8.png" /> 时 <img src="img/1.png" /> <img src="img/5.png" /> 分 <img src="img/0.png" /> <img src="img/9.png" /> 秒 </div> </body> </html> <script type="text/javascript"> setInterval(function(){ var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var _date = [ h<10?0:Math.floor(h/10), h%10, m<10?0:Math.floor(m/10), m%10, s<10?0:Math.floor(s/10), s%10 ] console.log(_date); var imgs = document.getElementsByTagName("img"); for(var i=0; i<imgs.length; i++){ imgs[i].src = "img/"+_date[i]+".png"; } }, 1000); </script>
ps:面对疫情我们要你先前行！！！这是超车的最好机会！！！