javaScript
javascript基础
概念:客户端脚本语言
运行在客户端浏览器中没一个浏览器都有javaScript的解析引擎
脚本语言:不需要编译,直接被浏览器解析执行
功能:
可以增强用户与html交互的过程,可以控制html元素,让页面有一些动态的效果,增强用户的体验
javaScript发展史:
1.1992年,Nombase公司,开发出第一门脚本语言,用于表单验证。命名为C–,后来更名为:ScriptEase
2.1995年,Netscape(网景)公司,开发一门客户端脚本语言:LiveScript。后来,请来sum公司,修改liveScript命名javaScript
3.1996,微软抄袭javaScript开发出JScript语言
4.1997,ECMA(欧洲计算机制造商协会),ECMAScript,就是所有客户端脚本语言的标准
javaScript = ECMAScript + javaScript自己特有的东西(BOM+DOM)
ECMAScript:客户端脚本语言的标准
1.基本语法
1.与html结合方式
1.内部js
定义
2.外部
定义
注意
1.
2.
<!-- 内部-->
<script>
alert("hellow")
</script>
<!-- 外部-->
<script src="a.js"></script>
2.注释
单行//
多行/**/
3.数据类型
1原始数据类型(基本数据类型):
1.number:数字、整数、小数、Nan(not a number)
2.string:字符串。字符/字符串 “abc” ‘abc’
3.boolean:true和false
4null:一个对象为空占位符
5undefined:为定义。如果一个对象没给初始化值,就会默认赋值为undefined
2引用数据类型:对象
4.变量
变量:一小块存储的内存空间
java语言是强类型 ,js弱类型
强类型:在开辟变量存储空间时,定义了空间将来存储数据的数据类型。只能存储固定类型的数据
弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型。可以存放任意类型的数据
语法:
var 变量名 = 初始化值;
typeof运算符:获取变量的类型。
注:null运算符得到的是object
5.运算符
1.一元运算符,只有一个运算数的运算符
++ --,+(正号)
±号注意:在js中,如果运算不是运算符的类型,那么js引擎会自动将运算符进行类型转换
其它类型转number
字符串转number按照字面值转换,如果字面值不是数字,则转为NaN(不是数字的数字)
boolean转number:true转为1,false转为0
var b = +"123";
alert(b)
2.算数运算符
+ - * / % ...
3.赋值运算符
= += -+ …
4.比较运算符
>< >= <= == ===(全等于)
<script>
/**
* 比较运算符
* 比较方式
* 1.类型相同:直接比较
* 字符串:按照字典顺序比较,按位逐一比较,直到得出大小为止。
* 2.类型不同先进行类型转换,再比较
* "===":全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
*
*/
document.write(3>4+"<br>")
document.write("abc">"acd"+"<br>")
document.write(("123"==123)+"<br>")
</script>
5.逻辑运算符
&& || !
<script>
/*
* 逻辑运算符
* &&:与(短路)
* ||或(短路)
* !:非
* *其它类型转boolean
* 1.number 0或NaN为假,其他为真
* 2.string除了空字符串(""),其他都是true
* 3null&undefined:都是false
* 4.对象:所有对象都为true
* */
var flag = true;
document.write(flag+"<br>")
document.write(!flag+"<br>")
document.write("<hr/>")
var flag = 3;
document.write(!!flag+"<br>");
document.write("<hr/>")
var str1 = "abc";
var str2 = "";
document.write(!!str1+"<br>");
document.write(!!str2+"<br>");
document.write("<hr>")
var obj = null;
var obj2;
document.write(!!obj+"<br>");
document.write(!!obj2+"<br>");
document.write("<hr>")
// if(obj!=null){//防止空指针异常
//
// }
//简化的
if(obj){
}
</script>
6.三元运算符
?:表达式
<script>
var a = 3;
var b = 4;
var c = a>b?1:0
document.write(c)
</script>
语法:
表达式?值1:值2
判断表达式的值,如果是true则取值1,如果是false则取值2
6.流程控制语句:
1.if …else…
2.switch:
在java中switch可以接收的数据类型:byte int short char 枚举(1,5),Stirng(1,7)
switch(变量):
case 值:
在js中可以接收任意数据类型
3.while
4.do…while
5for
7.js特殊语法
<script>
//1.语句以分号结尾,如果一行只有一条语句,则可以省略(不建议)
var a = 3;
alert(a);
/*
2.变量定义使用var关键字,也可以不使用
用,定义变量是局部
不用,定义的是全局(不建议)
*/
//2.
// b = 4;
// alert(b);
function f() {
b = 4;
alert(b);
}
f();
alert(b)
</script>
<body>
九九乘法表
<script>
document.write("<table align='center'>")
for (var i = 1; i <=9 ; i++) {
document.write("<tr>")
for (var j = 1; j <i ; j++) {
document.write("<td>")
//输出
document.write(i+"*"+j+"="+(i*j)+" ");
document.write("</td>")
}
//输出换行
// document.write("<br>")
document.write("</tr>")
}
document.write("</table>")
</script>
<style>
td{
border: 1px solid;
}
</style>
2.基本对象
Function对象:函数对象
<script>
/*
Function函数(方法)对象
1.创建
1.var fun = new Function(形式参数列表,方法体)//不适用
2.function 方法名称(形式参数列表){
方法体
}
3.var 方法名 = function(){}
2.方法
3.属性
length:代表形参的个数
4.特点
1.方法定义时候形参类型不用写
2.方法是一个对象如果定义一个名称相同的方法,会覆盖
3.在js中,方法的调用只与方法的名称有关,和参数列表无关
4.在方法声明中有一个内置对象(数组),arguments,封装所有实际参数
5.调用
方法名称(实际参数列表)
*/
//1.创建方法1
// var fun1 = new Function("a","b","alert(a);")
//2.调用方法
// fun1(3,4)
//2.方式2
// function fun2(a,b) {
// alert(a+b);
// }
// fun2(3,4);
//3.方法3
// var fun3 = function (a,b) {
// alert(a+b);
// }
// fun3(3,4)
/*
求两个数的和
*/
// function add(a,b) {
// return a+b;
// }
/*
任意个数和
*/
function add() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum +=arguments[i];
}
return sum;
}
var sum = add(1,2,3);
alert(sum);
</script>
Array
<script>
/*
Array数组对象
1.创建
1.var arr = new Array(元素列表);
2.var arr = new Array(默认长度);
3.var arr =[元素列表]
2.方法
join():将元素数组元素拼接成字符串
push():向数组的末尾添加一个或更多元素,并返回新的高度
3.属性
4.特点
1.js中元素的类型是可变的
2.js元素中长度可变
*/
var arr1 = new Array(1,2,3);
var arr2 = new Array(5);
var arr3 = [1,2,3,4];
var arr4 = new Array();
document.write(arr1+"<br>");
document.write(arr2+"<br>");
document.write(arr3+"<br>");
document.write(arr4+"<br>");
var arr = [1,"abc",true];
document.write(arr+"<br>");
document.write(arr[0]+"<br/>")
document.write(arr[1]+"<br/>")
document.write(arr[2]+"<br/>")
document.write(arr.join("--")+"<br>")
arr.push(11);
document.write(arr.join("--")+"<br>")
</script>
Boolean
Date
<script>
/*
Date日期对象
1.创建:
var Date = new Date()
2.方法
tolocaleString(),返回当前date对象对应的时间本地字符串格式
getTime(),获取毫秒值,返回当前时间对象描述的时间到1970年1月1日零点的毫秒值差
*/
var date = new Date();
document.write(date+"<br>");
document.write(date.toLocaleString()+"<br>")
document.write(date.getTime()+"<br>")
</script>
Math
<script>
/*
Math:数学
1.创建
特点:Math对象不用创建,直接使用 Math.方法名
2.方法
random():返回0-1随机数 含0不包含1
ceil(x):对象进行上舍入
floor(x):对象进行下舍入
round(x):把数四舍五入
3.属性
PI
*/
document.write(Math.PI+"<br>")
document.write(Math.random(100)+"<br>")
document.write(Math.round(3.14)+"<br>")
document.write(Math.cell(3.14)+"<br>")
document.write(Math.floor(3.14)+"<br>")
/*
取1-100之间整数
1.Math.random()产生随机数,范围(0,1]小数
2.乘以100-->[0,99.9999)小数
3.舍弃小数部分,floor -->[0,99]整数
4.+1 ——>(0,99]整数[1,100]
*/
var number = Math.floor((Math.round()*100))+1
document.write(number)
</script>
String
RegExp
1.正则表达式:字符串组成规则
1.定义单个字符:[]
如:[a] [ab] [a-zA-Z0-9_]
*特殊符号代表特殊含义的单个单词
\d单个数字字符[0-9]
\w单个单词字符[a-zA-Z0-9_]
2.量词符号:
?表示出现0次或1次
*表示出现0次或多次
+出现1次或多次
{m,n}表示m<=数量<=n
*m如果缺省:{,n}最多n次
*n如果缺省:{m,}最少m次
3.开始结束符号
*^:开始
*$:结束
2.正则对象
<script>
/*
1.创建
1.var reg = new RegExp("\w(6-12)");(注意:注意用第一种注意转义)
2.var reg2 = /w(6,12)/;
2.方法
1.test(参数):验证指定字符串是否符号规范
*/
var reg = new RegExp("\w(6-12)");
var reg2 = /w(6,12)/;
// alert(reg)
// alert(reg2);
var username = "zhangsan";
var flag = reg2.test(username)
alert(flag)
</script>
Global
1.特点:全局对象,这个Global中封装的方法不需要对象就可以创建就可以直接调用。方法名();
2.方法
1.特点:全局对象,这个Global中封装的方法不需要对象就可以创建就可以直接调用。方法名();
2.方法
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码
decodeURIComponent():url解码
3.URL编码
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2(浏览器地址值数据)
4.parseInt():将字符串转数字为止,将前边数字部分转为number
*逐一判断每一个字符是否是数字,直到不是数字
5.isNam():判断一个值是不是NaN
*NaN六亲不认,连自己都不认,NaN参与的比较
6.eval():将javaScript字符串,把它作为脚本代码来执行
<script>
var str = "http://www.baidu.com?wd=传智播客";
var encode = encodeURI(str);
document.write(encode+"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var a = decodeURI(encode+"<br>");
document.write(a+"<br>")//传智播客
var str1 = "http://www.baidu.com?wd=传智播客";
var encode = encodeURIComponent(str1);
document.write(encode+"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var a1 = decodeURIComponent(encode+"<br>");
document.write(a1+"<br>")//传智播客
var str = "123abc";
var number = parseInt(str);
alert(number+1)
var a = "NaN";
document.write(a==NaN);
document.write(isNaN(a))
var jscode = "alert(123)";
eval(jscode);
</script>