Web前端学习（3）_javascript

54 阅读 0 评论 36 点赞

我是靠谱客的博主传统溪流，最近开发中收集的这篇文章主要介绍Web前端学习（3）_javascript，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Web前端学习（3）_javascript

这篇来写关于JavaScript的相关内容。

1.Javascript入门

1.1 引入

html：负责网页结构

css：负责网页美观

javascript：负责用户与浏览器交互

1.2 scirpt的语法：

1）基础语法（ECMA规范）

2）BOM编程（没有统一）

3）DOM编程（没有统一）

2.javascript使用（关于注释，不做过多演示，比较简单）

javascript的注释：单行 // 多行 /* */

css的注释：css 多行注释 /* */

html的注释：

常用的函数：

alert("提示框");

document.write("向浏览器输出内容");
<script type="text/javascript">
alert("hello");
document.write("hello");
</script>
javascript的使用方法：

1）内部javacript

a)在html页面中使用<script>标签，在<script>标签体中写js内容

b)弊端：和html代码混杂在一起，不好维护，不好重用

2）外部javascript（推荐使用）

注意：不能使用<script src="01.js"/> 空标签方式导入

3.变量和数据类型

1）定义和赋值变量：var 变量名=值;
//定义变量
var a = 100;
var b = 12.24;
var c = 'f';
var d = "abc";
var e = true;
var f = new Object();
注意：

a）使用var关键词定义变量，var可以省略的，但是不建议省略var

b) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。

c) js是弱类型语言，使用var来定义任何数据类型

d）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用

typeof(变量)：查看变量的数据类型
//查看每一个变量的类型
document.write(typeof(a));
2)js的数据类型分类：

a）number：无论整数还是小数，都是number类型

b) string: 无论字符还是字符串，都是string类型

c) boolean

d) object 对象类型

4.类型转换函数

string->number(整数) : parserInt(变量)

string->number(小数): parserFloat(变量)

var a = "100";
var b = "12.34";
document.write("a转换之前的类型"+typeof(a)+"<br>");
document.write("a转换之后的类型"+typeof(parseInt(a))+"<br>");
document.write("b转换之前的类型"+typeof(b)+"<br>");
document.write("b转换之后的类型"+typeof(parseFloat(b))+"<br>");

5.运算符(类似于java中运算符)

1)算术运算符： + - * / %

2)比较运算符： > < >= <= ==

3)逻辑运算符： && || !

4)三目运算符: 表达式 ? true的结果 : false的结果

6.流程控制语句

主要就是：if-else语句，for循环，switch，do-while语句，与java都是类似的，但是变量的定义一定要用var，不能用int。
<script type="text/javascript">
if(1){
document.write("成立");
}else{
document.write("不成立");
}
document.write("<hr>");
for(var i=0;i<5;i++){
document.write("hello");
document.write("<br>");
}
document.write("<hr>");
var j=0;
while(j<5){
document.write("hello");
document.write("<br>");
j++;
}
document.write("<hr>");
var j2=0;
do{
document.write("hello");
document.write("<br>");
j2++;
}while(j2<5)
</script>
（1）if语句注意事项：

条件可以是：

布尔值：true：成立； false:不成立
number：非0：成立； 0：不成立
string: 非空字符串：成立；空字符串：不成立
object: 非null: 成立； null：不成立

（2）switch语句注意:

在js中的switvch语句中的case选项的值:
A.可以选择常量,String类型或者number类型
B.case选项中的值还可以是变量
C.在java中case选项中的值只能是常量不能是变量
D.case选项还可以是表达式

这里简单的演示一个利用for语句的嵌套，打印99乘法表：
<script type="text/javascript">
//打印99乘法表（作业）
for(var i=1;i<=9;i++){
for(var j=1; j<=i;j++){
document.write(j+"x"+i+"="+i*j+" ");
}
document.write("<br>");
}
</script>
*with语句：方便函数的调用
with(对象){
直接写对象的方法，无需写对象的名称
}
<script type="text/javascript">
with(document){
for(var i=1;i<=9;i++){
for(var j=1; j<=i;j++){
write(j+"x"+i+"="+i*j+" ");
}
write("<br>");
}
}
</script>
实现的效果和上述是一样的。

7.函数

7.1 函数定义：
function 函数名称(形式参数列表){
语句
}
7.2 调用函数:函数名称(实际参数列表);

简单演示一个减法以及调用，后面会有使用：
<script type="text/javascript">
//减法
function sub(a,b){
var result;
result = a-b;
return result
}
document.write(sub(4,1));
</script>
注意：
1）js的函数使用function定义，但是形式参数列表不能使用var关键词
2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。
4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。
5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。
6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数

注意：
实际参数<形式参数： NaN
实际参数>形式参数：取前面的实际参数，后面的参数丢失

7.3案例：使用函数调用，实现输入月份，打印该月份的天数：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function check(){
var month = parseInt(document.getElementById("month").value);
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert("该月有31天！");
break;
case 4:
case 6:
case 9:
case 11:
alert("该月有30天！");
break;
case 2:
alert("该月有28天！");
break;
default:
alert("该月分不存在！");
}
}
</script>
</head>
<body>
请输入要查询的月份：
<input type="text" id="month" />
<input type="button" value="查询" οnclick="check()" />
</body>
</html>

8.基于对象编程

内置对象：

