今日学习内容如下：

JavaScript

JavaScript是一种基于对象和事件驱动的客户端脚本语言

动态、弱类型、基于原型，内置了支持类
解释器称为 JS 引擎，内置于浏览器中
ECMA 欧洲计算机制造商协会

Hello world

<input type="button" onclick="ff()" value="Click me"> onclick就是给按钮绑定了一
个响应函数，点击按钮则会触发响应函数的执行
<script>
function ff(){
window.alert('点击操作处理...');
}
</script>

复杂的写法

<button>Click me</button>
<script>
window.onload=function(){//当窗口加载完毕后自动执行的回调处理
var btn=document.getElementsByTagName("button")[0];//按照标签名称查找文
档中的所有指定标签，例如这里查找所有的button标签
btn.onclick=function(){ //给查找的页面元素绑定单击响应函数
alert(this.firstChild.nodeValue);//this用于指代当前事件源对象，也就是
button按钮。获取按钮元素的第一个子元素
}
}
</script>

JavaScript基本语法

js脚本既可以写在html文件内部，也可以独立定义js文件，需要使用时进行连接引入。例如 <script

type="text/javascript" src="引入的js文件路径"></script> 。引入外部文件的 <script> 标签之间不能包含内容

加载外部的css文件使用的是link标签 <link rel="stylesheet" type="text/css" href="style/aaa.css">

JavaScript数据类型

js是弱类型脚本语言，变量的数据类型是解释执行时动态决定的。

基本数据类型：Number数值型、布尔类型boolean、字符串类型string
- undefined类型只有一种可取值undefined，表示没有初始值的变量
- null类型表示已经赋值，只是值为空

复合数据类型：对象、数组和函数
JavaScript中严格区分大小写
JavaScript中标识符的命名规范和Java一致

布尔类型

true：true、非零数字、非空字符串
false：false、数值0、空字符串、undefined、null

函数

在JS中函数也是一个对象，可以将函数作为一个值赋给变量，函数名就是这个对象的引用

var f=function(name){
alert('xxxx'+name);
}
f('lisi');

变量

变量定义可以使用关键字var和 let进行定义，也可以不加任何关键字

<script>
var kk=999;
mm="number:";
let sex=true;
document.writeln("kk:"+kk+"<br/>");
document.writeln("mm:"+mm+"<br/>");
document.writeln("sex:"+sex+"<br/>");
</script>

JavaScript 是弱类型编程语言，声明变量时不需要指定类型，而且变量类型也随着赋值的改变而改变

正则式

正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串就认为它匹配了，否则该字符串就是不合法的

正则式本质上就是一种允许使用通配符的特殊字符串，基础语法就是【/表达式/】，最初的主要用于用户输入数据的校验

通配符

特殊字符表示频率修饰

特殊字符	说明
？	指定前面的表达式可以出现零次或一次
*	指定前面的表达式可以出现零次或多次
+	指定前面的表达式可以出现一次或多次
{m, n} 表示法	这种写法最灵活，用于表示前面的表达式可以最少出现m次，最多出现n次。注意其中的m和n都可以省略，省略m表示0，省略n表示无限次

固定组

固定组可以使用()表示，可以使用竖线 | 表示互斥

例如 (abc)|(efg) 表示可以匹配abc或者efg

常用方法

基本使用方法

<form action="./index.html" name="form1" method="post" onsubmit="return
isSubmit();">
onsubmit就是在form表单提交之前所执行的函数
这里可以使用return false阻止form表单的提交
function isSubmit(){
if(checkSNO(document.form1.sno) && checkSname(document.form1.sname) &&
checkSbirthday(document.form1.sbirthday)){ 执行各个输入的验证，如果验证通过则返回
true，使form表单提交，否则返回false阻止提交
return true;
}
return false;
}

正则式对象的test方法

test()方法用于判断正则式是否匹配某个字符串

<input type="text" name="sno" onBlur="checkSNO(this)" />
<td id="sno"></td>
当输入框失去焦点时自动回调checkSno函数,并将当前页面元素作为参数传递到函数中
function checkSNO(n){
var flag = true;
var message = "ok";
var zz = /^\d{4}$/; 整个字符串内容必须以数字开头【^】，以数字结尾【$】。\d表示数
字，每个字符必须是0-9的数字，{4}表示\d需要出现4次，如果{4,}表示最少出现4次，如果{,4}表示
0次到4次
if(!zz.test(n.value)){ 判断输入的内容是否复合正则式，符合则为true，否则为
false。n是调用时候传入的页面元素，.value则获取该页面元素的value值
message ="no";
flag = false;
}
document.getElementById(n.name).innerHTML=message;
return flag;
}

如果要求输入4位数字，而且不能0开头。 /^[1-9][0-9]{3}$/

判断输入内容为中文字符，要求最少2个，最多10个

function checkSname(n){
var flag = true;
var message = "ok";
var zz = /^[\u4e00-\u9fa5]{2,10}$/;
if(!zz.test(n.value)){
message ="no";
flag = false;
}
document.getElementById(n.name).innerHTML=message;
return flag;
}

