JS笔记
快速入门
外部引入：
外部引入：<script src=“”></script> 注意script标签必须成对出现
<script type="text/javascript">
</script> 不用显示定义type，也默认定义javascript
内部标签： <script></script>
1.1基本语法入门
所有变量都是var console.log(score) 在浏览器控制台打印变量
//定义变量 变量类型 变量名=变量值； // var num=1; // alert(num);
1.2数据类型
数值 文本 图形 音频 视频...
js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定！
js是动态语言 变量的数据类型是可以变化的！
number ： js不区分小数和整数 number 123//整数123 123.1//浮点数123.1 1.123e3//科学计数法 -99//负数 NaN// not a number 代表一个非数值 infinity//表示无限大 字符串：'abc'"abc" 加了引号都是字符串,字符串嵌套可以外单内双
字符串嵌套：口诀 引引加加
加号（+）连接字符串 ：数值相加 字符相连
字符串转义字符：都要写到引号里边 \n换行 \t缩进 \b空格
.length 方法检测字符串长度
我们变量不要写到字符串里面，是通过字符串相连的方式实现的
布尔值：true false true参与运算当1来看，false参与运算当0来看 逻辑运算：&&：两个都为真，结果为真 ||：一个为真，结果为真 ！：真即假，假即真；
短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再运算右边的表达式的值
逻辑与短路运算
语法：表达式1&&表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1
eg：console.log(123&&456); //456
console.log(0&&456); //0
如果有空的或者否定的为假，其余是真的 0 ‘ ’ null undefined NaN
逻辑或短路运算
如果表达式1结果为真 则返回表达式1
如果表达式1结果为假。则返回表达式2
自己口诀：零与一或短路
比较运算符：= ==等于（类型不一样，值一样，也会判断为true） ===绝对等于（类型一样，值一样，结果为true） 这是一个JS的缺陷，坚持不要使用==比较 须知：NaN===NaN,这个与所有的数值不相等，包括自己 只能通过isNaN(NaN)来判断这个数是否是NaN
isNaN（）这个方法用来判断非数字，返回true或false
浮点数问题： console.log(1/3)===((1-2/3)) 尽量避免使用浮点数进行运算，存在精度问题！ null和undefined 空和未定义
typeof 获取数据类型
var str='nihaoya'
console.log(typeof str)
prompt取过来的值是字符型的
1.3数字型转换为字符串型：
-
var num=10
var str=num.tostring（）
-
string(变量)
-
利用+拼接字符串的方法实现转换效果 隐式转换
console.log(num+'')
1.4转换为数字型：
1.parseInt(变量); 可以把字符型的转换为数字型 得到是整数
console.log(parseInt('120px')) //120 会去掉单位
2.parseFloat(变量) 可以把字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat(3.14))//3.14
eg：
var num1=prompt('请输入第一个值');
var num2=prompt('请输入第二个值');
var num3=parseFloat(num1)+parseFloat(num2);
alert('结果是：'+num3);var sum=0;
var averg=0;
var num=prompt('请输入班级人数');
for (var i=1;i<=num;i++){
var score= prompt('请输入第'+i+'个成绩')
sum+=parseFloat(score);
//因为接受的参数是字符串型 需要转换为数字型
}
averg=sum/num;
alert('班级总的成绩是'+sum);
alert('平均成绩是：'+averg);3.利用Number(变量)
4.利用算数运算-*/运算
console.log('12'-2) //10
eg：
var year=prompt('请您输入您的出生年份');
var age=2022-year;//year 取过来的是字符串型 隐式转换
alert('您今年已经'+age+'岁了')1.5 转换为布尔型
代表空、否定的值会被转换为false，如：0 NaN null undefined
其余的值都会被转换为true
eg：console.log(Boolean(NaN)) //false
1.6 if else if 多分支
var grade=prompt('请输入您获得的分数')
if (grade>=90){
alert('A')；
}else if(grade>=80&&grade<90){
alert('B')；
}else if (grade>=70&&grade<80){
alert('C')；
}else if(grade>=60&&grade<70){
alert('D')；
}else {
alert('E')；
}
1.7三元表达式
条件表达式？ 表达式1：表达式2
口诀：真1假2
num=10；
var result=num>5?'是的'：‘不是的’ //是的；
var time=prompt('请输入数字0-59')
//三元表达式
var result= time < 10 ? '0'+ time : time;
alert(result);
1.8分支流程控制swith语句
swith语句也是多分支语句，当要针对变量设置一系列特定值的选项时候，使用switch，多选1
执行思路：利用我们的表达式的值，和case后面的选项值相匹配，如果匹配杀那个，就实行该case里面的语句，如果都没有匹配上，则去执行default里面的语句
我们开发里面 表达式我们经常写成变量
我们num里面的值必须和case里面的值相匹配，必须是全等的值，类型和值都一样
var fruit=prompt('请输入水果名称');
switch(fruit){
case '苹果':alert('3.5/斤');
break;
case '榴莲':alert('35/斤');
break;
case '臭豆腐':alert('3.5/斤');
break;
default:alert('没有此水果');
}
1.9双重for循环
//双重for循环
// 我们可以把里面的循环看做是外层循环的语句
// 外层循环一次 里面的循环执行全部
// 打印五行五列星星
var str='';
for(var i=1;i<=5;i++){
for(var y=1;y<=5;y++){
str+='*';
}
str+='\n';
}
console.log(str);
var str='';
for(var x=1;x<=9;x++){
for(var y=1;y<=x;y++){
// 1 * 2 = 2 ;
str+= y+'*'+x+'='+x*y+'\t';
}
str+='\n';
}
console.log(str);
//九九乘法表 利用追加字符串让一行显示
数组：一些相同类型的对象 var arr=[1,2,3,4,5,hellowf,true,null] 取数组下标：如果越界了，就会 undefined 对象：对象是大括号，数组是中括号 每个属性之间用逗号隔开，最后一个属性不用 var person={ name:'fantenglong', age:'3', tags:['js','java','web'] } 取对象的值person.name fantenglong
2.严格检查模式
'use strict' 加在开头！
3.数据类型
3.1字符串
基本包装类型：js引擎包装为复杂数据类型，所以才有属性和方法
1.正常字符串我们使用单引号，或者双引号包裹， 2.注意转义字符\ . \n \t 3.多行字符串编写 var msg='hello world nihaoya ' 4.模板字符串 let msg='你好呀腾龙，${name}' 5.字符串长度 console.log(str.lentgh) 6.字符串的可变性，不可变
只是地址变了，字符串没变，只是新开辟了一个内存空间
7.大小写转换 注意这里是方法，不是属性 student.toUpperCase()大写 student.toLowerCase()小写 8.student.indexOf('t')输出下标 9.var str = '改革春风吹满地';
console.log(str.substring(2.2)); //第一个2是索引号2，第二个2是取几个字符
//查找字符串中字母位置 根据字符返回位置 indexOf（），中第二个参数为开始查询位置
var str = 'abcoefoxyozzopp';
var num = 0;
var index = str.indexOf('o');
while (index != -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是:' + num);
//根据位置返回字符 str.charAt();
var str = 'andy';
console.log(str.charAt(3));
//遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
// str.charCodeAt(index); 返回相应索引号的字符ASCII值
// 目的：判断用户摁下哪个键
console.log(str.charCodeAt(0));
//3.str[index]; H5新增 根据位置返回字符
console.log(str[0]);
//统计出现最多的字符和次数
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); //chars是字符串的每一个字符
if (o[chars]) {
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
//2.遍历对象
var max = 0;
var ch = '';
for (var k in o) {
//k得到是属性名
//o[k]得到是属性值
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log(max);
console.log('最多的字符是：' + ch)；
//1.替换字符 replace('被替换的字符'，'替换为的字符')
//它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));
//有一个字符串，要求把里面所有的o替换
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
str1 = str1.replace('o', '*');
}
console.log(str1);
//2. 字符转换为数组 split('分隔符') 前面我们学过join把数组转换为字符串
// 取决于字符串用什么分隔
var str2 = 'red,pink,blue';
console.log(str2.split(','))
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
3.2数组
数组的创建方式：
利用new 创建数组： var arr=new Array（）；//创建了一个空数组
利用数组字面量创建数组：var 数组名=[];//创建了一个空的数组
var arr=[1,2,'pink'] //数组可以包含任意的数据类型，数组里面的数据用逗号隔开
//找最小值
var arr = [2, 6, 1, 77, 52, 25, 7, 99];
var min = arr[0];
for (var i = 0; i < arr.length; i++) {
if (min > arr[i]) {
min = arr[i];
}
}
console.log(min);
var arr = ['red', 'green', 'blue', 'pink']
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + '|'
}
console.log(str); //red|green|blue|pink|
3.2.1 数组中新增元素
可以通过修改length来新增元素
var arr = ['red', 'green', 'blue']
arr.lenght = 5;
修改索引号新增元素
var arr = ['red', 'green', 'blue']
arr[3] = 'pink'
---------------------------
循环追加
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = i + 1;
}
console.log(arr);
-------------------------------
找大于10的数组元素放入到新数组
方法1.
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
var max = 10;
var arr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] > max) {
arr1[j] = arr[i];
j++;
}
}
console.log(arr1);
--------------------------------
方法2：var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
var max = 10;
var arr1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > max) {
arr1[arr.length] = arr[i];
}
}
console.log(arr1);
----------------------------------
3.翻转数组
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newarr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newarr[newarr.length] = arr[i];
}
console.log(newarr);
Array可以包含任意的数据类型 var arr=[1,2,3,4,5,6] 1.长度 arr.length 注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失。 2.indexOf 输出数组下标索引 arr.indexOf（数组元素）
只返回第一个满足条件的索引号，如果没有则返还-1
字符串的1"1"和数字1是不同的
//核心算法：我们遍历旧数组，让那后拿着旧数组取查询新数组，如果没有就添加，否则不添加
//封装去重函数
function unique(arr) {
var newarr = [];
for (var i = 0; i < arr.length; i++) {
if (newarr.indexOf(arr[i]) === -1) {
newarr.push(arr[i]);
}
}
return newarr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x']);
console.log(demo);
3.slice（）截取数组Array的一部分，返回一个新数组 4.push（） pop（） push：压入到尾部 追加数组元素，参数直接写数组元素；push完毕之后，返回的结果是新数组的长度 pop:弹出尾部的一个元素 不跟参数，只能删除一个，返回值是删除的元素 5.unshift（）， shift（）头部 unshift:压入到头部 返回的结果是新数组的长度 shift：弹出头部的一个元素 6.排序stort（） arr.stort()；
个位数相同则会排序混乱
加入函数 var arr1=[13,4,77,1,13];
arr1.sort(function(a,b){
return a-b;//升序
return b-a；//降序
})
7.元素反转 arr.reverse（） 8.concat（）连接数组 ["a","b","c"] arr.conact(["1","2","3"]) 注意：concat()并没有修改数组，只是会返回一个新的数组 9.连接符join 打印拼接数组，使用特定的字符串连接 ["A","B","G"] arr.join('-') A-B-G 10.多维数组 arr[[1,2],[3,4],[5,6]] 11.检测是否为数组
1. instanceof 运算符 检测是否为数组
var arr=[];
console.log(arr instanceof Array);
2. Array.isArray(参数);
3.3 对象
对象是由属性和方法组成的
创建对象的三种方式：
1.用字面量创建对象
var obj = {
uname: '张三丰',
age: 18,
sex: '男',
sayhi: function() {
console.log('hi');
}
}
//1.里面的属性或者方法我们采取键值对的形式
//2.多个属性或者方法中间用逗号隔开，最后一个可以不加逗号
//3.方法冒号后面跟的是一个匿名函数
//4.使用对象
//5.调用对象的属性，我们采取 对象名.属性名
//调用属性还有一种方法 对象名['属性名']；
//调用对象的方法sayhi 对象名.方法名（），千万别忘记小括号
obj.sayhi()；
2.利用new object创建对象
//利用new Object 创建对象
var obj = new Object();
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
3.构造函数创建对象
我们为什么需要使用构造函数
就是因为我们前面两种创建对象的方式一次只能创建一个对象
利用函数的方法重复这些相同的代码，这个函数不一样，里面封装的不是普通代码，而是对象
构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里边
构造函数：泛指的某一大类
对象：特指，是一个具体的事物
3.我们利用构造函数创建对象的过程我们也称为对象的实例化
//利用构造函数创建对象
//我们需要创建四大天王的对象，相同的属性：名字 年龄 性别 相同的方法
//构造函数的语法格式
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
new 构造函数名(); //必须用new调用
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing=function(sang){
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男');
ldh.sing('冰雨')
//1.构造函数名字首字母要大写
//2.我们构造函数不需要return就可以返回结果
//3.我们调用构造函数必须用new
new在执行的时候做四件事
1.在内存中创建一个新的空对象
2.让this指向这个新的对象
3.执行构造函数里面的代码，给这个新对象添加属性和方法
4.返回这个新对象（所以构造函数里面不需要return）
遍历对象：
var obj = {
name: '范腾龙',
age: 18,
sex: '男',
fn: function() {
}
}
//for in 遍历对象
// for (变量 in 对象) {
// }
for (var k in obj) {
console.log(k); // k 变量 输出 得到是我们属性名
console.log(obj[k]); //obj[k] 得到我们的属性值
}
//我们使用for in 里面的变量我们喜欢写K或者 key
JS中的所有键都是字符串，值是任意对象！ 若干个键值对 1.对象赋值： var 对象名={ 属性名：属性值， 属性名：属性值， 属性名：属性值
}
-js中对象，{。。。。}表示一个对象，键值对描述属性xxxx：Xxxx，用逗号隔开，最后一个属性不加逗号！ 2.使用一个不存在对象属性，不会报错！undefined 3.动态的删减属性 delete person.name true person 4.动态的添加 person.hahaha="hahaha" "hahaha" person 5.判断属性值是否在这个对象中！ 'age'in person true 6.判断一个属性是否是这个对象自身拥有的hasOwnProperty（） person.hasOwnProperty('tostring') false person.hasOwnProperty('age') true
3.4 Es6的新特性 Map和set
Map：var names=["tom","jack","jimi"]; var scores=[100,90,80]; var map=new Map([['tom',100],[jack,90],['jimi,80']]); var name=map.get('tom');//通过key获得value map.set('admin',123456) 新增或修改 map.delete（'tom'）; console.log(name); set:无序不重复的值 var set=new Set([3,1,1,1,1])//去掉重复值 set.delete(1);删除 set.add(2);添加 console.log(set.has(3));是否包含某个元素
遍历数组 var arr=[3,4,5];
for(var x of arr){
console.log(x);
}
通过for of/ for in 遍历下标
遍历map： var map=new Map([['tom',100],['jack,90'],['jimi,80']]);
for(var x of map){
console.log(x)
}
3.5函数
定义函数 function abs(x){
if(x>=0){
return x;
}
else{
return -x;
}
}
定义函数2：匿名函数：var abss=function（x）{ 通过abss就可以调用函数
function abs(x){
if(x>=0){
return x;
}
else{
return -x;
}
}
}
调用函数：abs（10）10
abs（-10）10
函数表达式调用必须写在下边
参数问题：1.如果实参的个数和形参的个数一致，则正常输出结果
2.如果实参的个数多于形参的个数 ：会取到形参的个数
3.如果实参的个数小于形参的个数：多余的形参定义我为undefined，最终的结果就是NaN,
JS可以传递任意个参数，也可以不传递参数； 参数进来是否存在的问题？假设不存在参数，如何规避
function abs(x){
//手动抛出异常
if(typeof x!='number'){
throw 'NOT a number';
}
if(x>=0){
return x;
}
else{
return -x;
}
}
arguments是一个JS免费赠送的关键字； 代表，传递进来的所有参数，是一个数组；arguments中存储了所有传递过来的实参；
只有函数才有arguments内置对象
伪数组：
1.具有数组的length属性
2.按照索引的方式进行存储
3.它没有真正数组的一些方法pop（）push（）等等
function getmax() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(getmax(12, 58, 96, 7475, 85));
console.log(getmax(12, 58, 22, 74, 85455));
console.log(getmax(12, 58445, 962, 7433, 855, 12, 456, 7523));
rest：
以前：
if(arguments.length>2){
for (var i=2;i<arguments.length)
}
现在：function aaa(a,b...rest)
rest参数只能写在最后一排，用...定义
函数可以调用另外一个函数
//输出当前年份2月份的天数
function backday() {
var year = prompt('请您输入年份')
if (isrunyear(year)) {
alert('28天')
} else {
alert('30');
}
}
function isrunyear(year) {
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
backday();
3.6变量的作用域：
注意：如果在函数内部 没有声明直接赋值的变量也属于全局变量
在JS中，var定义变量实际是有作用域的，假设在函数体中声明，则在函数体外不可以使用 function qi(){ var x=1; x=x+1; } x=x+2//未定义错误
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突；
作用域链：内部函数访问外部函数的变量，采用的是链式查找的方式来决定（就近原则）
内部函数可以访问外部函数的成员，反之不可以； 假设在JS中函数查找变量从自身函数开始；由内向外查找；假设外部存在这个同名的函数变量，则内部函数会屏蔽外部的变量； 提升变量的作用域：
function qi(){
var x="x"+y;
console.log(x);
var y='y';
} 结果：xundefined
说明JS执行引擎，自动提升了y的生命，但是不会提升y的赋值； 养成规范：所有变量定义都放在函数的头部，不要乱放，便于代码维护
3.7全局函数
var x=1;//全局变量
function f(){
consol.log(x);
}
//f();
//console.log(x)
alert（）这个函数本身也是一个window的变量； JS实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果全局作用域都没有找到，报错
规范：由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突。如何减少冲突？
//唯一全局变量
var tenglongApp={};
//定义全局变量
tenglongApp.name='fantenglong';
tenglongApp.add=function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一命名空间内，减少全局命名冲突；
3.8局部作用域let
function aaa(){
for (let i=00;i<100,i++) {
console.log(i)
}
console.log(i+1); //问题？i出了这个作用域还可以使用
}
建议大家都是用let去定义局部作用域的变量；
3.9常量
const
const PI='3.14';
console.log(PI);
3.10 预解析
我们js引擎运行js分两步：预解析。 代码执行
（1）.预解析js引擎会把js里面的所有的var 还有function提升到当前作用域的最前面；
（2）.代码执行 按照代码书写的顺序从下往上执行
2.预解析分为 变量预解析（变量提升） 和函数预解析（函数提升）
变量预解析 就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
函数预解析 就是把所有的函数声明提升到当前作用域的前面，但不调用函数
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
预解析
function f1() {
var a;
a = b = c = 9;
// 相当于var a=9;b=9,c=9,注意b和c前边没有var
// b和c直接赋值，没有var 声明当全局变量看
// 集体声明 var a=9,b=9,c=9;
console.log(a); //9
console.log(b); //9
console.log(c); //9
}
f1();
console.log(c); //9
console.log(b); //9
console.log(a); //报错
3.11数据类型分配
1.如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给null
2.简单数据类型是存放在栈里边 里面直接开辟一个空间存放的是值
3.复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
4.方法
定义方法
var tenglong={
name:'腾龙',
birth:2020,
//方法
age:function(){
var now=new Date().getFullYear();
return now-this.birth;
}
}
//属性
tenglong.name
//方法，一定要带（）
tenglong.age()
this.代表什么？拆开上面的代码看看
function getage(){
var now=new Date().getFullYear();
return now-this.birth;
}
var tenglong={
name:'腾龙',
birth:2020,
//方法
age:getage()
}
this是无法指向的，是默认指向调用 它的那个对象；
apply
在js中可以控制指向方向
function getage(){
var now=new Date().getFullYear();
return now-this.birth;
}
var tenglong={
name:'腾龙',
birth:2020,
//方法
age:getage()
}
getage.apply(tenglong.[]);//this,指向了tenglong，参数为空
5.内部对象
标准对象
typeof 123
'number'
typeof '123'
'string'
5.1 Data
基本使用
Data();日期对象，是一个构造函数，必须使用new来调用我们的日期对，
使用Date（）；如果没有参数，则返回当前系统时间
2.参数常用写法： 数字型 2022，10，01 或者是字符串型’2020-10-1 8：8：8‘
var now= new Date();
now.getFullYear();//年
now.getMonth();//月 （0-11）返回月份小一个月，记得月份加1 now.getMonth()+1;
now.getDate();//几号
now.getDay();//日周六是6周日是0
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
时间戳写法：
1.now.getTime();//时间戳
2.var now=+new Date();
倒计时写法
//转换公式
// d = parseInt(总秒数 / 60 / 60 / 24); //计算天数
// h = parseInt(总秒数 / 60 / 60 % 24); //计算小时
// m = parseInt(总秒数 / 60 % 60); //计算分 数
// s = parseInt(总秒数 % 60); //计算当前秒数
function countDown(time) {
var nomtime = +new Date(); //参数为空返回当前时间总的毫秒数
var inputtime = +new Date(time); //返回的是用户输入时间总毫秒数
var times = (inputtime - nomtime) / 1000;; //times 是剩余时间总的秒数；
var d = parseInt(times / 60 / 60 / 24); //天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); //秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-5-1 12:00:00'));
5.2 JSON
在js中一切皆为对象，任何js支持的类型都可以用json表示
格式：
对象都用{}
数组 都用[]
所有的键值对都用key：value
json字符串和js对象的转化
var person ={
name:'tenglong',
age:3,
sex:'男'
}
//对象转换为JSON字符串
var jsonperson= JSON.stringify(person);
//JSON 字符串转换为对象 参数为json 字符串
var obj
=JSON.parse('{name:'tenglong',age:3,sex:'男'}')
很多人搞不清除，JSON和js对象的区别
var obj={a:'hellow',b:'hellob'};
var json='{"a":'hellow',"b":'hellob'}'
5.3 Math对象
Math不是一个构造函数，所以我们不需要new来调用，直接使用即可
console.log(Math.pi);
Math.max();//最大值
Math.min();//最小值
Math.abs();//取绝对值
Math.floor();//向下取整，往最小取值 1.1//1
Math.ceil();//向上取整，往最大去取 1.1//2
Math.round();四舍五入 // 注意：Math.round(-1.5)//结果是-1
重要：随机数方法random();
Math.random();随机返回一个小数 0<=x<1 不跟参数
eg：得到两个数之内的随机整数
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
eg：//随机点名
var arr=['张三'，'李四'，'王五']；
console.log(arr[getRandomIntInclusive( 0, arr.length-1)]);
6.面向对象编程
6.1什么是面向对象
javascript有些区别
类：模板
对象：具体的实例
在 javascript这个需要大家转换一下思想
原型：
var person ={
name:'tenglong',
age:3,
sex:'男',
run: function(){
console.log(this.name+"run...");
}
};
var xiaoming={
name:'xiaoming'
};
//小明的原型是person
xiaoming.__proto__=person; //用__proto__指向
class继承
class关键字，是在ES6引入的
1.定义一个学生的类
class student{
constructor(name){
this.name=name;
}
hello(){
alert('hellow')
}
}
var xiaoming=new student("xiaoming");
//xiaoming.hellow() hellow
2.继承
class student{
constructor(name){
this.name=name;
}
hello(){
alert('hellow')
}
}
var xiaoming=new student("xiaoming");
class xiaoxuesheng extends student{
constructor(name,grade){
super(name);
this.grade=grade;
}
mygrade(){
alert('我是一个小学生')
}
}
var xiaohong=new student("xiaohong",1);
本质：查看对象原型
7.操作BOM对象（重点）
浏览器介绍
javaScript和浏览器的关系？
javaScript诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型
IE6·11
Chorm
Safari
window
window代表浏览器窗口
window.alert(0)
undefined
window.innerHeight
674
window.innerWidth
322
window.outerHeight
762
//大家可以调整浏览器窗口试试
Navigator
Navigator封装了浏览器的信息
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36'
navigator.platform
'Win32'
大多数时候，我们不会使用navgator对象，因为会被人人为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1536px
location
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')
document
document代表当前的页面，HTML DOM文档树
document.title='范腾龙'
'范腾龙'
获取具体 的文档数节点
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dl= document.getElementById('app'
获取cookie
document.cookie
'BIDUPSID=2559DA07AC1EA4EB81E5CA50560C0D3D; PSTM=1638105809; BAIDUID=2559DA
劫持cookie原理
<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->
服务器端可以设置cookie：httpOnly
history
history代表浏览器的历史纪录
history.back()//后退
history.forward()//前进
8.操作DOM对象（重点）
DOM：文档对象模型
核心
浏览器网页就是一个DOM树形结构！
更新：更新DOM节点
遍历dom节点：得到dom节点
删除：删除一个dom节点
添加：添加一个新的节点
要操作一个dom节点，就必须要获得这个节点
获得DOM节点
var h1=document.getElementsByName('h1')
var p1=document.getElementsByName('p1')
var p2=document.getElementsByClassName('p2')
var father=document.getElementById('father')
var childrens=father.children;//获取父节点下的所有子节点
//father.firstchild
//father.lastchild
这是原生代码，之后我们都是用jQuery来写
更新节点
<div id=id1>
</div>
<script>
var id1=document.getElementById('id1')
</script>
操作文本：
id1.innerText='123' 修改文本的值
id1.innerHTML='123'可以解析html文本标签
操作js
id1.style.color='yellow'//属性使用字符串包裹
'yellow'
id1.style.fontSize='20px'//-转驼峰命名问题
'20px'
id1.style.padding='200em'
'200em'
删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div id="father">
<h1>标题1</h1>
<p id="p1">p1................</p>
<p class="p2">p2</p>
</div>
<script>
var p1=document.getElementById('p1')；
var father=p1.parentElement；
father.removeChild(p1)
</script>
注意：删除多个节点的时候。children是在时刻变化的，删除节点的时候一定要注意！
插入节点
我们获得了某个DOM节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖
追加：
<p id="js">javascipt</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
<script>
var js=document.getElementById('js')
var list=document.getElementById('list')
list.appendChild(js)//追加到后面
</script>
创建一个新的标签，实现插入
<script>
var js=document.getElementById('js');//已经存在的节点
var list=document.getElementById('list');
//通过js创建一个新的节点
var newp=document.createElement('p');
newp.id='newp';
newp.innerText='hellow,tenglong';
list.appendChild(newp);
//创建一个标签节点（通过这个属性可以设置任意的值）
var myscript=document.createElement('script');
myscript.setAttribute('type','text/javascript');
var mystyle=document.createElement('style');//创建了一个空style标签
mystyle.setAttribute('type','text/css')
mystyle.innerHTML='body{}';//设置标签内容
var header=document.getElementsByTagName('head')[0].appendChild(mystyle);
</script>
insertBefore
var ee=document.getElementById('ee');
var js =document.getElementById('js');
var list =document.getElementById('list');
//要包含的节点，insertBefore(newNode,targetNode);
list.insertBefore(js,ee);
9.操作表单（验证）
表单是什么
1.文本框 text
2.下拉框 <select>
3.单选框radio
4.多选框check
5.隐藏域 hidden
6.密码框 password
表单的目的：提交信息
获得要提交的信息
<form action="" method="post">
<p>
<span>用户名：</span><input type="text" name="" id="username" value="" />
</p>
</form>
<script>
var inputText=document.getElementById('username');
//得到输入的值
//修改输入框的值
inputText.value='123';
</script>
提交表单
10.jQuery
javascript
jquery库，里面存在大量的javascript函数
获取jQuery
<!--公式：$(selector).action()-->
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('id')
//选择器
$('#test-jquery').click(function(){
alert('1')
})
10.1选择器
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jquery
$('p').click()//标签选择器
$('#id').click()//id选择器
$('.class').click()//类选择器
事件
鼠标事件 键盘事件 其他事件
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
#divMouse{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id=divMouse>
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后，响应事件
$(document).ready(function(){
$('#divMouse').mousemove(function(e){
$('#mouseMove').text('x'+e.pageX+'y'+e.pageY);
})
});
</script>
</body>
操作DOM
节点文本操作
$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('123');//设置值
css的操作
$('#test-ul').css('color','red');
$('#test-ul').css({"color":"red","font-size":"200%"});
元素的显示和隐藏：本质 display：none
$('#test-ul li[name=python]').hide();//隐藏
$('#test-ul li[name=python]').show();//显示
巩固js（看jquery源码，看游戏源码！）
巩固HTML css（扒王丹，全部down下来，然后对应修改看效果）
浙公网安备 33010602011771号