JavaWeb学习笔记(5)__JavaScript基础

JavaWeb学习笔记

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

JavaScript篇

第一章 JS基础

1.引入方式

1.在HTML文件中写入

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

2.外部引入

<script src="#"> </script>

2.语言基础

常用的数据类型:数据值类型(Number);文本数据类型(String);布尔数据类型(Boolean)

特殊数据类型:无定义数据类型(underfind);空数据类型(null)

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

位运算:

第二章 函数

1.基本使用
1.定义函数
使用关键字 function
  1. 不指定函数名

适用范围:

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

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

  1. 指定函数名

函数名必须唯一

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

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

  1. 在表达式中调用

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

  1. 在事件中调用

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

<input type=“submit” name=“Submit” value=“提交” οnclick=" f() ">

2.系统函数

格式:对象 . 方法

1.常用的函数
1. eval()

计算某个字符串

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

  1. isFinite()

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

isFinite(0.01) //true

isFinite(“哈哈哈”) //false

  1. isNaN()

检验参数是否是非数字

isFinite(0.01) //false

isFinite(“哈哈哈”) //true

  1. Number()

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

无法转换为数字,返回 NaN

Number( “0.01” ) //0.01

Number( ”123 456“ ) //NaN

Number( new Date( ) ) //

  1. parseInt( )

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

parseInt(“10”) //10

parseInt(“10a10”) //10

parseInt(“a10”) //NaN

  1. 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>

小技巧:产生指定范围内的随机数

(1)产生0-n范围:Math.floor(Math.random()*(n+1))

(2)产生n1-n2范围:Math.floor(Math.random()*(n2-n1))+n1

第四章 JS对象编程

1.DOM

文档对象模型(DOM)是W3C组织推荐的处理HTML/XML的标准接口

​ 在使用DOM进行解析HTML对象的时候,首先在内存中构建起一棵完整的解析树,借此实现对整个XML文档的全面、动态访问。也就是说,它的解析是有层次的,即将所有的HTML中的元素都解析成树上层次分明的节点,然后我们可以对这些节点执行添加、删除、修改及查看等操作。

​ 在DOM结构中,根节点由 document 对象表示 ,即<HTML>标签,元素。当使用JavaScnpt脚本浯燥仵HTML文档时,document即指向整个文档,、

等结点类型即为Element,Comment类型的结点则是指文档的注释,在使用DOM燥作XML和HTML文档时,经常要使用documeht对象.Document对象是一棵文档树的根,该对象可为我们提供对文档数据的最初(或最顶层)的访问入口。

2.窗口对象

1.Window窗口

2.对话框

3.文档对象
4.表单对象

JS基础知识暂且只学习到这里,后序内容再学习时将会继续整理
时间:2020.3.21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值