判断用户输入的日期类型样式

function checkSbirthday(n){
var flag = true;
var message = "ok";
var zz = /^\d{4,}-([1-9]|[1][012])-([1-9]|[12][0-9]|[3][01])$/;
if(!zz.test(n.value)){
message ="no";
flag = false;
}
document.getElementById(n.name).innerHTML=message;
return flag;
}

样例深入理解

初期开发中使用正则式的建议：到网络上查询，不建议自己写，除非有把握。

vscode的插件any-rule按需求直接生成

没有通配符

var str="112yanjun";
var reg1=/yan/;表示3个字符，而且连接顺序确定。主要字符串中包含yan子串则返回true
document.writeln(reg1.test(str));
添加特定符号
/^yan/ 表示要求以yan子串开头，例如yanjun
/yan$/ 表示要求以yan子串收尾，例如junyan

使用通配符

其它通配符的含义比较清晰，重点理解[]的用法

要求字符串应该是由数字组成
\d表示字符串中的一个字符应该是数字
var str="12";
var reg1=/^\d$/;
document.writeln(reg1.test(str)); 返回值为false
使用+表示前面的字符可以出现一次或多次,但是由于^和$的限制，所以str中包含字符a非数字，返回值
为false
var str="1243213421a2";
var reg1=/^\d+$/;
document.writeln(reg1.test(str));
可以使用[]表示一个字符的条件
[1-9]表示字符串中一个字符应该是1到9的数字
var str="0";
var reg1=/^[1-9]$/; reg1.test返回false
var str="1f";
var reg1=/^[1-9a-f]{2}$/; //可以匹配1-9的数字或者a-f的字符
var str="yb";
var reg1=/^[yan]{2}$/; //每个字符可以使用yan中任意一个字符

其它用法【不重要】

new RegExp()构建正则表达式对象，可以使用参数指定匹配模式g、i、m

g全文查找、i忽略大小写、m 多行查找。也可以同时指定3个模式

var str = "Visit W3School, W3School is a place to studyweb tech.";
var patt = new RegExp("W3School","g");
var result;
while ((result = patt.exec(str)) != null) {
document.write(result);
document.write(patt.lastIndex);
}

compile编译正则表达式，例如 reg1.compile("man","g"); 修改正则式对象中的正则表达式
test判断是否符合正则表达式 [主要应用]
exec检索字串中指定的值，返回找到的值，并确定位置

字串的replace方法

replace(正则式，替换内容) 用于进行符合正则式要求的字符串的替换

function trim(str){
return str.replace(/(^\s*)|(\s*$)/g,"");//剔除字符串两端的空格符，其中^\s*表示
开头部分的多个空格,\s*$表示收尾的多个空格。默认只匹配一次，如果需要匹配所有满足条件的字符
串，则需要使用贪婪模式g
}
alert(trim(" safdas "));

String其它方法

search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
match() 法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
replace()替换与正则表达式匹配的子串
split() 把字符串分割为字符串数组

search() 方法用于检索字符串中指定的子字符串或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回-1

var str="Mr. Bluehas a blue house";

document.write(str.search(/blue/i));

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

match()方法将检索字符串String Object，以找到一个或多个与regexp匹配的文本。这个方法的行为在很大程度上有赖于regexp是否具有标志g。如果regexp没有标志 g，那么match方法就只能在 stringObject中执行一次匹配。如果没有找到任何匹配的文本，match将返回null。否则它将返回一个数组，其中存放了与它找到的匹配文本有关的信息

var str = "The rain in SPAIN stays mainly in theplain";

var n=str.match(/ain/gi);

document.getElementById("demo").innerHTML=n;

输出值为：ain,AIN,ain,ain

split() 方法用于把一个字符串分割成字符串数组。如果把空字符串""用作separator，那么stringObject 中的每个字符之间都会被分割。split方法不改变原始字符串

var str="How areyou doing today?";

var n=str.split("",3);

输出值：How,are,you

var str="How areyou doing today?";

var n=str.split(/[a-e]/);

H5的数据校验

html5额外添加了一些输入校验属性进行简单的客户端校验，不符合规则则会弹出tip进行提示

required指定必须填写
pattern指定输入值必须符合指定的正则表达式
min/max针对数值和日期的最大最小值

<input type=text name=name required/>
<input type=text name=isdn required pattern="\d{3}-\d-\d{3}-\d{5}"/>
<input name=price type=number min=20 max=150 step=5 />

自定义报错信息

默认html5为每个校验规则提供相应的报错提示，这些错误提示信息是固定的。html5为表单控件提供 setCustomValidity()方法实现用户自定义报错提示信息。但是注意浏览器对自定义错误提示的支持并不是很理想，可能会有页面需要刷新一次的问题。

<form action=add>
<input id=name name=name type=text required/>
<input type=submit value=提交 onclick="check();"/>
</form>
<script type="text/javascript">
var check=function(){
if(! document.getElementById("name").checkValidity()){
document.getElementById("name").setCustomValidity("名称是必须填写的！");
}
}
</script>

