JavaScript知识总结(1)
一、js基础
(1)、概念
概念:控制页面行为的一种脚本语言
基础:HTML5+CSS3非常熟练
游览器本身并不会执行JS代码,而是通过内置JavaScript
引擎(解释器)来执行JS代码,JS引擎执行代码时逐行解释每一句源码,
然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行;
(2)、引入方式
行内js
事件=“内容”
内嵌式
<script>内容</script>
外链式
<script src="相对路径" type=“text/javascript”></script>
(3)、JS的常见事件
onmouseover 鼠标滑入事件
onmouseout 鼠标滑出事件
onmousedown 鼠标按下事件
onmouseup 鼠标抬起事件
onclick 鼠标点击事件
ondblclick 鼠标双击事件
<input type="button" value="鼠标点击事件" onclick="alert('你点我干啥?')" />
<input type="button" value="鼠标划入事件" onmouseover="alert('鼠标划入了`')" />
<input type="button" value="鼠标划出事件" onmouseout="alert('鼠标划出去了~~')" />
<input type="button" value="鼠标按下事件" onmousedown="alert('鼠标按下去了~~')" />
<input type="button" value="鼠标抬起事件" onmouseup="alert('鼠标抬起了~~')" />
<input type="button" value="鼠标双击事件" ondblclick="alert('鼠标双击了~~')" />
(4)、js的注释方式
单行
//注释内容
多行
/*注释内容*/
<script>
// alert("hello world~");单行注释
console.log("我可以在控制台打印内容要~");
console.info("我是info打印出来的信息");
/* console.warn("我是warn的警示信息");
console.error("你看到我估计就是代码出bug了");*/
//多行注释
document.write("<h2>我是</h2>")
document.write("<h2>啦啦啦啦啦啦啦</h2>")
</script>
(5)、JS的输出方式
alert()
console.log()
console.warn()
console.info()
console.error()
document.write()
<script>
alert("hello world~");
console.log("我可以在控制台打印内容要~");
console.info("我是info打印出来的信息");
console.warn("我是warn的警示信息");
console.error("你看到我估计就是代码出bug了");
document.write("<h2>我是</h2>")
document.write("<h2>啦啦啦啦啦啦啦</h2>")
</script>
二、变量与数据类型
1、变量
定义:是一个存放数据的仓库
= 变量的赋值操作
var 变量的声明
任何一个你想使用的新变量,都应该进行声明
变量允许一次声明多个,中间用“,”隔开
命名规则
1、必须以字母、下划线或美元符号开头;
不允许出现除"_"或者"$"以外的特殊符号和中文出现
2、变量名区分大小写
3、不允许使用关键字(if,else,for,while)和保留字(class、int、double、public)做变量名
在使用变量时分为两步:
1、声明一个变量
2、给变量赋值
var x=2;
console.log(a);
var a=100000,b=10000,c=1000,d=100;
alert(a+b+c+d);
var smile='\u263a';
document.write(smile);
document.write(smile);
document.write(smile);
document.write(smile);
document.write(smile);
document.write(smile);
document.write(smile);
2、数据类型
判断数据类型的常用方法typeof()
1、分类
分类
基本数据类型(值类型)
string 字符串
number 数字类型
boolean 布尔类型
复合数据类型(引用类型)
object 对象
null 空类型
Array 数组
json 键值对
function 函数
比较的是数据内存地址
特殊数据类型
undefined 未定义类型
var a="hello";
//判断数据类型的常用方法typeof();
alert(typeof(a));
var b=123;
alert(typeof b);
var c=true;
alert(typeof c);
var d=null;
alert(typeof d);
var f=undefined;
alert(typeof f);
var g=123;
alert(b==g); //ture
alert(typeof (b==g)); //boolean
var e=[1,2,'hello','你好',true,null,undefined];
//数组是一个复合数据类型;里面可以存放所有的基础数据类型
alert(typeof e);
var h={name:"xx",age:21,sex:"boy",tedian:"handsome",say:true};
//json是一个复合数据类型;里面可以存放所有的基础数据类型(键值对)
alert(typeof h);
var i=[1,2,'hello','你好',true,null,undefined];
alert(e==i);
特殊数据类型
<script>
var a=123;
var b='123';
alert(a==b);
</script>
2、转换数据类型
转换数据类型
隐式数据类型转换
任何一个数字类型,+""(空字符串)可以转换为字符串类型
任何一个字符串类型的数字,- 0可以转换为数字类型
任何一个字符串类型的数字,*1可以转换为数字类型
布尔类型+字符串类型=字符串拼接
结果:string
布尔类型(+或者-)数字类型=数学运算
true为1
false为0
结果:number
[]相当于0,也可以运算
显示(强制)数据类型转换
数字类型
Number()
parseInt()
整型变量
parseFloat()
浮点型变量
字符串类型
A.toString(b)
A不能是null和undefined
b为2进制,8进制,16进制
String()
所有类型都能转换
布尔类型 Boolean
所有类型都能转换
数字:非0即真,0为假
null和undefined都是false
字符串:非空即真,空为假
<script>
//隐式数据类型转换
var a='8',b=2,c='hello',f=false,g[];
alert(typeof(a=b)); //string
//+''
alert(b+''); //2
alert(typeof(b='')); //string
//-0
alert(a-0) //8
alert(typeof (a-0)); //number
//*1
alert(a*1); //8
alert(typeof (a*1)); //number
alert(f-b); //-1
alert(typeof(f+a)); //(f+a)为false8---类型为string
alert(typeof(f+b)); //f+b为2----类型为number
alert(g+b);
var d=c-0;
alert(d); //NaN是一个不是数字的数据类型
alert(typeof d); //number
alert(d==d); //NaN自己不认识自己
alert(isNaN(d)); //true
alert(isNaN(b)); //false
三、运算符与弹出框
1、等号的区别
等号的区别
= 相当于变量的赋值
== 相当于左右两侧值的比较,不比较数据类型的
=== 先比较数据类型,再比较值
2、算术
算数运算符 +、-、*、/、%
特殊 +
如果两侧同时为数字,则执行的是加法运算
如果两侧的任何一侧为字符类型,得到的结果是字符串类型,+就相当于字符串拼接
-、*、/、%
如果两侧同时为数字,那么执行对应的算术运算
如果两个任何一次为非数字,会强制把改非数字转成数字类型,然后进行运算;
如果转换不成功,会得到一个NaN(Not a Number)
isNaN()可以用来检测该对象是不是数字;
true 不是数字
false 是数字
isNaN()自带一个Number()方法,如果Number能转成数字,则返回false,如果转不成,则返回true;
a++与++a的区别:
++在后面,是先赋值,再++
++在前面,是先++,在赋值
var a='13',b=5,c=4;
alert(a+b);
alert(typeof (a+b));
alert(b+c);
alert(10+20+"=30");
alert("30="+10+20);
alert(a%b);
alert(typeof (a%b))
var a=2;
a=a+2;
a+=2; //4
a=a+1; //5
a+=1;
a++;
alert(a);
alert(a++); //2
//由于++在后面,先弹出a,再运算,a=3
alert(++a); //4
//++在前面,先运算,再弹出
var a=10,b;
b=a++; //b=10,a=11;
b=++a; //b=12;a=12;
alert(a++); //12 ;a=13
alert(++a); //14 ;a=14
alert(a); //14
alert(b); //12
var a=10,b=5;
alert(++a + b + b++ + --a +b);
//11(a=11)+5+ 5(b=6) + 10(a=10) + 6
3、比较
比较运算符
>、<、>=、<=、==、!=
比较运算符返回的是布尔值
alert(2>3); //false
alert(3<'5'); //true
alert(true==1); //true
alert(8>=8); //true
alert(8!=8); //false
alert(NaN!=NaN); //true
alert(0.1+0.2==0.3); //特殊情况
alert(0.1+0.2);
4、逻辑
逻辑运算符
&&、||、!
逻辑运算符返回的是布尔值
//&&的逻辑为:全真为真,一假全假
alert(false&&true)
alert(true&&true)
//练习:
alert(NaN!=NaN&&8!=4) //true
//||的逻辑,全假为假,一真全真
alert(false||true);
alert(false||false)
//练习
alert(2==='2'||8<4);
//! 的逻辑;非真即假,非假即真
alert(!true);
//练习
alert(!2);
5、异域
异或运算符
^
同为0,异为1,不进位
//^ 的逻辑:同为0;异为1;
alert(false^true)
6、弹出框
弹出框
confirm() 确认框
值
确认 取消
返回值为true或者false
数据类型为boolean
prompt()
对话框
值
可以设置
也可以省略
返回值的数据类型为string
<script>
confirm("你确定要删除它?")
alert(a)
var b=prompt("输入你的数字");
alert(b);
alert(typeof b);
</script>
暂时就先到这了,后面的有空在写。