JavaWeb学习笔记(5)__JavaScript基础

最新推荐文章于 2024-10-30 13:10:35 发布

耿鬼不会笑

最新推荐文章于 2024-10-30 13:10:35 发布

阅读量285

点赞数

分类专栏： # JavaWeb开发基础文章标签： java javascript css html5

本文链接：https://blog.csdn.net/A233666/article/details/105004818

版权

JavaWeb开发基础专栏收录该内容

23 篇文章 2 订阅

订阅专栏

JavaWeb学习笔记

本文章基于《精通HTML+CSS+JavaScript网页设计》整理记录，仅用于个人学习/交流使用。

JavaScript篇

第一章 JS基础

1.引入方式

1.在HTML文件中写入

在<head>中插入 <script type=“text/javascript”> </script>

2.外部引入

2.语言基础

常用的数据类型：数据值类型（Number）；文本数据类型（String）；布尔数据类型（Boolean）

特殊数据类型：无定义数据类型（underfind）；空数据类型（null）

变量声明：var name=“张三” ； age=18; //对未声明的变量直接赋值

位运算：

第二章函数

1.基本使用

1.定义函数

使用关键字 function

不指定函数名

适用范围：

(1) 把函数直接赋值给变量 var f = function(){}

(2) 网页事件直接调用函数 window.οnlοad=function(){}

指定函数名

函数名必须唯一

function f ( [参数1，参数2...] ){
	//函数体
	[return 表达式] //return 可以省略
}

2.函数调用

1. 直接调用

相当于直接执行函数体里面的语句 f( )

在表达式中调用

适用有返回值的函数，通常还和输出(alert，document) 等语句配合使用 document.write( f( ) )

在事件中调用

当页面加载，用户单击，移动光标都会产生事件。

2.系统函数

格式：对象 . 方法

1.常用的函数

1. eval()

计算某个字符串

document.write( eval(“13+13”) ); //26

isFinite()

检验参数是否又穷大，(可转换为)有限数值，返回 true ；非数字(NaN)或正负无穷大的数，返回 false

isFinite(0.01) //true

isFinite(“哈哈哈”) //false

isNaN()

检验参数是否是非数字

isFinite(0.01) //false

isFinite(“哈哈哈”) //true

Number()

把对象的值转换为数字，如果参数是 Date 对象，Number返回从 1970.1.1 到现在的毫秒数

无法转换为数字，返回 NaN

Number( “0.01” ) //0.01

Number( ”123 456“ ) //NaN

Number( new Date( ) ) //

parseInt( )

将一个字符串转换成数值，遇到第一个非数字终止转换，反之，返回NaN

parseInt(“10”) //10

parseInt(“10a10”) //10

parseInt(“a10”) //NaN

parseFloat()

将一个字符串转换成数值，遇到第一个非数字终止转换，反之，返回NaN

parseFlaot(“10.00”) //10

parseFloat(“10.33”) //10.33

parseFloat(“9days”) //9

parseFloat(“days9”) //NaN

第三章 JS内置对象

1.字符串对象

var str=“abc” ; //var 是可选项

var str=new String(“abcabc”); //var 是可选项

str.length //字符串长度，没有括号//注：一个汉字，一个空格都是占一个字符位

对象名.属性名 //获取对象属性值

对象名.属性名=值 //为属性赋值

字符串常用的函数：

stringObj=“HTML5从入门到精通–JavaScript部分”

案例：验证用户名是否合法

<!doctype html>
<html>
<head>
	<title>合法输入测试</title>
	<script type="text/javascript">
		function f() {
    	var subChar=document.getElementById("username").value;//获得的用户名
    	var findChar="qwertyuioplkjhgfdsazxcvbnm147896325_-*";//合法的字符
    	for(var i=0;i<subChar.length;i++){
        	if(findChar.indexOf(subChar.charAt(i))==-1){
            	alert("含有不合法的字符");
            	return;
        		}
    		}
    	alert("恭喜：用户名合法");
		}
	</script>
</head>

<body>
	<form action="" method="post" name="myform" id="myform">
		<input type="text" name="textstring">
		<input type="button" value="检查" onclick="f()">	
	</form>
</body>
</html>

2.数学对象

补充：四舍五入函数

1.数学方法 round 和 pow 配合使用

Math.round(num*Math.pow(10,n))/Math.pow(10,n)

num要操作的数，n要保留的小数位数

2.JS的 toFixed 和 toPrecision

var a=num.toFixed(n) //num要操作的数，n要保留的小数位数

var b=num.toPrecision(n)

3.日期对象

var d1=new Date(); //当前日期

var d2=new Date(“June 10,2010”) //日期字串

var d3=new Date(“2019/2/29”) //（年,月,日,[时,分,秒,[毫秒]]）

var d4=new Date(2011,10,19,16,16,16) //2011/10/19 16时16分16秒

var d5=new Date(20000); //距离 1970/1/1 0时0分0秒有20000毫秒

4.数组对象

创建数组：var myarr = new Array(n) ； var myarr2=new Array(1,2,3)

数组长度：myarr.length 数组的长度可以随时被改变

遍历：for (var i in myarr) { }

删除：delete myarr[3] ; // 数组长度不变，将下标为三的元素设置为 undefined

常用方法：

案例：生成随机验证码

function validateCode() {
    var s="abcdefghigklmnopqrstuvwxyzQWERTYUIOPKJHGFDSAZXCVBNM1478523690";//验证码中可能包含的字符
    var ret="";//保留结果
    for (var i=0;i<4;i++){//4位
        var index=Math.floor(Math.random()*62);//产生0-62的随机数
        ret+=s.charAt(index);//将随机数转成在s中对应的字符
    }
    return ret;
}

function show() {
    document.getElementById("msg").innerHTML=validateCode();//得到随机数并写入HTML
    //window.οnlοad=show();存在疑问，如何在页面加载时显示
}

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>随机验证码</title>
    <script type="text/javascript" src="test.js"></script>
    <link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
    <span id="msg"></span>
    <input type="button" value="刷新" onclick="show()">
</body>
</html>