Web前端开发JavaScript基础
JavaScript 代码引入 JS通常有两种引入方式,理论上引入命令在body和head中都可以,但是推荐放在body代码块底部,因为Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已,规范化我们就直接将JS代码统统放在body的最底部.引入方式(1): 第一种引入方式就是在body标签的区域内直接使用<script></script>方式来引用代码.
<body>
<script type="text/javascript">
alert("hello lyshark")
</script>
</body>
引入方式(2): 这是第二种引入方式,也就是在需要使用的地方直接引入一个外部js文件,通常写在<head>标签里.
<head>
<meta charset="UTF-8">
<script src="test.js" type="text/javascript"></script>
<script src="/js/test.js" type="text/javascript"></script>
<script src="//cnd.mkdirs.com/test.js" type="text/javascript"></script>
</head>
## JavaScript 定义变量 变量是程序设计语言里最重要、最基本的概念,与强类型语言不同的是 JavaScript 是弱类型语言,同一个变量可以一会存储数值,一会存储字符串,变量声明有两种方式,即显式声明和隐式声明,根据变量定义的范围不同,变量有全局变量和局部变量之分,直接定义的变量是全局变量,全局变量可以被所有的脚本访问,在函数里定义的变量称为局部变量,局部变量只在函数内有效.如果全局变量和局部变量使用相同的变量名,则局部变量将覆盖全局变量.
定义局部变量: 如下函数内局部变量必须以var开头,如果在函数内未使用var,系统默认也是定义局部变量.
<body>
<script type="text/javascript">
function func() {
names = "lyshark"; //函数内部默认转成局部变量
var age = 21; //定义局部变量标准写法
gender = "Man"; //默认局部变量
alert("姓名:" + names);
alert("年龄:" + age);
alert("性别:" + gender);
}
func() //调用函数,不掉用则不执行
</script>
</body>
定义全局变量: 如果我们想要定义全局变量,只需要在函数体外部定义,解释器默认将外部变量当成全局变量.
<body>
<script type="text/javascript">
var func_names = "lyshark" //定义全局变量
func_novar = "hello" //定义全局变量
function func() {
alert("打印全局变量:" + func_names)
alert("打印全局变量:" + func_novar)
}
func() //调用函数,不掉用则不执行
</script>
</body>
## JavaScript 数据类型 JavaScript 是弱类型脚本语言,声明变量时无需指定变量的数据类型, JavaScript 变量的数据类型是解释时动态决定的,但 JavaScript 的值保存在了内容中,也是有数据类型的 JavaScript 的基本数据类型有以下5种:
● 数值类型: 数值类型包含整数和浮点数
● 布尔类型: 布尔类型包括True和False
● 数组类型: 数组是一系列数据的集合
● 字符串类型: 字符串类型必须以双引号引起来
● undefined: 用来确定一个已经创建但没有初始值的变量
● null: 用于表明某个变量的值为空
◆数值类型◆ 与强类型语言,如C,JAVA,C++不同 JavaScript 的数值类型不仅包括所有的整型变量,也包括所有的浮点型变量, JavaScript 语言中的数值都以 IEEE754一1985 双精度浮点数格式保存. JavaScript 中的数值形式非常丰富,完全支持用科学计数法表示.
整数变量: 使用显式方式声明三个变量,num1=1024,num2=5E2,num3=1.23e-3.
<body>
<script type="text/javascript">
var num1 = 1024;
var num2 = 0x1A;
var num3 = 10;
var num4 = 20;
document.write("两个数相加:" + (num3 + num4 ))
</script>
</body>
浮点数变量: 分别声明四个浮点数变量,其中表示方式可以有以下四种形式.
<body>
<script type="text/javascript">
var num1 = 3.5659;
var num2 = -8.1E12;
var num3 = .1e12;
var num4 = 32E-12;
document.write("输出一个浮点数:" + num2)
</script>
</body>
特殊的数值: 除了上面的数值表示类型外,JS默认定义了一些常量用来表示更多的类型值.
<body>
<script type="text/javascript">
document.write("表示无穷大的特殊值:" + Infinity)
document.write("特殊的非数字值:" + NaN)
document.write("表示最大值:" + Number.MAX_VALUE)
document.write("表示最小值:" + Number.MIN_VALUE)
document.write("特殊的非数字值:" + Number.NaN)
document.write("表示正无穷大的特殊值:" + Number.POSITIVE_INFINITY)
document.write("表示负无穷大的特殊值:" + Number.NEGATIVE_INFINITY)
</script>
</body>
数字转换: parseInt(..)方法,可以实现将一个字符串转换成整数,如果不成功则返回NaN.
<body>
<script type="text/javascript">
str = "1024";
console.log(typeof str) //输出字符串格式
num = parseInt(str) //将字符串转成数值,赋值给num
console.log(num) //打印这个数值
</script>
</body>
转浮点数转换: parseFloat(..)方法,可以实现将一个字符串转换成浮点数,如果不成功则返回NaN.
<body>
<script type="text/javascript">
str = "1024";
console.log(typeof str) //输出字符串格式
num = parseFloat(str) //将字符串转成浮点数,赋值给num
console.log(num) //打印这个数值
</script>
</body>
常用数值函数: 这里举三个例子,分别代表判断有限值,保留小数点,和保留小数点后几位.
<body>
<script type="text/javascript">
var num1 = 1024;
var num2 = 3.16159;
var num3 = 100;
document.write("判断是否为有限值: " + isFinite(num1) + "<br>")
document.write("指定要保留的小数点位数: " + num2.toFixed(2) + "<br>")
document.write("保留小数点后2位: " + num3.toFixed(2))
</script>
</body>
◆字符串型◆ 字符串是 JavaScript 中最常用的数据类型,几乎每个程序都会用到字符串,字符串是由字符组成的数组,但在 JavaScript 中字符串是不可变的,可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法,JS中有丰富的对字符串的操作函数,常用的包括连接,查找替换,大小写转换等操作,如下是常用的操作格式:
obj.length 获取字符串长度
obj.toString() 将数组转换成字串
obj.trim() 移除字符串中空白
obj.trimLeft() 移除字符串中左边空白
obj.trimRight() 移除字符串中右边空白
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 两个或者多个字符串拼接
obj.indexOf(substring,start) 返回指定字符串在字符串中首次出现的位置
obj.lastIndexOf(substring,start) 返回该元素在字符串中最后一次出现的位置
obj.substring(from,to) 提取字符串中介于两个指定下标之间的字符
obj.slice(start,end) 从已有字符串数组中返回选定的元素,切片
obj.split(delimiter,limit) 用于把一个字符串分割成字符串数组,分割
obj.toLowerCase() 将小写字符串转换成大写
obj.toUpperCase() 将大写字符串转换成小写
obj.search(regexp) 从头开始匹配,返回匹配成功的第一个字符串位置,g无效
obj.match(regexp) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个
obj.replace(regexp,replacement) 正则替换,正则中有g则替换所有,否则只替换第一个匹配项
$数字：匹配的第n个组内容
[ DISCUZ_CODE_10 ]：当前匹配的内容
JavaScript 代码引入 JS通常有两种引入方式,理论上引入命令在body和head中都可以,但是推荐放在body代码块底部,因为Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已,规范化我们就直接将JS代码统统放在body的最底部.
引入方式(1): 第一种引入方式就是在body标签的区域内直接使用<script></script>方式来引用代码.
<body>
<script type="text/javascript">
alert("hello lyshark")
</script>
</body>
引入方式(2): 这是第二种引入方式,也就是在需要使用的地方直接引入一个外部js文件,通常写在<head>标签里.
<head>
<meta charset="UTF-8">
<script src="test.js" type="text/javascript"></script>
<script src="/js/test.js" type="text/javascript"></script>
<script src="//cnd.mkdirs.com/test.js" type="text/javascript"></script>
</head>
## JavaScript 定义变量 变量是程序设计语言里最重要、最基本的概念,与强类型语言不同的是 JavaScript 是弱类型语言,同一个变量可以一会存储数值,一会存储字符串,变量声明有两种方式,即显式声明和隐式声明,根据变量定义的范围不同,变量有全局变量和局部变量之分,直接定义的变量是全局变量,全局变量可以被所有的脚本访问,在函数里定义的变量称为局部变量,局部变量只在函数内有效.如果全局变量和局部变量使用相同的变量名,则局部变量将覆盖全局变量.
定义局部变量: 如下函数内局部变量必须以var开头,如果在函数内未使用var,系统默认也是定义局部变量.
<body>
<script type="text/javascript">
function func() {
names = "lyshark"; //函数内部默认转成局部变量
var age = 21; //定义局部变量标准写法
gender = "Man"; //默认局部变量
alert("姓名:" + names);
alert("年龄:" + age);
alert("性别:" + gender);
}
func() //调用函数,不掉用则不执行
</script>
</body>
定义全局变量: 如果我们想要定义全局变量,只需要在函数体外部定义,解释器默认将外部变量当成全局变量.
<body>
<script type="text/javascript">
var func_names = "lyshark" //定义全局变量
func_novar = "hello" //定义全局变量
function func() {
alert("打印全局变量:" + func_names)
alert("打印全局变量:" + func_novar)
}
func() //调用函数,不掉用则不执行
</script>
</body>
## JavaScript 数据类型 JavaScript 是弱类型脚本语言,声明变量时无需指定变量的数据类型, JavaScript 变量的数据类型是解释时动态决定的,但 JavaScript 的值保存在了内容中,也是有数据类型的 JavaScript 的基本数据类型有以下5种:
● 数值类型: 数值类型包含整数和浮点数
● 布尔类型: 布尔类型包括True和False
● 数组类型: 数组是一系列数据的集合
● 字符串类型: 字符串类型必须以双引号引起来
● undefined: 用来确定一个已经创建但没有初始值的变量
● null: 用于表明某个变量的值为空
◆数值类型◆ 与强类型语言,如C,JAVA,C++不同 JavaScript 的数值类型不仅包括所有的整型变量,也包括所有的浮点型变量, JavaScript 语言中的数值都以 IEEE754一1985 双精度浮点数格式保存. JavaScript 中的数值形式非常丰富,完全支持用科学计数法表示.
整数变量: 使用显式方式声明三个变量,num1=1024,num2=5E2,num3=1.23e-3.
<body>
<script type="text/javascript">
var num1 = 1024;
var num2 = 0x1A;
var num3 = 10;
var num4 = 20;
document.write("两个数相加:" + (num3 + num4 ))
</script>
</body>
浮点数变量: 分别声明四个浮点数变量,其中表示方式可以有以下四种形式.
<body>
<script type="text/javascript">
var num1 = 3.5659;
var num2 = -8.1E12;
var num3 = .1e12;
var num4 = 32E-12;
document.write("输出一个浮点数:" + num2)
</script>
</body>
特殊的数值: 除了上面的数值表示类型外,JS默认定义了一些常量用来表示更多的类型值.
<body>
<script type="text/javascript">
document.write("表示无穷大的特殊值:" + Infinity)
document.write("特殊的非数字值:" + NaN)
document.write("表示最大值:" + Number.MAX_VALUE)
document.write("表示最小值:" + Number.MIN_VALUE)
document.write("特殊的非数字值:" + Number.NaN)
document.write("表示正无穷大的特殊值:" + Number.POSITIVE_INFINITY)
document.write("表示负无穷大的特殊值:" + Number.NEGATIVE_INFINITY)
</script>
</body>
数字转换: parseInt(..)方法,可以实现将一个字符串转换成整数,如果不成功则返回NaN.
<body>
<script type="text/javascript">
str = "1024";
console.log(typeof str) //输出字符串格式
num = parseInt(str) //将字符串转成数值,赋值给num
console.log(num) //打印这个数值
</script>
</body>
转浮点数转换: parseFloat(..)方法,可以实现将一个字符串转换成浮点数,如果不成功则返回NaN.
<body>
<script type="text/javascript">
str = "1024";
console.log(typeof str) //输出字符串格式
num = parseFloat(str) //将字符串转成浮点数,赋值给num
console.log(num) //打印这个数值
</script>
</body>
常用数值函数: 这里举三个例子,分别代表判断有限值,保留小数点,和保留小数点后几位.
<body>
<script type="text/javascript">
var num1 = 1024;
var num2 = 3.16159;
var num3 = 100;
document.write("判断是否为有限值: " + isFinite(num1) + "<br>")
document.write("指定要保留的小数点位数: " + num2.toFixed(2) + "<br>")
document.write("保留小数点后2位: " + num3.toFixed(2))
</script>
</body>
◆字符串型◆ 字符串是 JavaScript 中最常用的数据类型,几乎每个程序都会用到字符串,字符串是由字符组成的数组,但在 JavaScript 中字符串是不可变的,可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法,JS中有丰富的对字符串的操作函数,常用的包括连接,查找替换,大小写转换等操作,如下是常用的操作格式:
：位于匹配子串左侧的文本
统计字串长度: 使用length方法获取字符串的长度,并返回,可以直接返回,也可以赋值给变量.
<body>
<script type="text/javascript">
var string = " hello lyshark 欢迎来到中国!";
var num = string.length;
document.write("统计字符串长度: " + string.length + "<br>")
document.write("另一种统计长度的方法: " + num)
</script>
</body>
移除字串空格: 通过使用trim()移除字符串两边空格,trimLeft(),trimRight()可以分别移除左边和右边空格.
<body>
<script type="text/javascript">
var obj = " lyshark ";
document.write("统计字符串大小: " + obj.length + "<br>")
document.write("去除两边的空格: " + obj.trim() + "<br>")
document.write("统计字符串大小: " + obj.length + "<br>")
</script>
</body>
字符串拼接: 使用concat(,)将两个或者多个字符串拼接在一起形成一个新的字符串.
<body>
<script type="text/javascript">
var string1 = "hello ";
var string2 = "lyshark";
var string3 = "welcome";
document.write("拼接一个字串: " + string1.concat(string2) + "<br>")
document.write("拼接多个字串: " + string1.concat(string2,string3) + "<br>")
</script>
</body>
字符串提取: 使用indexOf定位首次出现的位置,lastIndexOf定位最后出现的位置,substring实现提取任意字符串.
<body>
<script type="text/javascript">
var str = "Hello World!";
document.write("Hello 首次出现的位置: " + str.indexOf("Hello") +"<br/>")
document.write("World 首次出现的位置: " + str.indexOf("World") +"<br/>")
document.write("如果没有出现过默认-1: " + str.indexOf("world"))
</script>
</body>
<body>
<script type="text/javascript">
var str = "Hello World! Hello lyshark!";
document.write("Hello 最后出现的位置: " + str.lastIndexOf("Hello") +"<br/>")
document.write("World 最后出现的位置: " + str.lastIndexOf("World") +"<br/>")
document.write("如果没有出现过默认-1: " + str.lastIndexOf("world"))
</script>
</body>
<body>
<script type="text/javascript">
var str = "Hello World!";
document.write("从0偏移取数据,向后取5个: " + str.substring(0,5) +"<br>")
document.write("从0偏移取数据,向后取11个: " + str.substring(0,11) + "<br>")
document.write("从3偏移取数据,向后取7个: " + str.substring(3,7))
</script>
</body>
切片与分割: 通过使用slice()方法切割数组,split()方法用来切割字符串转换成数组.
<body>
<script type="text/javascript">
var array = new Array(5)
array = "LyShark";
array = "Admin";
array = "John";
array = "Adrew";
document.write("返回整个数组: " + array +"<br>")
document.write("返回-元素: " + array.slice(1,3) +"<br>")
</script>
</body>
<body>
<script type="text/javascript">
var str = "hello world my names lyshark !";
var test = "a:b:c:d:e:f:g:h"
document.write("以空格作为分隔符分割字串: " + str.split(" ") +"<br>")
document.write("将每个字母单独变成一个数组: " + str.split("") +"<br>")
document.write("以空格分隔,只分割前三个单词: " + str.split(" ",3) +"<br>")
document.write("以冒号作为分隔符,分割元素: " + test.split(":"))
</script>
</body>
字符串查找: 查找字符串并返回所在位置,search() 和 match()方法作用基本一致,查找时支持正则匹配.
<body>
<script type="text/javascript">
var string = "hello world my names lyshark my world !";
document.write("精确查找字符串: " + string.search("lyshark") +"<br>")
document.write("精确检索字符串: " + string.search(/my/) +"<br>")
document.write("忽略大小写检索: " + string.search(/world/i) +"<br>")
</script>
</body>
<body>
<script type="text/javascript">
var string = "hello world my names lyshark my world123 456 !";
document.write("精确查找字符串: " + string.match("lyshark") +"<br>")
document.write("全局匹配\d数字: " + string.match(/\d+/g) +"<br>")
</script>
</body>
字符串替换: 查找并替换字符串,可以使用replace()方法,该方法也支持正则表达式.
<body>
<script type="text/javascript">
var string = "hello world welcome to mkdirs.com hello lyshark HELLO mkdirs!";
document.write("查找welcome替换成xxxx: " + string.replace(/welcome/,"xxxx") +"<br>")
document.write("全局查找替换hello并替换: " + string.replace(/hello/g,"oooo") +"<br>")
document.write("匹配替换并区分大小写: " + string.replace(/HELLO/,"gggg") +"<br>")
</script>
</body>
◆数组类型◆ 任何编程语言中都存在数组,数组是一系列变量的集合,与其他强类型语言不同的是 JavaScript 中的数组元素的类型可以不相同,这也是动态语言的好处 JavaScript 语言本身只支持一维数组,但是也可以将两个一维数组合起来变成一个二维数组使用,首先看一下常用的数组操作方法:
obj.length 获取数组的大小
obj.push(ele) 给数组尾部追加元素
obj.pop() 从尾部获取一个元素
obj.unshift(ele) 在数组头部插入元素
obj.shift(ele) 在数组头部移除元素
obj.slice() 数组元素的切片
obj.concat(val,..) 多个数组相连接
obj.join(sep) 将数组连接起来变成字符串
obj.sort() 对数组元素进行排序
obj.reverse() 反转数组中的元素
obj.splice(n,0,val) 在数组指定位置插入元素
obj.splice(n,1,val) 在数组指定位置替换元素
obj.splice(n,1) 在数组指定位置删除元素
定义一维数组: 以下案例定义了3个数组,并且分别给数组赋值,然后打印结果.
<body>
<script type="text/javascript">
var array = ; //创建数组,并有5个元素
var array1 = []; //创建空数组
var array2 = new Array() //同样创建空数组
array1 = "hello";
array1 = "world";
array2 = null;
document.write("数组array大小: " + array.length + "<br>")
document.write("数组array1大小: " + array1.length + "<br>")
document.write("数组array2大小: " + array2.length)
</script>
</body>
定义二维数组: 以下案例定义了3个数组,并且分别给数组赋值,然后通过循环语句打印数组值.
<body>
<script type="text/javascript">
var value = [,,]; //创建二维数组
document.write("数组value大小: " + value.length + "<br>") //打印数组大小
document.write("数组value大小: " + value.length + "<br>") //打印数组大小
for(var i=0;i<3;i++) //循环输出数组元素
{
for(j in value) //输出每个数组元素的值
{
document.write(" " + value);
}
document.write("<br>")
}
</script>
</body>
插入修改与删除: 通过使用splice()方法,实现对元素的插入,增加,修改,删除.
<body>
<script type="text/javascript">
var array = new Array(5)
array = "admin";
array = "guest";
array = "lyshark";
array = "wall";
document.write("当前列表: " + array + "<br>")
array.splice(2,1,"替换成我") //把第2个元素提换,替换1次
document.write("替换列表: " + array + "<br>")
array.splice(5,1,"插入元素") //在第5个位置上插入新元素
document.write("插入列表: " + array + "<br>")
array.splice(1,3,"删除元素") //删除第2个位置以后2个元素
document.write("删除列表: " + array + "<br>")
</script>
</body>
PUSH/POP操作元素: 通过该命令可实现在数组结尾追加新元素,也可从结尾删除元素.
<body>
<script type="text/javascript">
var list = ;
document.write("数组元素: " + list + "总大小:" + list.length + "<br>")
list.push(6)
list.push(7) //在结尾添加新元素
document.write("数组元素: " + list + "总大小:" + list.length + "<br>")
list.pop()
list.pop() //在结尾删除元素
document.write("数组元素: " + list + "总大小:" + list.length + "<br>")
</script>
</body>
Shift/Unshift: 该命令可以实现在数组元素的头部添加元素,或者是删除头部的元素.
<body>
<script type="text/javascript">
var list = ;
document.write("数组元素: " + list + "总大小:" + list.length + "<br>")
list.unshift(3)
list.unshift(2)
list.unshift(1) //在开头添加元素
document.write("数组元素: " + list + "总大小:" + list.length + "<br>")
list.shift()
list.shift() //从开头删除一个元素
document.write("数组元素: " + list + "总大小:" + list.length + "<br>")
</script>
</body>
切片与连接: 使用slice()方法实现数组的切片,concat()实现数组连接,join()数组转成字符串.
< ----------------------------[数组切片]---------------------------- >
<body>
<script type="text/javascript">
var array = new Array()
array = "admin";
array = "lyshark";
array = "Thomas";
array = "John";
array = "George";
document.write("数组切片(从1号索引开始显示元素): " + array.slice(1) + "<br>")
document.write("数组切片(从3号索引开始显示元素): " + array.slice(3) + "<br>")
document.write("数组切片(只显示1-2号元素切片): " + array.slice(1,3) + "<br>")
</script>
</body>
< ----------------------------[数组连接]---------------------------- >
<body>
<script type="text/javascript">
var array = new Array();
var a = ;
var b = ;
document.write("将数组连接: " + array.concat(a,b) + "<br>")
document.write("直接连接并打印: " + a.concat(b) + "<br>")
</script>
</body>
< ----------------------------[数组转换]---------------------------- >
<body>
<script type="text/javascript">
var array = new Array(3);
array = "admin";
array = "guest";
array = "lyshark";
document.write("直接连接成字符串: " + array.join() + "<br>")
document.write("连接成字符串并添加一个分隔符: " + array.join("*") + "<br>")
</script>
</body>
数组元素排序: 使用sort()方法实现数组的正向排列,reverse()则实现数组的反向排列.
<body>
<script type="text/javascript">
var array =
document.write("未排序前: " + array + "<br>")
document.write("正向排序: " + array.sort() + "<br>")
document.write("反向排序: " + array.reverse() + "<br>")
</script>
</body>
◆布尔类型◆ 在前面的案例中我们看了数值类型和字符串类型,该类型数据都有无穷大的数值,但是布尔行数据类型只有两个取值,通常情况下布尔类型直接表示方式有两个,True/False这两个表示方式,分别代表真和假,它主要用于描述一种状态或者标志,通常用来比较所得到的结果.
相等于不相等: 使用==双等于号判断两数字是否相等,使用!=不等于号判断两数字是否不相等.
<body>
<script type="text/javascript">
num1 = 1;
num2 = 0;
if(num1 == num2){
document.write("两数相等...")
}else if(num1 != num2){
document.write("两数不相等...")
}
</script>
</body>
与运算与或运算: 使用||或运算符实现或运算,使用&&与运算符实现与运算.
<body>
<script type="text/javascript">
num1 = "true";
num2 = "false";
num3 = "ok";
if(num1 == num2 || num2 == num2){
document.write("或运算的比较结果...")
}
if(num1 == num1 && num2 == num2){
document.write("与运算的比较结果...")
}
</script>
</body>
◆类型转换◆ JS是一种松散类型的程序设计语言,并没有严格地规定变最的数据类型,己经定义数据类型的变量可以在表达式中自动转换数据类型,或通过相应的方法来转换数据类型,自动类型转换有一定的规则,如果按照 JS的类型转换规则,没有转换或者转换的类型不对,就需要通过相应的方法来进行转换.
基本类型转换: 基本类型转换String:将字数字转成字符串,Number:将其他类型转为整数,Boolean:其他类型转成布尔类型.
<body>
<script type="text/javascript">
document.write("其他类型转换为字符串: " + String(1024) + "<br>");
document.write("其他类型转换为数值:" + Number("hello") + "<br>");
document.write("其他类型转换为布尔:" + Boolean(1) + "<br>");
</script>
</body>
字符串转成整数: 字符串之间的数据转换,与进制转换实例.
<body>
<script type="text/javascript">
document.write("将a转换成整数: " + parseInt("a") + "<br>");
document.write("将a转换成8进制,整数: " + parseInt("a",8) + "<br>");
document.write("将a转换成2进制,整数: " + parseInt("a",2) + "<br>");
document.write("将a转换成浮点数: " + parseFloat("a") + "<br>");
</script>
</body>
eval()计算: EVAL用于计算字符串表达式或语句的值.
<body>
<script type="text/javascript">
var num = 10;
var str = "1024";
document.write("eval连接字符串: " + eval(str+num) + "<br>");
</script>
</body>
## JavaScript 流程控制 所谓流程就是程序代码所执行的顺序,在任何一种语言中,程序控制流程是必须的,他能够是整个程序减少混乱,使之顺利的按照一定得方式执行工作,在 JavaScript 中常用的程序流程有三种,顺序结构,选择结构,和循环结构,下面将依次演示他们的使用技巧.
if-else: 判断if(num1>num2)如果条件满足则执行,否则判断if(num2>num3),满足执行否则执行else里面的代码.
<body>
<script type="text/javascript">
var num1 = 100;
var num2 = 200;
var num3 = 10;
if(num1 > num2){
var temp = num1 - num2;
document.write("num1 大于 num2" + " 比num2多出:" + temp)
}else if(num2 > num3){
var temp = num2 - num3
document.write("num2 大于 num3" + " 比num2多出:" + temp)
}else{
document.write("没有合适的结果..")
}
</script>
</body>
switch: switch通常用于选择结构,以下代码用户输入一个数值,进入选择结构根据输入数值执行相应代码片段.
<body>
<script type="text/javascript">
var temp;
temp = prompt("请选择输入(1,2,*):","");
switch(temp){
case "1":
document.write("你选择了1号");
break;
case "2":
document.write("你选择了2号");
break;
default:
document.write("你选择了其他选项");
break;
}
</script>
</body>
while: 循环执行结构,while会一直循环下去,直到满足(num <=100)的条件则跳出循环,语句语法结构如下.
<body>
<script type="text/javascript">
var num = 0;
var sum = 0;
while(num <=100){
sum = sum +num;
num = num +1;
document.write("当前循环:"+ num + "当前累加: " + sum);
document.write("<br>")
}
document.write("从1+100...结果是:" + sum)
</script>
</body>
for: 以下案例,通过for循环遍历names列表,每次循环i++递增,直到满足(i<names.length)则退出循环.
<body>
<script type="text/javascript">
var names = ["admin","guest","lyshark","alex"]
for(var i=0;i<names.length;i++){
document.write("当前位置: "+ i +"元素值: " + names)
document.write("<br>")
}
</script>
</body>
for in: 这是一种类似python的语法格式,使用效果和python中的循环语句并无差异.
<body>
<script type="text/javascript">
var names = ["admin","guest","lyshark","alex"]
for(var index in names){
document.write("当前位置: "+ index +"元素值: " + names)
document.write("<br>")
}
</script>
</body>
try..catch: 异常处理,当try里面代码出现问题的时候自动执行catch抛出异常,最后无论是否异常都会执行finally.
<body>
<script type="text/javascript">
try {
// 这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch(e){
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行
// e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally{
// 无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行
}
</script>
</body>
## JavaScript 关于函数 函数为编程者提供了在整个程序中重复使用一个单元结构的能力,在这个单元中封装了完成指定任务或者功能的程序代码,为了使用函数,需要知道如何定义函数,如何将变量传递给函数,以及如何返问函数计算出的结果,另外 JavaScript 以其灵活性的特点,我们可以将一些开发环境中常用到的模块进行封装,然后再使用时直接调用即可,节约了开发周期.
◆函数的定义◆ JavaScript 中函数基本上可以分为三类,普通函数,匿名函数,自执行函数,此外需要注意的是对于 JavaScript中 函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数.
普通无参函数: 以下代码,通过使用关键字function声明了func()无参数的函数.
<body>
<script type="text/javascript">
function func(){
document.write("这个无参数函数被执行了..." + "<br>");
return "ok";
}
var ret = func() //调用函数,并将返回值赋值给ret变量
document.write("函数的返回值是: " + ret);
</script>
</body>
普通有参函数: 以下代码,通过使用关键字function声明了func()有参数的函数,其中形式参数有name,age,sex.
<body>
<script type="text/javascript">
function func(name,age,sex){
document.write("姓名: " + name + "年龄:" + age + "性别: " + sex + "<br>");
return 0;
}
var ret = func("lyshark","22","Man") //调用函数
document.write("函数的返回值是: " + ret);
</script>
</body>
传递数组地址: 我们不仅仅可以传递单个的参数,还可以将一个预定义好的数组传递到函数体内部.
<body>
<script type="text/javascript">
function show(temp)
{
for(i in temp)
document.write(temp + "");
document.write("<br>");
}
var array = new Array(1,2,3,4,5,6,7,8,9,10);
show(array)//传递一个数组到函数体,并执行
</script>
</body>
定义匿名函数: 匿名函数,就是没有名字的函数,需要我们手动进行调用,一般情况不会使用.
<body>
<script type="text/javascript">
var func = function(x,y){
document.write("参数1= " + x + "参数2= " + y);
}
func(10,20) //调用匿名函数
</script>
</body>
自执行函数: 自执行函数,也就是说无论我们是否调用它,它都会被执行,适合做初始化工作.
<body>
<script type="text/javascript">
(function(name,url){
document.write("姓名: " + name + "URL: " + url);
})("lyshark","mkdirs.com")
</script>
</body>
arguments: 使用特殊对象arguments,开发者无需明确指出参数名,就能访问数据的内部元素.
<body>
<script type="text/javascript">
function func() {
document.write("当前参数长度: " + arguments.length + "<br>");
}
func(1,2,3,4,5);
</script>
</body>
◆嵌套与递归◆ 函数嵌套与递归式很多编程语言的通用属性,同样的 JavaScript 虽然是脚本语言,但是也支持嵌套和递归函数的实现,函数嵌套是语言特性,递归调用是逻辑思想,这两者有关但并不互斥,一个递归过程可以包含函数嵌套,同样一个递归函数也可当做是自身嵌套函数,一般情况下不会使用这些特性.
函数的嵌套: 函数的嵌套是指在函数体的内部再次嵌套一层函数体,并依次返回执行结果,就是嵌套函数.
<body>
<script type="text/javascript">
function ext_func(){
function func(){
document.write("内部函数执行结果...." + "<br>")
return 1024;
}
ret = func()
return ret
}
ret = ext_func()
document.write("内部函数返回值: " + ret)
</script>
</body>
函数的递归: 函数的递归是指函数不停地调用自身,直到满足一定得条件才会自动的跳出循环体.
<body>
<script type="text/javascript">
function func(temp){
if(temp == 1){
return 1;
}else{
return func(temp-1)+2;
}
}
ret = func(5)
document.write("内部函数返回值: " + ret)
</script>
</body>
函数的闭包: 通常情况下,我们想调用一个函数内部的嵌套方法,我们可以使用闭包的形式来实现.
<body>
<script type="text/javascript">
function func1(){
var array = ;
function func2() {
return array;
}
return func2;
}
temp = func1() //调用语句返回函数func2对象
document.write("函数返回对象: " + temp + "<br>");
ret = temp() //调用这个对象,最终得到结果
document.write("最终返回值: " + ret);
</script>
</body>
◆常用内置函数◆ 除了可以在 JavaScript 中自己定义函数以外 JavaScript 自身也提供了一些内部函数,也称为内部方法,程序可以直接调用这些函数来完成某些功能,下面是 JavaScript 中的一些内部函数的介绍.
encodeURI: 返回一个对URI字符串编码后的结果,URI表示的范围比URL要大.
<body>
<script type="text/javascript">
var urlstr = encodeURI("http://www.mkdirs.com/index.html country=中国")
document.write("URI中的转义字符: " + urlstr + "<br>")
var urlstr = encodeURIComponent("http://www.mkdirs.com/index.html country=中国")
document.write("转义URI组件中的字符: " + urlstr)
</script>
</body>
decodeURI: 对一个编码后的URI字符串进行解释,翻译成一个正常格式.
<body>
<script type="text/javascript">
var urlstr = decodeURI("http://www.mkdirs.com/index.html%20country=%E4%B8%AD%E5%9B%BD")
document.write("URI翻译: " + urlstr + "<br>")
var urlstr = decodeURIComponent("%2Findex.html%20country%3D%E4%B8%AD%E5%9B%BD")
document.write("URI组件翻译: " + urlstr)
</script>
</body>
字符串转换: 使用escape()方法对字符串进行转义处理,unescape()则负责将代码解码.
<body>
<script type="text/javascript">
var encode = escape("中国")
document.write("字符串转换: " + encode + "<br>")
var decode = unescape("%u4E2D%u56FD")
document.write("字符串解码: " + decode)
</script>
</body>
JSON序列化: 使用JSON方法将数组序列化存储,方便数据传输.
<body>
<script type="text/javascript">
array =
ret = JSON.stringify(array) //序列化,将其他类型转换成字符串
document.write("序列化后的类型: " + typeof(ret) + "<br>")
document.write("反序列化,加载结果: " + JSON.parse(ret))
</script>
</body>
：位于匹配子串右侧的文本
$：直接量$符号
统计字串长度: 使用length方法获取字符串的长度,并返回,可以直接返回,也可以赋值给变量.
[ DISCUZ_CODE_11 ] 移除字串空格: 通过使用trim()移除字符串两边空格,trimLeft(),trimRight()可以分别移除左边和右边空格.
[ DISCUZ_CODE_12 ] 字符串拼接: 使用concat(,)将两个或者多个字符串拼接在一起形成一个新的字符串.
[ DISCUZ_CODE_13 ] 字符串提取: 使用indexOf定位首次出现的位置,lastIndexOf定位最后出现的位置,substring实现提取任意字符串.
[ DISCUZ_CODE_14 ] 切片与分割: 通过使用slice()方法切割数组,split()方法用来切割字符串转换成数组.
[ DISCUZ_CODE_15 ] 字符串查找: 查找字符串并返回所在位置,search() 和 match()方法作用基本一致,查找时支持正则匹配.
[ DISCUZ_CODE_16 ] 字符串替换: 查找并替换字符串,可以使用replace()方法,该方法也支持正则表达式.
[ DISCUZ_CODE_17 ]◆数组类型◆ 任何编程语言中都存在数组,数组是一系列变量的集合,与其他强类型语言不同的是 JavaScript 中的数组元素的类型可以不相同,这也是动态语言的好处 JavaScript 语言本身只支持一维数组,但是也可以将两个一维数组合起来变成一个二维数组使用,首先看一下常用的数组操作方法:
[ DISCUZ_CODE_18 ] 定义一维数组: 以下案例定义了3个数组,并且分别给数组赋值,然后打印结果.
[ DISCUZ_CODE_19 ] 定义二维数组: 以下案例定义了3个数组,并且分别给数组赋值,然后通过循环语句打印数组值.
[ DISCUZ_CODE_20 ] 插入修改与删除: 通过使用splice()方法,实现对元素的插入,增加,修改,删除.
[ DISCUZ_CODE_21 ] PUSH/POP操作元素: 通过该命令可实现在数组结尾追加新元素,也可从结尾删除元素.
[ DISCUZ_CODE_22 ] Shift/Unshift: 该命令可以实现在数组元素的头部添加元素,或者是删除头部的元素.
[ DISCUZ_CODE_23 ] 切片与连接: 使用slice()方法实现数组的切片,concat()实现数组连接,join()数组转成字符串.
[ DISCUZ_CODE_24 ] 数组元素排序: 使用sort()方法实现数组的正向排列,reverse()则实现数组的反向排列.
[ DISCUZ_CODE_25 ]◆布尔类型◆ 在前面的案例中我们看了数值类型和字符串类型,该类型数据都有无穷大的数值,但是布尔行数据类型只有两个取值,通常情况下布尔类型直接表示方式有两个,True/False这两个表示方式,分别代表真和假,它主要用于描述一种状态或者标志,通常用来比较所得到的结果.
相等于不相等: 使用==双等于号判断两数字是否相等,使用!=不等于号判断两数字是否不相等.
[ DISCUZ_CODE_26 ] 与运算与或运算: 使用||或运算符实现或运算,使用&&与运算符实现与运算.
[ DISCUZ_CODE_27 ]◆类型转换◆ JS是一种松散类型的程序设计语言,并没有严格地规定变最的数据类型,己经定义数据类型的变量可以在表达式中自动转换数据类型,或通过相应的方法来转换数据类型,自动类型转换有一定的规则,如果按照 JS的类型转换规则,没有转换或者转换的类型不对,就需要通过相应的方法来进行转换.
基本类型转换: 基本类型转换String:将字数字转成字符串,Number:将其他类型转为整数,Boolean:其他类型转成布尔类型.
[ DISCUZ_CODE_28 ] 字符串转成整数: 字符串之间的数据转换,与进制转换实例.
[ DISCUZ_CODE_29 ] eval()计算: EVAL用于计算字符串表达式或语句的值.
[ DISCUZ_CODE_30 ]
## JavaScript 流程控制 所谓流程就是程序代码所执行的顺序,在任何一种语言中,程序控制流程是必须的,他能够是整个程序减少混乱,使之顺利的按照一定得方式执行工作,在 JavaScript 中常用的程序流程有三种,顺序结构,选择结构,和循环结构,下面将依次演示他们的使用技巧.
if-else: 判断if(num1>num2)如果条件满足则执行,否则判断if(num2>num3),满足执行否则执行else里面的代码.
[ DISCUZ_CODE_31 ] switch: switch通常用于选择结构,以下代码用户输入一个数值,进入选择结构根据输入数值执行相应代码片段.
[ DISCUZ_CODE_32 ] while: 循环执行结构,while会一直循环下去,直到满足(num <=100)的条件则跳出循环,语句语法结构如下.
[ DISCUZ_CODE_33 ] for: 以下案例,通过for循环遍历names列表,每次循环i++递增,直到满足(i<names.length)则退出循环.
[ DISCUZ_CODE_34 ] for in: 这是一种类似python的语法格式,使用效果和python中的循环语句并无差异.
[ DISCUZ_CODE_35 ] try..catch: 异常处理,当try里面代码出现问题的时候自动执行catch抛出异常,最后无论是否异常都会执行finally.
[ DISCUZ_CODE_36 ]
## JavaScript 关于函数 函数为编程者提供了在整个程序中重复使用一个单元结构的能力,在这个单元中封装了完成指定任务或者功能的程序代码,为了使用函数,需要知道如何定义函数,如何将变量传递给函数,以及如何返问函数计算出的结果,另外 JavaScript 以其灵活性的特点,我们可以将一些开发环境中常用到的模块进行封装,然后再使用时直接调用即可,节约了开发周期.
◆函数的定义◆ JavaScript 中函数基本上可以分为三类,普通函数,匿名函数,自执行函数,此外需要注意的是对于 JavaScript中 函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数.
普通无参函数: 以下代码,通过使用关键字function声明了func()无参数的函数.
[ DISCUZ_CODE_37 ] 普通有参函数: 以下代码,通过使用关键字function声明了func()有参数的函数,其中形式参数有name,age,sex.
[ DISCUZ_CODE_38 ] 传递数组地址: 我们不仅仅可以传递单个的参数,还可以将一个预定义好的数组传递到函数体内部.
[ DISCUZ_CODE_39 ] 定义匿名函数: 匿名函数,就是没有名字的函数,需要我们手动进行调用,一般情况不会使用.
[ DISCUZ_CODE_40 ] 自执行函数: 自执行函数,也就是说无论我们是否调用它,它都会被执行,适合做初始化工作.
[ DISCUZ_CODE_41 ] arguments: 使用特殊对象arguments,开发者无需明确指出参数名,就能访问数据的内部元素.
[ DISCUZ_CODE_42 ]◆嵌套与递归◆ 函数嵌套与递归式很多编程语言的通用属性,同样的 JavaScript 虽然是脚本语言,但是也支持嵌套和递归函数的实现,函数嵌套是语言特性,递归调用是逻辑思想,这两者有关但并不互斥,一个递归过程可以包含函数嵌套,同样一个递归函数也可当做是自身嵌套函数,一般情况下不会使用这些特性.
函数的嵌套: 函数的嵌套是指在函数体的内部再次嵌套一层函数体,并依次返回执行结果,就是嵌套函数.
[ DISCUZ_CODE_43 ] 函数的递归: 函数的递归是指函数不停地调用自身,直到满足一定得条件才会自动的跳出循环体.
[ DISCUZ_CODE_44 ] 函数的闭包: 通常情况下,我们想调用一个函数内部的嵌套方法,我们可以使用闭包的形式来实现.
[ DISCUZ_CODE_45 ]◆常用内置函数◆ 除了可以在 JavaScript 中自己定义函数以外 JavaScript 自身也提供了一些内部函数,也称为内部方法,程序可以直接调用这些函数来完成某些功能,下面是 JavaScript 中的一些内部函数的介绍.
encodeURI: 返回一个对URI字符串编码后的结果,URI表示的范围比URL要大.
[ DISCUZ_CODE_46 ] decodeURI: 对一个编码后的URI字符串进行解释,翻译成一个正常格式.
[ DISCUZ_CODE_47 ] 字符串转换: 使用escape()方法对字符串进行转义处理,unescape()则负责将代码解码.
[ DISCUZ_CODE_48 ] JSON序列化: 使用JSON方法将数组序列化存储,方便数据传输.
[ DISCUZ_CODE_49 ]
页:
[1]