8.1 String对象
方式一：定义String对象
var str1 = new String("hello");
var str2 = new String("hello");
document.write("结果："+(str1==str2)+"<br/>");

valueOf（）:该方法返回对象的内容
document.write("结果："+(str1.valueOf()==str2.valueOf()));

方式二：
var str1 = "hello";
var str2 = "hello";
document.write("结果："+(str1==str2)+"<br/>");
var s1 = new String("hello");
var s2 = new String("hello");
document.write(s1==s2);
document.write("<br>");
//valueOf(),这个方法是取出对象中的内容
document.write(s1.valueOf()==s2.valueOf());
document.write("<br>");
//创建字符串的方式2:直接赋值
var s3 = "hello";
var s4 = "hello";
document.write(s3==s4);
document.write("<br>");
常用方法：
charAt(索引): 返回指定索引的内容
indexOf(字符串): 返回首次出现指定字符的索引位置
lastIndexOf(字符串): 返回最后出现指定字符的索引位置
fontcolor("red"): 直接给字符串添加颜色
split("字符串"): 使用指定字符串切割字符串，返回字符串数组
substring(start,end); 截取字符串，start：开始索引， end:结束索引
substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
<script type="text/javascript">
var s1 = "abcdefgfedcba";
//charAt(索引): 返回指定索引的内容
document.write(s1.charAt(1));
document.write("<br>");
//indexOf(字符串): 返回首次出现指定字符的索引位置
document.write(s1.indexOf("e"));
document.write("<br>");
//lastIndexOf(字符串): 返回最后出现指定字符的索引位置
document.write(s1.lastIndexOf("b"));
document.write("<br>");
//fontcolor("red"): 直接给字符串添加颜色
s1 = s1.fontcolor("red");
document.write(s1);
document.write("<br>");
var s2 = "to be or not to be";
//split("字符串"): 使用指定字符串切割字符串，返回字符串数组
var arr = s2.split(" ");
for(var i =0;i<arr.length;i++){
document.write(arr[i]);
document.write("<br>");
}
document.write("<br>");
//substring(start,end); 截取字符串，start：开始索引， end:结束索引
document.write(s2.substring(0,2));
document.write("<br>");
//substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
document.write(s2.substr(0,2));
</script>
8.2 Number对象（和String对象类似）
<script type="text/javascript">
//Number对象
var n1 = new Number(10);
//document.write(n1);
var n2 = new Number(10);
document.write(n1==n2);
document.write("<br>");
document.write(n1.valueOf()==n2.valueOf());
</script>
8.3 Boolean对象
<script type="text/javascript">
//Boolean对象
var b1 = new Boolean(true);
var b2 = new Boolean(true);
document.write(b1==b2);
document.write("<br>");
document.write(b1.valueOf()==b2.valueOf());
document.write("<br>");
</script>
8.4 Math对象

常用的方法：

1）ceil()：向上取整。如果有小数部分的话，直接+1

2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
3) round(): 四舍五入取整
4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
5）max(): 返回最大值
6）min(): 返回最小值

分析：这些方法都比较简单，这里给出一个猜数字的游戏案例，其中就用到了Math的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var n = Math.floor((Math.random()*100+1));
//alert(n);
function guess(){
var num = document.getElementById("d1").value;
num = parseInt(num);
if(num>n){
alert("大了");
}else if(num<n){
alert("小了");
}else if(num==n){
alert("对了！");
}
}
</script>
</head>
<body>
请输入你猜的数字：<input type="text" id="d1" />
<input type="button" value="猜猜猜!" οnclick="guess()" />
</body>
</html>
8.5 Date对象
分析：创建Date对象，调用它的一些方法，可以得到当前时间的年月日，时分秒，这里给出一个案例练习：网页时钟，利用定时器，时间动态变化：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<span id="s1"></span>
</body>
<script type="text/javascript">
function getTime(){
var span = document.getElementById("s1");
//创建日期对象
var date = new Date();
var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"   "+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();
span.innerHTML=time;
}
window.setInterval("getTime()",1000);
</script>
</html>
8.6 Array数组对象

方式一：创建数组
1.1 指定数组长度
var arr = new Array(3);

1.2 不指定数组长度、默认0个元素

var arr = new Array();

1.3 指定具体内容
var arr = new Array(10,"hello",true);

方式二：不需要new，直接指定内容
var arr = [10,"java",false];

注意：
1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
2) js的数组可以存放任意类型的元素。

常用的方法：
join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
reverse(): 反转数组中的元素

常用的属性：length 数组的长度
<script type="text/javascript">
//1.1:var arr = new Array(3);
var arr1 = new Array(3);
arr1[0] = 1;
arr1[1] = 2;
arr1[2] = 3;
arr1[3] = 4;
//1.2 var arr = new Array(); 创建数组不指定长度
var arr2 = new Array();
arr2[0] = 10;
arr2[1] = true;
arr2[2] = "hello";
//1.3 var arr = new Array("hello",100,200);
var arr3 = new Array(11,12,13);
//方式2:创建数组,并给数组直接赋值不需要new
var arr4 = [15,22,"w"];
//join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符
var arr5 = ["001","002","003"];
var str = arr5.join("&&");
document.write(str);
document.write("<br>");
//reverse(): 反转数组中的元素
arr5 = arr5.reverse();
for(var i=0;i<arr5.length;i++){
document.write(arr5[i]);
document.write("<br>");
}
</script>