作为一个合格的后台开发人员,js是必须要掌握的知识,本人刚做开发的时候,使用的是前后端分离,但是一次离职之后,到了一家新公司,也是一家规模小的公司,需要自己做前台和后台的,后台这方面不用说了,前台是一个很大的难题,前台搞得我头大,特意制作一个简单的学习笔记,后续我也会制作一些常用的js特效来大家一起探讨,来帮助大家学习和进步,不对的地方希望大家能够指正!!!!。
我们首先简单介绍一下js,
第一课 1.JavaScript简介
JavaScript是NetScape公司为Navigator浏览器开发的,是卸载HTML文件中的一种脚本语言,能实现网页内容的交互显示。当用户在客户端显示该网页时,浏览器就会执行JavaScript程序,用户通过交互的操作来改变网页的内容,来实现HTML语言无法实现的效果。
2.如何使用JavaScript
(1)通过<script></script>中直接编写
<script type='text/javascript'>
js的位置
</script>
(2)通过<script src='目标文档的URL'></script>链接外部的Js文件
<script src="放在项目中js的位置"></script>
(3)作为某个元素的事件属性值或者是超链接的href属性值
<a href="javascript:confirm('您确定要删除吗')">删除</a>
3.代码屏蔽
标准的代码屏蔽方式
<script type='text/javascript'>
<!--
Js代码;
//-->
</script>
如果浏览器不支持Js,可以使用<noscript></noscript>标签,显示noscript中的内容(一般人都不知道吧)
4.JavaScript的基本语法
(1)JavaScript的执行顺序(很重要,一不小心放错位置可能会不执行啊)
按照在HTML文件中出现的顺序依次执行
如果需要在HTML文件执行函数或者全局变量,最好将其放在HTML的头部中。
(2)大小写敏感
JavaScript严格区分大小写
(3)忽略空白符和换行符
JavaScript会忽略关键字、变量名、数字、函数名或其它各种元素之间的空格、制表符或换行符
我们可以使用缩进、换行来使代码整齐,提高可读性
(4)使用;结束语句(这是一个很好的习惯)
(5)语句分隔符
(1)可以把多个语句写在一行
(2)最后一个语句的分号可以省略,但尽量不要省略
(3)可以使用{}括成一个语句组,形成一个块block(不是很常用,大家了解就好)
(6)通过\对代码进行折行操作
document.write(' hello\
world');
(7)注释(根据不同软件使用快捷键就好)
(1) 单行注释//
(2)多行注释/*注释内容*/
(8)JavaScript的保留字(也是一些关键字,大家可以简单看一看)
(9)通过document.write()向文档书写内容
(10)通过console.log()向控制台写入内容(在调试js中使用的是这个)
(11)JavaScript中的错误(介绍两个常用的处理异常或者是错误的方式,也是自己不断的调试才能真正的体会这个调试的技巧,后面也会详细地介绍)
(1)语法错误 :通过控制台进行调试
(2)逻辑错误:通过alert()进行调试
第二课 数据类型与变量(和java一样,js也有自己独立的数据类型和变量,其实js和java完全是两种不同的语言)
1.原始数据类型
(1)数值型
JavaScript中的数值包含整数和浮点数,所有数值都以双精度浮点型来表示。
双精度浮点数可以表示-2的53次方到2的53次方的整数,也可以表示为正负1.7976的10的308次方的最大值和正负2.2250乘以10的-308次方的浮点数。
(1)十进制数
(2)十六进制
(3)八进制数
(4)特殊值
Infinity无穷大
当一个数值或数值表达式的值超出了可表示的最大值的范围,将被赋值为Infinity。可以有无穷大Infinity,也可以有无穷小-Infinity
例如: 1.79e309 -1.79e309(也就是特别大的值)
NaN (Not a number)
NaN代表Not a Number。当一个Undefined表达式的结果为数值型数据时,该数值型就是NaN值。NaN是唯一一个不能和自身做比较的值
例如: 0/0 可以通过isNaN()检测值是否为NaN
(2)字符串型
(1)定界符 ""|''
(2)转义符 \n->回车换行
\r->换行
\t->水平制表符
\"->"
\'->'
(3)boolean型
true|false
2.复合数据类型
(1)对象(object)
(2)数组(array)
(3)函数(function)
3.特殊数据类型
(1)无定义数据类型undefined(在开发中你可能会经常遇到啊,下面简单的解释一下)
undefined用来表示不存在的值或者尚未赋值的变量。对一个变量只声明不赋值或者赋予一个不存在 的属性值,都会使这个变量的值为Undefined
(2)空值null
null表示空值,表示什么都没有,相当于一个占位符。null和undefined的区别就是undefined表示变量未被赋值,而null表示变量被赋予了一个空值。
这里也做一个简单的例子来解释这些含义
<script type="text/javascript">
//十进制
var a=12;
a=-23;
a=12.3;
a=.23e4;
a=2e3;
a=3E-2;
//十六进制
a=0xABCDEF;
a=0X0;
a=0Xfff;
//八进制
a=0123;
a=01234324;
//正无穷大Infinity
a=1.79e310;
a=-1.79e310;
//NaN:Not a Number
a=0/0;
// alert(a);
//通过isNaN()来检测是否是NaN值
// alert(isNaN(a));
//NaN不能和自身比较
// alert(NaN===NaN);
//字符串类型
var str='this is a test';
var str1="hello world";
// var str2=aaaa;
// alert(str);
// alert(str1); king's
// var username="king's";
// var username='king\'s';
// alert(username);
// var str2='a\nb\rc\td"e\\f';
// alert(str2);
//布尔类型
var married=true;
// married=TRUE;
// alert(true);
//声明变量为赋值
// var test6;
//赋值为不存在的属性值
var test7=String.NotExists;
// alert(test7);
//null值
var test8=null;
alert(test8);
alert(null===undefined);
</script>
4.变量(这个才是学习的重点地方)
(1)声明变量
(1) 通过var关键字声明变量
(2)可以声明变量的同时给变量赋值
(3)可以一次声明一个变量也可以一次声明多个看变量
(4)如果只声明变量未对其赋值,默认值为undefined
(5)如果变量重名产生覆盖
(6)注意:
(1)变量严格区分大小写
(2)变量名称不要包含特殊字符
(3)变量名称最好遵循驼峰标记法或者下划线法
(4)变量名称最好含义明确
下面一段代码解释这写(要是有不对的地方,大家直接@我我直接修改啊,以免造成误解)
<script type="text/javascript">
//声明变量
var a;
var b;
var c,d;
// alert(a);
//声明变量的同时并且赋值
var test='this is a test';
var test1=12;
var test2=1.2;
var test3=true;
var test4=false;
// alert(test);
//声明多个变量赋相同的初始值
var a=b=c=d=e=1;
// alert(a);
//变量重名会产生覆盖
a=33;
// alert(a);
//变量名称严格区分大小写
var username='king';
var USERNAME='QUEEN';
// alert(username);
// alert(USERNAME);
//变量名称最好含义明确,以字母或者下划线开始,跟上数字字母下划线
var age=12;
var test5='hello';
// var 12a='bb';
// alert(12a);
var _test='hello';
// alert(_test);
//驼峰标记法
var firstName='king';//小驼峰
var FirstName='queen';//大驼峰
var first_name='maizi';//下划线法
</script>
(2)变量在内存中的存储与释放(在这里先不详细地讲,后面会做补充)
(1)收集方式
(2)收集内容
(3)回收算法
5.类型转换
5.1隐式转换
5.1.1 转换成布尔类型假
undefined->false
null->false
数值型0或0.0或NaN->false
字符串长度为0->false
其它对象->true
特别注意的是::undefined->NaN
5.1.2 转换为数值型数据
null->0
true->1|false->0
内容为数字->数字,否则转换成NaN
其它对象->NaN
5.1.3转换为字符串型数据
特别注意的是: undefined->"undefined"
true->"true" false->"false"
数值型->NaN、0或者与数值对应的字符串
其它对象->如果存在这个对象则转换为toString()方法的值,否则转换为Undefined
5.2显示转换
5.2.1 转换成数值
(1)Number函数强制转换成数值
数值->转换成原来的值
字符串->如果可以解析为数值,则转换成数值;否则转换成NaN或者0
true->1,false->0
undefined->NaN
null->0
(2)转换成整型 praseInt()
(3) 转换成浮点型 praseFloat()
(4) 注意
Number函数将字符串转换为数值比praseInt函数严格很多。基本上只要有一个字符无法转换成数值,整个字符串就会被转换成NaN
5.2.2转换成字符串
(1)通过String函数转换成字符串
数值->数值本身
字符串->字符串本身
true->"true",false->"false"
undefined->"undefined"
null->"null"
(2)转换成字符串型 toString()函数
5.2.3转换成布尔类型
(1) 通过Boolean函数强制转换成布尔值
0、-0->false
NaN->false
空字符串->false
undefined->false
null->false
<script type="text/javascript">
/*
if(exp){
exp为true的代码段;
}else{
exp为false的代码段;
}
*/
//其它类型转换成布尔类型假的有
var a;//undefined->false
//typeof得到变量的类型
// alert(typeof a);
a=null;//null->false
//0 0.0 NaN->false
a=0;
a=0.0;
a=0/0; //NaN
a=NaN;
// alert(a);
a='';//空字符串->false
a='0';
a=' ';
// alert(typeof a);
// if(a){
// alert('真');
// }else{
// alert('假');
// }
//其它类型转换成数值型
var b=undefined;//undefined->NaN
b=null;//null->0
b=true;//true->1
b=false;//false->0
// alert(1+b);
var c='12';//'12'->12
c='3king';//'3king'->NaN
c='true';
// alert(2*c);
c='33';
// alert(typeof c);
// c=c*1;
// alert(typeof c);
</script>
<h1>隐式转换的例子</h1>
<script type="text/javascript">
//其它类型转换成字符串型
document.write(undefined);//'undefined'
document.write('<br/>');
document.write(null);//'null'
document.write('<br/>');
document.write(NaN);//'NaN'
document.write('<br/>');
document.write(123);//'123'
document.write('<br/>');
document.write(true);//'true'
document.write('<br/>');
document.write(false);//'false'oujipjip
document.write('<br/>');
alert(1+"1");//拼接字符串
alert('2'+12);//拼接字符串
</script>
<script type="text/javascript">
//其它类型转换成布尔类型false的有
var test=Boolean(0);
test=Boolean(-0);
test=Boolean(NaN);
test=Boolean(undefined);
test=Boolean('');
test=Boolean(0.0);
test=Boolean('0');
//其它类型转换成字符串型
test=String(1234);
test=String(23.34);
test=String('this is a test');
test=String(true);
test=String(false);
test=String(null);
test=String(undefined);
test=String(NaN);
//其它类型转换成数值型
test=Number(12);
test=Number(232.3);
test=Number(true);
test=Number(false);
test=Number(undefined);
test=Number(NaN);
test=Number(null);
test=Number('3king');
test=Number('324');
//通过parseInt()进行转换成整型
test=parseInt('123');
test=parseInt('234',0);
test=parseInt('0xabcdef');
test=parseInt('012344');
test=parseInt(45,16);
test=parseInt('3ki23ng');
test=parseInt('true');
test=parseInt(true);
test=parseInt(' 35 6 a ');
//通过parseFloat()转换成浮点型
test=parseFloat('123.34abc');
test=parseFloat('123');
test=parseFloat('sdf');
test=parseFloat(' 2e3a');
alert(test);
</script>
3 运算符和表达式
运算符和表达式是所有语言都有的知识点,这里把知识点列出,然后对知识点做一个简单的小例子,大家看一看就可以了。
1.表达式
表达式是用于JavaScript脚本运行时进行计算的式子,可以包含常量、变量、运算符
2.运算符
算术运算符
+、-、*、/、%、++、--
++、--分为前缀形式和后缀形式
前缀形式先加减1在执行
后缀形式先执行再加减1
注意
+号用来连接两个字符串
只要+连接的操作数中有一个是字符串型,Js就会自动把非字符串型数据作为字符串型数据来处理
Js代码的执行顺序是从左到右,所以在+连接的表达式中,遇到字符串型数据之前,所有出现的数值型数据(或者可以自动转换为数值型的数据)仍被作为数值来处理。为了避免这种情况,我们可以在表达式前拼一个空字符串
字符连接符
通过+连接字符串
赋值运算符
=、+=、-=、*=、/=、%=、.=
比较运算符
>、>=、<、<=、==、!=、===、!==
注意
比较运算符的结果为布尔类型
==只比较值是否相等、===比较值和类型
逻辑运算符
&&、||、!
注意
逻辑运算符的结果为布尔类型
&&如果第一个表达式为false,造成短路
||如果第一个表达式为true,造成短路
三元运算符
exp1?exp2:exp3
其它运算符
逗号运算符
逗号用来将多个表达式连接为一个表达式,新表达式的值为最后一个表达式的值,多用在变量声明处
void运算符
void运算符用来指明一个表达式无返回结果
typeof运算符
typeof运算符用来返回一个字符串,返回的是操作数的数据类型
3.运算符的优先级
通过()改变优先级
<script type="text/javascript">
var r=8;
var pi=3.14;
var s=pi*r*r;
alert('圆的面积'+s);
</script>
//算术运算符的例子
var i=3,j=8;
document.write(i+j);
document.write('<br/>');
document.write(i-j);
document.write('<br/>');
document.write(i*j);
document.write('<br/>');
document.write(i/j);
document.write('<br/>');
document.write(i%j);
document.write('<br/>');
document.write(3%-8);
document.write('<br/>');
document.write(-3%8);
document.write('<br/>');
document.write(-3%-8);
document.write('<br/>');
//+比较特殊
document.write(i+'8');
document.write('<br/>');
document.write('2'+'8');
document.write('<br/>');
document.write(i+j+'3king');
document.write('<br/>');
document.write(''+i);
var z=''+i;
// alert(typeof z);
document.write('<br/>');
document.write(''+i+j+'3king');
document.write('<br/>');
//自增自减运算符 ++ --
//整型支持自增 自减运算符
var num1=1;
// alert(num1++);
// alert(num1);
// alert(++num1);
// alert(--num1);
//浮点型支持自增自减运算符
num1=12.3;
// alert(--num1);
num1=true;
num1=false;
// alert(++num1);
// alert(--num1);
//字符串型不支持自增自减运算符
num1='3b';
// alert(++num1);
// alert(--num1);
//null支持自增自减运算符
num1=null;
// alert(++num1);
// alert(--num1);
num1=undefined;
alert(++num1);
<script type="text/javascript">
//字符串连接符+
document.write('hello'+' maizi '+'<br/>');
document.write(1+'king'+'<br/>');
var i=1,j=2,z=3;
document.write(''+i+j+z);
document.write('<br/>');
//赋值运算符的例子
var username='king';
document.write('用户名为:'+username+'<br/>');
//+= -= *= /= %= .=
var a=1;
a+=3;//a=a+3;
// alert(a);
a-=6;
a*=8;
a/=4;
a%=9;
document.write(a);
document.write('<br/>');
var str1=' hello ',str2=' world ';
str2+=str1;//str2=str2+str1;
document.write(str2);
//比较运算符的例子
// alert(3>1);
// alert(3>=1);
// alert(3<=12);
// alert(3<2);
var res=1==true;
res=1=='1';
res=3=='3king';
res=0==null;//false
res=0!=null;
res=1===true;
res=1!==true;
// alert(res);
// alert(NaN==NaN);//false
alert(undefined==undefined);
</script>
<script type="text/javascript">
//逻辑运算符的例子
//要求两个表达式为true,结果才是true
// alert(true && true);
// alert(true && false);
// alert(false && true);
// alert(false && false);
//如果第一个表达式为false,整个结果为false,就把第二个表达式短路了
var i=0,j=1;
if(i-- && j++){//0->false &&
document.write('hello');
}else{
document.write('world');
}
// alert(i);
// alert(j);
//逻辑或||
//两个表达中有一个为true,整个结果为true
// alert(true || true);
// alert(true || false);
// alert(false || true);
// alert(false || false);
//如果第一个表达式为true,整个结果为true,把第二个表达式短路了
i=1;
j=0;
if(i-- || ++j){//1->true
document.write('aa');
}else{
document.write('bb');
}
// alert(i);
// alert(j);
//逻辑非 !,取反的作用
alert(!true);
alert(!false);
</script>
<script type="text/javascript">
/*
三元运算符的例子
if(exp){
exp为true的代码段;
}else{
exp为false的代码段;
}
exp1?exp2:exp3;
*/
if(3>1){
document.write('aa');
}else{
document.write('bb');
}
document.write('<br/>');
var res=3>1?'aa':'bb';
document.write(res);
document.write('<br/>');
var x=0/0;
var x=123;
res=isNaN(x)?0:x;
alert(res);
</script>
<script type="text/javascript">
//逗号表达式的例子
var a,b,c,d;
var i=1,j=2,k=3;
var z=(n=1,m=2,p=3);
// alert(z+"\n"+n+"\n"+m+"\n"+p);
// //void运算符
// z=void(n=1,m=2,p=3);
// alert(z);
var x;
x=123;
x='king';
x=true;
x=null;
x=undefined;
x=[1,2,3];
// alert(typeof x);
alert((1+2)*4);
</script>