H5验证总结

优点：简单方便
缺点：提示的UI不是太漂亮，无法做多个验证，必须表单提交才能验证（即ajax无效）
建议：在要求比较简单的时候可以考虑使用H5验证表单，也可以使用内置JS函数加各种事件自定义一个验证函数，不过这样不仅兼容是个问题，而且还麻烦，倒不如直接使用JQ插件验证

Date日期类型

Date日期对象。这个对象可以储存任意一个日期，从0001年到9999年，并且可以精确到毫秒数（1/1000秒）

在内部，日期对象是一个整数，它是从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比1970年早，则它是一个负数

所有日期时间，如果不指定时区，都采用UTC世界时时区，它与GMT格林威治时间在数值基本上是一样的

不指定参数日期 new Date()
参数为日期字符串： var nowd2=new Date("2019/3/20 11:12");
参数为毫秒数： var nowd3=new Date(5000);
参数为年月日小时分钟秒毫秒： var nowd4=new Date(2018,10,24,11,12,0,300);

常见方法：

getFullYear() 返回四位数的年、getMonth() 返回月 0-11、 getDate() 返回日、 getDay() 返回星期
getHours() 返回小时 0-23、 getMinutes() 返回分钟 0-59 、getSeconds() 返回秒数 0-59
getMilliseconds() 返回0-999 毫秒

以上都可以加UTC返回世界时间

UTC协调世界时是以原子时秒长为基础，在时刻上尽量接近于世界时的一种时间计量系统。中国大陆为 UTC+8

getTime() 返回1970 年 1 月 1 日至今的毫秒数 setFullYear(year,month,day) 、
setMonth(month,day) 、setDate(day)、 setHours(hour,min,sec,millisec)、setMinutes(min,sec,millisec)、setSeconds(sec,millisec)、 setMilliseconds(millisec)、setTime(millisec)

需求：当用户浏览网页的时候，根据当前的时间，给出问候语:

6:00-9:00 早上好
9:01-11:30 上午好
11:31-14:30 中午好
14:31-17:30 下午好
17:31-18:40 傍晚好
18:41-23:59 晚上好
0:00-5:59 凌晨好

Java学习----前端3相关推荐

Java学习----前端1
今日学习内容总结如下: Web应用开发 Web应用程序是一种可以通过Web访问的应用程序.Web应用程序的一个最大好处是用户很容易访问应用程序.用户只需要有浏览器即可,不需要再安装其他软件. 应用程序 ...
JAVA学习笔记—前端学习笔记（二）—JQ、ES6、Bootstrap
文章目录四.jQuery基础 1.jQuery介绍 1.1 jQuery能做什么? 1.2 jQuery的优势 2. jQuery的使用 2.1 基本的语法介绍 2.2 jQuery对象与DOM对象 ...
java学习笔记(三)：前端miniUI控件库入门
java学习笔记(三):前端miniUI控件库入门最近在一家公司实习学习,一上来就需要学习了解相关的前端内容--miniUI.而这个内容自己本身并没有了解学习过,上手也是遇到了不少的问题,于是想把自 ...
java学习之前端基础
前端基础 1.HTML 1.1html基础标签 1.2table标签 1.3form标签 1.4frame标签 2.CSS 2.1CSS语法 2.2CSS盒子模型 2.3CSS布局 2.4水果库存静态 ...
Java学习07–前端基础之CSS
Java学习07–CSS基础 1.CSS介绍 1.1.发展史 css1.0 基本 css2.0 div(块)+css html与css结构分离的思想网页变简单 css2.1 浮动,定位 css3.0 ...
干货！Java 学习路线指南，看这文就够了！
作者 | 三太子敖丙来源 | 三太子敖丙(ID: JavaAudition) 自学/学习路线这样的一期我想写很久了,因为一直想写的全一点硬核一点所以拖到了现在,我相信这一期对不管是还在学校还是已经工 ...
java html提取_2020年全新Java学习路线，含配套资料，更易上手 - 打不过就跑吧
新的一年来临,突如其来的疫情打破了平静的生活! 在家的你是否很无聊,如果无聊就来学习吧! 世上只有一种投资只赚不赔,那就是学习!!! 我在2020年升级了Java学习线路图,硬核升级,免费放送! 学完 ...
java路线_2021年Java学习路线图—精心整理
看到过无数套毫无用处的Java路线图,到现在为止还在云端飘着,对于Java小白来说就像天书一般,Java大神看了以后感觉云山雾绕不知道讲什么东西,于是我从实战出发,呕心沥血整理出来Java学习路线图希 ...
java学习路线_java学习路线_我的入坑路
java详细路线: 网上有很多学习路线,当初,我就是受这个学习路线的影响入坑的. 既然看到标题为我的java学习路,那就给大家看下我是怎么走过来的. 阶段一_JavaSE 入门推荐书:java开发实战 ...

Java学习----前端3