<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JS基础第二弹</title>
<!-- js的基本语法和java基本上一样,详细的请参照Java的基本语法,这里不再详细赘述 -->
<!-- JS有五种数据类型：String number boolean object function
三种对象类型：Object Date Array
两个不包括任何值得数据类型：null undefined -->
</head>
<body>
<p id = "id">时间</p>
<button onclick="time()">点这里上面的时间会改变</button>
<button onclick="this.innerHTML=Date()">点这里会发生变化</button><br>
<a href="javascript:void(0)">点击将什么也不会发生</a><!-- 定义一个死链接 -->
<a href="javascript:void(alert('表单验证为什么这么多！！！要那么多干嘛！！！'))">点击这个将发出警告</a>
<p>请输入1到10之间的数字</p>
<input id="number">
<button type="button" onclick="number()">提交</button>
<p id ="result"></p>
<br><br>
<p>请输入点什么</p>
<form>
<input required="required"><!-- 使用浏览器自带的required来阻止空表单的传送 -->
<!-- disable:规定输入的元素不可用;max/min:规定输入元素的最大最小值;pattern:规定输入元素值得模式;required:规定输入元素字段是必须得;type:规定输入元素得类型 -->
<input type="submit" value="提交">
</form>
<br><br>
<p>请输入点什么</p>
<input id="nullInput">
<button type="button" onclick="nullInput()">提交</button>
<p id="result1"></p>
<p>这是用来验证邮箱的</p>
<input id="email">
<button type="button" onclick="email()">提交</button>
<script>
function print(){
for(var i=0 ;i<10;i++){
document.write(i);//使用write会将整个页面覆盖掉
}
}
function time(){
document.getElementById("id").innerHTML = new Date().toLocaleString();
//getElementById：返回对拥有指定ID的第一个对象的引用
//innerHTML：获取或插入元素内容
}
function day(){
document.getElementById("id").innerHTML = "今天是星期"+new Date().getDay();
}
function compare(){
var a = "abc";
var b = new String("abc");
document.getElementById("id").innerHTML = (5<6)?"5小于6":"5大于6";
}
document.write("<br>"+"------constructor的用法--------"+"<br>")
var fruits = ["苹果", "梨子", "香蕉", "西瓜"];
function isArray(myArray){
return myArray.constructor.toString().indexOf("Array") > -1;
//constructor：返回变量的构造函数,通过上述方法可以判断对象的类型
}
document.write(isArray(fruits)+"<br>");
//用instanceof也可以判断对象的具体类型
var date = new Date();
document.write(date instanceof Date);
document.write("<br>"+"------length的用法--------"+"<br>")
var str = "hello";
var str1 = new String("hello");
document.write(str.length+"<br>");
//返回字符串的长度,js中的字符串操作和java基本一样(js无.equals方法)
document.write("<br>"+"------比较运算符的用法--------"+"<br>")
document.write(str == str1);//==：值相等(还有!=和!==使用方法相同)
document.write("<br>");
document.write(typeof(str)+" "+typeof(str1)+"<br>")
document.write(str === str1);//===:绝对相等数据类型和值都相等
document.write("<br>");
document.write("<br>"+"------对象的用法--------"+"<br>")
var person = {//创建了一个JS对象
name:"tom",
age:18,
sex:"男",
show:function(){//定义了一个方法
return person.name+" "+person.age+" "+person.sex;
}
};
document.write(person.name+" "+person.age+" "+person.sex+"<br>");//访问对象的参数
document.write(person.show());//访问对象的方法
document.write("<br>"+"------将其他数据类型转化为字符串--------"+"<br>")
//String()或者().toString都可以实现
document.write(String(100)+"<br>");
document.write(String(new Date())+"<br>");
document.write((123).toString()+"<br>");
document.write((new Date).toString())+"<br>";
document.write("<br>"+"------将其他数据类型转化成数字--------"+"<br>")
document.write(Number(12.34)+"<br>");
document.write(Number(true)+"<br>");
document.write(Number(new Date())+"<br>");
document.write("<br>"+"------正则表达式--------"+"<br>")
var str = "hello jsjjjjjj";
document.write(str.search(/J/i)+"<br>");
//i:正则表达式修饰符;i:不区分大小写;g:执行全局匹配;m:执行多行匹配
document.write(str.search("o")+"<br>");
var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
//用于匹配邮箱地址
document.write(reg.test("[email protected]"));
//test用于检测一个字符串是否匹配reg的正则表达式
document.write("<br>"+"------一些使用误区--------"+"<br>")
var f1 = 0.1;
var f2 = 0.2;
document.write(f1+f2+"<br>");//float的精度问题：因为计算机是用二进制进行计算的,这样十进制的小数在转换成二进制的时候精度丢失,再转回十进制时产生了误差
for (var i = 0; i < 10; i++) {
}
document.write(i);
//这里居然贼神奇的打印出了10,因为在js中不会创建一个新的作用域,一般各个代码块的作用域都是全局的,这也是为什么js的使用可以这么的不严格,但是不推荐写代码这么随意,使用js中use strict,严格模式！！
document.write("<br>"+"------表单验证--------"+"<br>")
//表单验证的写法非常得多(实在是太多了,多到令人发指)html,css,js都可以对表单进行验证
function number(){//验证输入的是否为1到10之间的数字
var x = document.getElementById("number").value;//获取输入框的值
var result;
if(isNaN(x) || x <1 || x > 10){//isNaN:判断是否为数字,若是返回false,反之返回true
result = "输入错误";
}else{
result = "输入正确";
}
document.getElementById("result").innerHTML = result;
}
function nullInput(){//验证输入的是否为空
var x = document.getElementById("nullInput").value;
var result1;
if(x == null || x == ""){
result1 = "输入为空";
}else{
result1 = "输入不为空";
}
document.getElementById("result1").innerHTML = result1;
}
function email(){//验证输入的是否是e-mail
var x = document.getElementById("email").value;
var re = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;//邮箱验证的正则表达式
if(re.test(x)){
alert("恭喜你你输对了")
}else{
alert("不是一个有效的 e-mail 地址");
return false;
}
}
</script>
</body>
</html>JS学习笔记——基础第二弹
猜你喜欢
转载自blog.csdn.net/progammer10086/article/details/81543742
今日推荐
周排行