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个组内容
$&：当前匹配的内容
$`：位于匹配子串左侧的文本
$'：位于匹配子串右侧的文本
$$：直接量$符号
统计字串长度: 使用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[0] = "LyShark";
array[1] = "Admin";
array[2] = "John";
array[3] = "Adrew";
document.write("返回整个数组: " + array + "<br>")
document.write("返回[1]-[2]元素: " + 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 world 123 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 = [1,2,3,4,5]; //创建数组,并有5个元素
var array1 = []; //创建空数组
var array2 = new Array() //同样创建空数组
array1[0] = "hello";
array1[2] = "world";
array2[0] = 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 = [[1,2,3],[4,5,6],[7,8,9,10]]; //创建二维数组
document.write("数组value大小: " + value.length + "<br>") //打印数组大小
document.write("数组value[2]大小: " + value[2].length + "<br>") //打印数组大小
for(var i=0;i<3;i++) //循环输出数组元素
{
for(j in value[i]) //输出每个数组元素的值
{
document.write(" " + value[i][j]);
}
document.write("<br>")
}
</script>
</body>
插入修改与删除: 通过使用splice()方法,实现对元素的插入,增加,修改,删除.
<body>
<script type="text/javascript">
var array = new Array(5)
array[0] = "admin";
array[1] = "guest";
array[2] = "lyshark";
array[3] = "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 = [1,2,3,4,5];
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 = [4,5,6];
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[0] = "admin";
array[1] = "lyshark";
array[2] = "Thomas";
array[3] = "John";
array[4] = "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 = [1,2,3,4,5];
var b = [7,8,9,10];
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[0] = "admin";
array[1] = "guest";
array[2] = "lyshark";
document.write("直接连接成字符串: " + array.join() + "<br>")
document.write("连接成字符串并添加一个分隔符: " + array.join("*") + "<br>")
</script>
</body>
数组元素排序: 使用sort()方法实现数组的正向排列,reverse()则实现数组的反向排列.
<body>
<script type="text/javascript">
var array = [12,65,77,89,32,-19,54,33,78]
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[i])
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[index])
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[i] + " ");
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 = [1,2,3,4,5];
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 = [1,2,3,4,5]
ret = JSON.stringify(array) //序列化,将其他类型转换成字符串
document.write("序列化后的类型: " + typeof(ret) + "<br>")
document.write("反序列化,加载结果: " + JSON.parse(ret))
</script>
</body>
Web前端开发JavaScript基础的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 1+x 证书 Web 前端开发 JavaScript 专项练习
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/
- Web前端开发HTML基础
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记),相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标 ...
- Web前端开发JavaScript提高
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
- Web前端开发CSS基础
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- web 前端3 javascript基础
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...
- 1+X证书web前端开发中级对应课程分析
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/ 1+x 证书 Web 前端开发初 ...
- 《JavaScript & jQuery交互式Web前端开发》之JavaScript基础指令
在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...
随机推荐
- 子类中执行父类的方法（引出super()与mro列表）
1. 我们先想一下在python中如果子类方法中想执行父类的方法,有什么方式?大概有三种: Parent.__init__(self, name) # 通过父类的名字,指定调用父类的方法 super( ...
- csp-s模拟80（b）
头一次中午考试,上来一看三个题目以为是三个板子,但一看数据范围就不对劲. T1: 考场上的想法是:找出循环节,对于数组一头一尾的不在循环节中的,维护出以某数结尾/开头的上升序列,对于中间的循环部分只取 ...
- hibernate持久化类中，修改字符串长度时，注意的问题
在使用hibernate注解修饰字符串长度时,如果一开始没有把String类型的变量长度设计好,在网数据库插入数据时,容易造成字段长度超出错误,这时候需要修改@Column里length的大小.如果使 ...
- MySort(选做)
一.题目要求 注意:研究sort的其他功能,要能改的动代码,需要答辩 模拟实现Linux下Sort -t : -k 2的功能. 要有伪代码,产品代码,测试代码(注意测试用例的设计) 参考 Sort的实 ...
- OUC_Summer Training_ DIV2_#14 724
又落下好多题解啊...先把今天的写上好了. A - Snow Footprints Time Limit:1000MS Memory Limit:262144KB 64bit IO F ...
- 【软件工程】Alpha冲刺（4/6）
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 学习调用中国天气网API,接近实现天气推送功能 对天气推送的形式进行讨论及重确 ...
- AndroidStudio 3.0中之后无法打开DDMS [Android Device Monitor] 问题
AndroidStudio 3.0中之后无法打开DDMS [Android Device Monitor] 问题 转 https://blog.csdn.net/black_bird_cn/ar ...
- SmartTest__自动随机填充表单数据
下载地址https://addons.mozilla.org/zh-CN/firefox/addon/smarttesttool/ 安装完成后可以在工具栏看见 目前只包含两个功能 测试使用
- RabbitMQ学习之：（五）Exchange Type （转贴+我的评论）
From: http://lostechies.com/derekgreer/2012/03/28/rabbitmq-for-windows-exchange-types/ RabbitMQ for ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_6-06 zuul微服务网关集群搭建
笔记 6.Zuul微服务网关集群搭建 简介:微服务网关Zull集群搭建 1.nginx+lvs+keepalive https://www.cnblogs.com/liuyisai/ ...