Web前端学习（3）_javascript

来源：互联网发布：新买的mac电池循环次数编辑：程序博客网时间：2024/06/06 04:23

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="查询" onclick="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="猜猜猜!" onclick="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:创建数组,并给数组直接赋值不需要newvar 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>

阅读全文

0 0