JavaScript
1、概念
js:javascript
概念： 一种基于对象和事件驱动的客户端脚本语言
详细： 基于对象：js中所有的内容都是对象 js的开发依赖于浏览器中所有内置对象。
事件：在页面执行的所有操作：如 点击按钮，鼠标悬停，输入文本。
事件驱动：当客户在页面执行某个操作，次操作对应的事件就会被触发，此事件注册的js代码就会执行页面客户的操作 驱动 关联js代码的执行。
客户端：js代码嵌套在html中 js代码可以被浏览器中的内置的js引擎 解析并运行。
脚本语言：嵌套在页面中 实现页面动态效果的编程类语言。
特点： 1，基于对象
2，简单性（弱类型语言，语法太严格）
3，跨平台（js代码可以在任意操作系统上运行）
4.安全性（不允许访问硬盘）
5.动态性（通过js代码实现页面的动态效果（页面样式和数据发生变化））
前端三剑客:HTML+CSS+JS
html：提供标签，封装数据
css：提供属性，控制数据的样式
js：通过编程逻辑，来实现页面的动态效果
2、javascript和java的区别
java：一种实现后台业务逻辑的面向对象的高级编程语言
js：一种基于对象和事件驱动的客户端脚本语言
相同之处：都是编程语言
不同之处；1：js是基于对象
java是面向对象（编程思想）
2：js是弱类型语言
java是强类型语言（定义变量时 必须先指定类型 变量一旦定义 类型不能更改 而且只能存储对应类型的数据）
3：js实现页面动态效果
java实现后台业务逻辑
4：js是解释型语言：js被浏览器中内置的js引擎 解释后就可以运行
java是编译型语言：java代码必须被编译器编译成为字节文件码后，字节码文件才能被jvm运行
5：js是NetScape（网境）公司的产品
java是sun公司的产品 是oracle收购
3、编程类语言的组成
- 标识符：名字
- 关键字：被赋予特殊含义的单词或者字符
- 数据类型：数据类型（数字，字符，布尔，字节，对象）
- 运算符：进行数学运算的符号（算数，逻辑，赋值，比较，位，三元）
- 变量和常量：只可以更改的是变量，值不可以更改的是常量
- 数组：容器 接受多个数据
- 方法：指定功能代码块的封装——代码复用
- 注释：对代码的解释说明
- 语句：一段完整的计算机指令
- 对象和类：对一类实物的描述/类的实例
4 、js和html整合的方式
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>js_01语法</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<!--js和html整合方式1：script标签中的就是js代码
script标签可以写在任意位置
-->
<script type="text/javascript">
function test01(){
alert("点我干啥！！1");/*弹出一个提示框*/
}
</script>
<!--js和html整合方式2：通过script标签的src属性来引入外部js文件
script标签设置了src属性 此 script中不能再写js代码
-->
<script type="text/javascript" src="01.js">
alert("点我干啥！！3");/*此代码不会执行*/
</script>
<body>
<!--onclick="test01();" 当前按钮被点击 触发onclick事件 对应的方法test01就会执行-->
<input type="button" value="点我测试1" onclick="test01();"/><br/>
<input type="button" value="点我测试2" onclick="test02();"/><br/>
</body>
<html>
function test02(){
alert("点我干啥！！2");/*弹出一个提示框*/
}
5 、js语法(只关注与java的不同之处)
5.1 、数据类型
<input type="button" value="点我测试3数据类型" onclick="test03();"/><br/>
<script type="text/javascript">
function test03(){
/*方法2：typeof()*/
var i;//定义一个变量 变量名为i 默认值是undefined
alert(1+":::"+(typeof(1)));//number
alert(1.1+":::"+(typeof(1.1)));//number
alert("abc"+":::"+(typeof("abc")));//string
alert('a'+":::"+(typeof('a')));//string
alert(true+":::"+(typeof(true)));//boolean
alert(new Object()+":::"+(typeof(new Object())));//object
alert([1,2,3]+":::"+(typeof([1,2,3,4])));//object
alert(i+":::"+(typeof(i)));//undefined
}
</script>
1 js中数字类型 没有整数和浮点之分
2 js中字符串和字符都是string ，换句话说双引号/单引号 都表示字符串
3 js中当一个变量 没有赋值 默认赋值常量值undefined(表示变量没有赋值)
5.2、 常量和变量
<input type="button" value="点我测试4 常量" onclick="test04();"/><br/>
<script type="text/javascript">
function test04(){
/*方法3：document.write(); 把参数数据以html代码解析后在页面现实*/
document.write("<font color='red' size='4'>font标签</font><br/>");
var j;
document.write("<font color='red' size='4'>j="+j+" ::undefined：表示当前变量没有赋值</font><br/>");
var k=null;
document.write("<font color='red' size='4'>k="+k+" ::null：表示变量没有指向任何对象</font><br/>");
var h=5/"a";
document.write("<font color='red' size='4'>h="+h+" ::NaN： 表示当前数据没法得到一个数字</font><br/>");
var g="";
document.write("<font color='red' size='4'>g="+g+" :: 空字符串对象</font><br/>");
}
</script>
<input type="button" value="点我测试5 变量" onclick="test05();"/><br/>
<script type="text/javascript">
var g=1,k=2;
</script>
<script type="text/javascript">
var h=1,r=2;//全局变量
function test05(){
//注意1：js中变量的类型可以更改 js是弱类型语言
var i;//定义变量用var
i=1;//变量赋值
document.write("<font color='red' size='4'>i="+i+"</font><br/>");
i="abc";
document.write("<font color='red' size='4'>i="+i+"</font><br/>");
i=true;
document.write("<font color='red' size='4'>i="+i+"</font><br/>");
//注意2：js中变量可以定义多次
var i=12;
document.write("<font color='red' size='4'>i="+i+"</font><br/>");
//注意3：变量定义可以省略 直接赋值就能使用
ii=1;
document.write("<font color='red' size='4'>ii="+ii+"</font><br/>");
//注意4：整个script标签是相通的
document.write("<font color='red' size='4'>g="+g+",k="+k+"</font><br/>");
//注意5：js中变量分成两种：
// 全局变量：在方法外定义的变量：：作用域：整个页面
// 局部变量：在方法中定义的变量(参数列表+方法体)：：作用域：当前方法
var h=11;//局部变量
document.write("局部变量:h="+h+"<br/>");
document.write("全局变量:this.h="+this.h+"<br/>");
}
</script>
5.3、 运算符
<input type="button" value="点我测试6 运算符" onclick="test06();"/><br/>
<script type="text/javascript">
function test06(){
//1：算术运算符：+ - * / % ++ --
//++混合运算：++在前 先自增 拿自增后的值参加本次运算
// ++在后 先拿当前值参加本次运算 然后再自增
//n%m= n除以m得到一个整数 除不尽的那部分就是余数
//java中：运算后结果的数据类型取决于精度最高的数据
document.write("1/2="+(1/2)+"<br/>");//0.5
//+：加法运算、正负的正、字符串拼接
document.write("1+\"2\"="+(1+"2")+"<br/>");//"12"
document.write("1-\"2\"="+(1-"2")+"<br/>");//"-1" 字符串无法进行减乘除运算
//会自动把数字类型的字符串转换为数字
document.write("\"1\"*\"2\"="+("1"*"2")+"<br/>");//"2"
//方法4：parseInt()把参数字符串转换为整数：parseFloat()把参数字符串转换为浮点数字
document.write("1+\"2\"="+(1+parseInt("2"))+"<br/>");//3
document.write("1+\"2.1\"="+(1+parseFloat("2.1"))+"<br/>");//3.1
document.write("1+\"abc\"="+(1+parseFloat("abc"))+"<br/>");//NaN
//NaN:结果不是一个数字
//NaN比较不能用== 使用方法isNaN()
document.write((parseFloat("abc")==parseFloat("abc"))+"<br/>");//false
document.write((parseFloat("abc")==NaN)+"<br/>");//false
document.write(isNaN(parseFloat("abc"))+"<br/>");//true
//2 比较运算符：> >= < <= != ==
//3 赋值运算符：= += -= *= /= %=
//4 逻辑运算符： && || !
//5 位运算符： & | ^ >>> <<<
document.write((13|4)+"<br/>");//1101 100
//6 三元运算符：
}
</script>
5.4、 流程控制
<input type="button" value="点我测试7 流程控制" onclick="test07();"/><br/>
<script type="text/javascript">
function test07(){
//1 顺序结构：没有关键字时 默认流程：从上到下 从左到右
//2 选择结构：if-else switch
//注意：js中所有数据都可以作为boolean值使用
// 5种特殊情况是false：：：NaN、undefined、0、""、null
// 其他所有数据都是true
if(!0){
document.write("!0是true<br/>");//true
}
if(!""){
document.write("!\"\"是true<br/>");//true
}
if(!null){
document.write("!null是true<br/>");//true
}
if(!NaN){
document.write("!NaN是true<br/>");//true
}
if(!undefined){
document.write("!undefined是true<br/>");//true
}
if(" "){
document.write("\" \"是true<br/>");//true
}
if(-1){
document.write("-1是true<br/>");//true
}
if(new Object()){
document.write("new Object()是true<br/>");//true
}
if([]){
document.write("[]是true<br/>");//true
}
//3 循环结构：for while dowhile
//4 跳准：break continue
}
</script>
5.5、方法
<input type="button" value="点我测试1 方法" onclick="test01();"/><br/>
<script type="text/javascript">
/*
js中方法的特点：
1 格式不同：
java方法格式： 修饰符 返回值类型 方法名(参数列表){
实现方法具体功能的代码
return 返回值;
}
js方法格式： function 方法名(参数列表){
实现方法具体功能的代码
return 返回值;
}
2 变量的分类：
方法中定义的变量是：局部变量 作用域是当前方法
方法外定义的变量是：全局变量 作用域是整个页面
3 js方法实参的个数可以和形参的个数不同
js方法中默认有一个数组 名字为arguments 来接受所有的实参
4 js中方法也是对象：
var test012=test011;//给test011指向的方法 又起个名字叫test012
实参和形参：实参--方法调用时传递的参数具体值
形参--方法定义时的参数列表变量
*/
function test01(){//定义方法
var sum= test011(1,2,3,6,8,9); //调用方法
//sum= test011(1); //调用方法
//alert("sum="+sum);//NaN
var test012=test011;//给test011指向的方法 又起个名字叫test012
//alert(test012);
test012(1,4);
}
function test011(a,b){//定义方法
//alert("a="+a+",b="+b);
//js方法中默认有一个数组 名字为arguments 来接受所有的实参
document.write("arguments="+arguments+"<br/>");
for(var i=0;i<arguments.length;i++){
document.write("arguments["+i+"]="+arguments[i]+"<br/>");
}
return a+b;
}
</script>
6、Array数组对象
/*
js中数组与java不同之处
1：js中创建数组有两种方式：通过[] 和 通过Array的构造方法
2：js数组不存在下标越界异常
3：js中数组元素个数可以更改 不存在下标越界异常
数组元素的默认值是undefined
4: js中数组元素类型可以不同
js数组中的方法：
1 array1.concat([item1...]) ；获取一个新的数组 新数组由array1和参数元素组成
2 array1.join(separator)； 获取一个字符串：由元素和参数分隔符组成
3 arrayObj.pop( )；移除数组中的最后一个元素并返回该元素。
arrayObj.shift( )；移除数组中的第一个元素并返回该元素。
4 arrayObj.push(item1...)；将新元素添加到一个数组中，并返回数组的新长度值。
5 arrayObj.reverse( );反转
6 arrayobj.sort(sortfunction) ：排序
*/
var arr=[1,5,8,9,0];//创建数组方式1 通过[]
document.write("arr="+arr+"<br/>");
arr=new Array();// 创建数组方式2 通过Array的构造方法：Array()没有元素的数组
document.write("arr="+arr+"<br/>");
arr=new Array(5);//创建数组方式2 通过Array的构造方法：Array(5)含有5个元素的数组
document.write("arr="+arr+"<br/>");
arr=new Array(5,12,3,4);//创建数组方式2 通过Array的构造方法：Array(元素1,元素2,...)含有指定个元素的数组
document.write("arr="+arr+"<br/>");
document.write("arr[0]="+arr[0]+"<br/>");
document.write("arr[4]="+arr[4]+"<br/>");//arr[4]=undefined
document.write("arr[-4]="+arr[-4]+"<br/>");//arr[4]=undefined
arr[5]=6;
//arr=5,12,3,4,,6 length=6
document.write("arr[4]="+arr[4]+"<br/>");//arr[4]=undefined
document.write("arr="+arr+" length="+arr.length+"<br/>");
arr=[1,5,8,true,"abc"];
document.write("arr="+arr+"<br/>");//arr=1,5,8,true,abc
/*js数组中的方法*/
var arr1=[1,4,5];
var arr2=arr1.concat(6,8,9,0);//获取一个新的数组：由arr1和参数元素组成
document.write("arr1="+arr1+"<br/>");
document.write("arr2="+arr2+"<br/>");
document.write("arr2.join(\"-\")="+arr2.join("-")+"<br/>");
document.write("arr2.push(1,4)="+arr2.push(1,4)+",arr2="+arr2+"<br/>");
document.write("arr2.reverse()="+arr2.reverse()+"<br/>");
arr2.sort();
document.write("arr2="+arr2+"<br/>");//arr2=0,1,1,4,4,5,6,8,9
arr2=["abc","ac123","ac45","a","c","1234","1"];
arr2.sort();
document.write("arr2="+arr2+"<br/>");
//先按长度排序 再按编码标排序
arr2.sort(biJiao);
document.write("arr2="+arr2+"<br/>");
function biJiao(a,b){
if(a.length!=b.length){
return a.length-b.length;
}
//String对象的方法：int charCodeAt(index);获取参数下标出字符对应的编码标中整数
for(var i=0;i<a.length;i++){
if(a.charCodeAt(i)!=b.charCodeAt(i)){
return a.charCodeAt(i)-b.charCodeAt(i);
}
}
return 0;
}
7、Date日期对象
/*
Date日期对象：js的Date和java的Date基本一样
构造方法：Date();获取当前时间对应的日期对象
Date(time);获取参数毫秒值对应的日期对象
Date(year,month,day[,hour,minute,second]);获取参数时间参数对应的日期对象
注意：年是完整的年 月是0-11
普通方法：
1 获取和设置时间参数：
int getXxx(); 获取时间参数
void setXxx(int xxx);设置时间参数
2 日期和毫秒值 之间的转换
long getTime():获取当前时间对象对应的毫秒值
void setTime(long time): 设置当前日期对象对应的时间为参数毫秒值的时间
3 String toLocaleString() :获取当前操作系统设置的日期格式的字符串
*/
function testDate(){
var date=new Date();
document.write("new Date()="+date+"<br/>");//new Date()=Thu Sep 16 2021 14:22:28 GMT+0800 (中国标准时间)
document.write("new Date().toLocaleString()="+date.toLocaleString()+"<br/>");
date=new Date(1);//毫秒值是相当于历元：1970-1-1 0:0:0
document.write("new Date().toLocaleString()="+date.toLocaleString()+"<br/>");
date=new Date(2021,9-1,16,14,25,21);//month从0-11
document.write("new Date().toLocaleString()="+date.toLocaleString()+"<br/>");
//日期和毫秒值之间的转换
document.write("date.getTime()="+date.getTime()+"<br/>");
date.setTime(0);
document.write("date.toLocaleString()="+date.toLocaleString()+"<br/>");
//设置时间参数
date.setYear(2021);
date.setMonth(9-1);
date.setDate(16);
date.setHours(14);
date.setMinutes(31);
date.setSeconds(24);
document.write("date.toLocaleString()==="+date.toLocaleString()+"<br/>");
myDate2Str(new Date());//121-9-16 星期4 14:36:41
}
function myDate2Str(date){
var weeks="日一二三四五六";
//获取时间参数
var year=date.getYear()+1900;
year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var week=date.getDay();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
document.write(year+"-"+month+"-"+day+" 星期"+(weeks.charAt(week))+" "+hour+":"+minute+":"+second+"<br/>");
}
testDate();
8、Math数学运算
/*
Math:数学运算相关的方法：没有构造方法 固有对象(成员都是静态的)
属性：PI E
方法：1 取近似值
int floor(double n);获取小于等于n的最大整数
int ceil(double n);获取大于等于n的最小整数
int round(double n);四舍五入
2 绝对值
double abs(double n)
3 随机：[0,1)
double random();
4 幂运算
double sqrt(double n);n开方
double pow(a,b);求a的b次方
5 获取最大值最小值
double min(a,b,c...);
double max(a,b,c...);
*/
function testMath(){
for(var n=1;n<=5;n+=0.1){
//document.write("Math.floor("+n+")="+Math.floor(n)+"<br/>");
//document.write("Math.ceil("+n+")="+Math.ceil(n)+"<br/>");
//document.write("Math.round("+n+")="+Math.round(n)+"<br/>");
//随机1-10:乘以范围 加上起始值 强制转化为int
var m=parseInt(Math.random()*10+1);
//document.write(m+"<br/>");
}
}
testMath();
9、String字符串对象
/*
String对象：字符串
和java完全相同的方法：
1 strObj.charAt(index)：获取参数下标出的字符
2 string1.concat([string2...)：把参数字符串拼接到当前字符串后面
3 strObj.indexOf(subString[, startIndex])：从startIndex位置处开始找 获取subString第一次出现的位置
strObj.lastIndexOf(substring[, startindex])：倒着找
4 stringObj.replace(old, new)：使用new替换第一个old
5 stringObj.split(separator):使用separator切割当前字符串 获取一个字符串数组
6 stringvar.substr(start [, length ])：获取字串：从start开始长度为length
strVariable.substring(start, end)：获取字串：从start开始到end-1结束
7 strVariable.toLowerCase( )：把所有字母转化为小写
strVariable.toUpperCase( )：把所有字母转化为大写
特有方法：
1 strObj.charCodeAt(index)；获取index下标出的字符在编码标中对应的整数
2 strVariable.bold()：--<b>str</b>
strVariable.fontcolor(colorVal) --<font color="colorVal">str</font>
strVariable.fontsize(intSize) --<font size="intSize">str</font>
strVariable.italics( ) --<i>str</i>
*/
function testStr(){
var str="abcabcabcaaass";
str=str.replace("a","0");
document.write(str+"<br/>");//abcabcabcaaass
document.write(str.fontsize(7).fontcolor("red").bold().italics()+"<br/>");
}
testStr();
10、Global全局方法
/*
Global:全局：有些方法不属于某个对象 这样的方法统一定义在Global类中
1 isNaN(numValue) ：判断参数数据是不是NaN
2 parseInt(obj): 把参数数据转化为int
parseFloat(obj): 把参数数据转化为float
3 eval(str): 使用js引擎解析字符串
*/
var str="var a=1,b=2;alert(a+b);";
eval(str);//var a=1,b=2;alert(a+b);
- 方法：获取参数数字 保留指定的小数位数：3.1415926--3：3.142
- 方法：写一个方法替换所有replace(old, new)
- 方法：打印参数字符串中所有字符出现的次数
function myRound1(n,weiShu){//3.1415926--3
//获取10的位数次方
var temp1=Math.pow(10,weiShu);//1000
var nNew=parseInt(n*temp1);//3141
var temp2=Math.pow(10,-1*weiShu);//0.001
var yuShu=n%temp2;//0.0005926
nNew+=yuShu>=temp2/2?1:0;
nNew=nNew/temp1;
document.write("n="+n+",weiShu="+weiShu+",nNew="+nNew+"<br/>");
return nNew;
}
myRound1(3.1415926,3);
function myRound2(n,weiShu){//3.1415926--3
var str=n+"";
var strNew=str.substring(0,str.indexOf(".")+weiShu+1);
var m=parseInt(str.charAt(str.indexOf(".")+weiShu+1));
strNew=parseFloat(strNew);
strNew+=m>=5?Math.pow(10,-1*weiShu):0;
document.write(strNew+"<br/>");
return strNew;
}
myRound2(3.1415926,3);
function myReplace(str,oldC,newC){
while(true){
if(str.indexOf(oldC)==-1){
break;
}
str=str.replace(oldC,newC);
}
document.write(str+"<br/>");
}
myReplace("abcabcacb123aaacc","a","0");
//方法：打印参数字符串中所有字符出现的次数
function printCiShu(str){
//获取str中所有不重复的字符
var ss="";
for(var i=0;i<str.length;i++){
var c=str.charAt(i);
if(ss.indexOf(c)==-1){
ss+=c;
}
}
//遍历ss 获取一个字符
for(var i=0;i<ss.length;i++){
var c=ss.charAt(i);
var ciShu=0;
//获取c在str中出现的次数
for(var j=0;j<str.length;j++){
var cc=str.charAt(j);
if(c==cc){
ciShu++;
}
}
document.write(str+"中字符("+c+")出现的次数是"+ciShu+"<br/>");
}
}
printCiShu("abcabcacb123aaacc");
