1、基本概念理解
一、js引入方式
css引入方式:
1、行内式
2、内嵌式
3、外链式 link标签
4、导入式
js的引入方式:
1、行内式
2、内嵌式 script标签
3、外链式 script标签的src属性,js文件的路径
外链式script标签里面不写js代码-->不执行不报错
4、 相当于导入式 document.write('<script src="js路径"></script>')
二、js输出方式
1、alert(); 在页面中弹出一个层
// alert("hello");
2.console.log();
// 要输出的内容,逗号隔开 ("a","b","c")
// 里面放的都是字符串或者变量,带引号的,只有纯数字的时候可以省略引号//也可以放函数
// 一般用于调试,不会影响网页中的内容
3.document.write();
直接在页面中显示,不停的输出
4、inner HTML/inner Text
动态的向指定元素中添加内容
5、console.dir
6.confirm
7.console.table
三、js组成
1、ECMAscript : ES5 ES6 规定了js中的命名规范、变量、数据类型、基本语法、操作语句
2、DOM : document object model 文档对象模型
3、BOM : browser object model 浏览器对象模型
html css js:
先加载css文件(head里面,保证用户体验) 再加载html代码
js代码通常放到body的最后面,js主要就是操作html元素的,
四、js命名规范
1、严格区分大小写
2、驼峰命名法(匈牙利命名法)
1)首字母小写,第二个有意义的单词开始首字母大写 不能用拼音和中文
2)可以由 数字 字母 _ $ 组成
3)不能以数字开头,也不能全部为数字
3、避开关键字 保留字(未来可能作为关键字的)
4、
五、js的变量
//变量:可变的量
// 变量的作用: 存储值 代表值
// var 变量名 = 变量值;
// = 赋值 左边变量名 右边变量值
// var 关键字 (关键字不可以作为变量名)
var a=123;
console.log(a); //--->"123" //输出的是变量代表的值
var zhufeng=1;
var c=[1,3,zhufeng];
// []里面数字、字符串,若直接放字母会被视为变量
var s=(1,3,"zhufeng",4);
// 意思是重复给c赋值,最后赋给的是"zhufeng" --->"zhufeng"
console.log(c);
console.log(s);
var x=
console.log(x);
//只声明不赋值 不知道什么类型 undefined
六、js中的数据类型
1、基本数据类型:
1)数字number
2)字符串string (js中不区分单双引号)
3)布尔boolean : true/false
4) null
5) undefined
2、引用数据类型:
对象object :Object Array RegExp String Boolean Date Math
函数function :var fn=function(){ };
七、number
1、数字数据类型: 数字(正数 负数 0 小数), NaN 。
=赋值
==比较 -->true/false
特殊:NaN==NaN -->false
2、isNaN( ); --true/false
作用:检测一个值是不是有效数字
()里面放字符串 数组 ,不放{},{}比较特殊
如果要检测对象是其他数据类型,会默认先进行Number转换。
3、Number() 强制转换
如果要转换的对象是字符串,字符串中必须全部为数字,否则反返回NaN
4、parseInt()parseFloat() 非强制转换
parseInt :从左到右依次查找 只要遇到一个字符不是数字,就停止查找
parseFloat:多识别一个点,第二个点就不能识别了
特殊:parseInt:(".3") -->NaN
parseInt:(.3) -->0
八、Boolean
1、布尔类型 : true false
0 NaN "" null undefined 为false,其余都为true
!取反:先将这个值转为布尔类型( Boolean()), 再取反
!! 相当于直接转化为布尔类型。等价于 Boolean()
九、对象 {}
1、对象:由多组属性名和属性名的键值对(key:value)组成,逗号隔开
var obj={ name:"123456", age:8 }; var student={ name:"dalyn", age:20, sex:"你猜", add:"北京" };
2、对象的创建方式
var obj={name:"zhufengpeixun"}; //字面量创建方式
var obj1=new Object(); //实例创建方式 就是这样的格式 记住
()里面可以放数字 会显示在最后面
3、增加属性名和属性值
obj1.name="珠峰";
obj1["age"]="培训";
console.log(obj1);
4、修改属性名对应的属性值
obj1.age=8;
console.log(obj1.age)
//获取一组属性名的属性值
//输出属性名对应的属性值
5、删除一组属性
delete obj1.name; //真删除
obj1.age=null; //假删除
console.log(obj1);
// 对象 类 实例
// js中万物皆对象,而类是对象的细分,实例为类中一个具体的实例
//对象数据类型中,
// Object(对象类) Array(数组类) RegExp(正则类) String(字符串类) Boolean(布尔类) Date(时间类) Math(数学类) , 这些类中的实例是对象数据类型 (这些类不是,实例才是)。
十、数据类型之间的比较
// == 比较, 返回:true false //1、相同数据类型直接比较即可, 但是对象与对象比较永远是false // ^_^ //2、不同数据类型之间的比较 // 1)对象==字符串:对象转化为字符串( 对象.toString() ),然后是字符串之间的比较 // []=="" --->[].toString()运算 ---> true // 特殊:[0.3]=="0.3" ---》true // [.3]==".3" ---》 false // [.3].tostring() -->"0.3" 然后 "0.3"==".3" 所以false // 2)对象==布尔 对象转为字符串再转为数字 布尔转为数字 //Number("") ---> 0 //Number(false) ---> 0 //Number(ture) ---> 1 // 3)对象==数字 对象转为字符串再转为数字 // 4)布尔==字符串 布尔转数字 字符串转数字 // 5)布尔==数字 // 6)字符串==数字 // 7)null==undefined ---》true // 8)null 或者 undefined与其他任何值比较都是false //3、=== 两侧数据类型必须相同 否则false // 严格比较 绝对比较 // null === undefined ---> false []=="" --->true ![]=="" --->true 不同数据类型 先执行! 再比较 ![]==[] --->true []==[] -->false
十、检测数据类型
// typeof 空格后面就是要检测的值 检测数据类型 //typeof 的返回值是字符串类型的,字符串里面有:number string boolean undefined object function 六种 //局限性:不能检测对象数据类型下面具体的细分 console.log(typeof 123); // 特殊: console.log(typeof null); //----> object console.log(typeof typeof []) //--->string 有两个或以上的typeof 都返回的是string //其他三种: constructor instanceof Object.prototype.toString.call()
十、基本数据类型与引用数据类型的本质区别
//基本数据类型:number string boolean null undefined // 引用数据类型:object : Object Array RegExp Date Math String Boolean // function : function(){}; // var num1=6; var num2=num1; num2++; // num2+=1 // num2=num2+1 console.log(num1); var obj1={name:"zhufeng"}; var obj2=obj1; obj2.name="zhufengpeixun"; console.log(obj1); // var num2=num1; 基本数据类型(数字 字符串 布尔 null undefined)操作的是一个值,等于把num1的值复制给了num2,改变num2 不会影响num1的值。 // var obj2=obj1; 新建一个引用数据类型,会自动创建一个虚拟空间,引用数据类型(对象 函数)操作的是这个虚拟空间的地址,等于把obj1的空间地址给了obj2,改变obj2的name后,改变的实际上地址所对应的空间内容,此时obj1 obj2对应的空间是同一个虚拟空间,故obj1的name也会改变