企业网站如何做自然搜索,潍坊市网站建设,如何在网上创建公司,网页开发网站1.JS概述 JavaScript是啥
JavaScript运行在浏览器上#xff0c;使网页行为生动#xff0c;是一种脚步语言。简称JS。 JavaScript在1995年由Netscape公司的Brendan Eich#xff0c;在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作#xff0c;Netscape管理层希…1.JS概述 JavaScript是啥
JavaScript运行在浏览器上使网页行为生动是一种脚步语言。简称JS。 JavaScript在1995年由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作Netscape管理层希望它外观看起来像Java因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] JavaScript的标准是ECMAScript 。截至 2012 年所有浏览器都完整的支持ECMAScript 5.1旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日ECMA国际组织发布了ECMAScript的第六版该版本正式名称为 ECMAScript 2015但通常被称为ECMAScript 6 或者ES2015。 JS与Java的区别
JS不需要编译写完源码之后浏览器直接打开直接解释执行。JS的目标程序以普通文本形式保存能使用文本编辑器打开是“脚本语言”。Java的目标程序以.class形式存在不能使用文本编辑器打开不是脚本语言。
JS与JSP的区别
JSJavaScript运行在浏览器上。
JSPJavaServer Pages,隶属Java语言运行在JVMJava虚拟机中。 2.HTML中嵌入JS代码的三种方式 第一种(事件句柄)
!-- 1.要实现的功能用户点击以下按钮弹出消息框2.JS是一门事件驱动型的编程语言依靠事件去驱动然后执行对应的程序。3.事件句柄以HTML标签的属性存在是在事件单词前添加一个on例如事件单词click事件句 柄onclick4.onclickJS代码的执行原理页面打开的时候JS代码并不会执行只是把这段JS代码注册到按钮的click事件上了。等这个按钮发生click事件之后注册到onclick后面的JS代码会被浏览器自动调用。5.使用JS代码弹出消息框在JS中有一个内置的对象叫作window全部小写可以直接拿来使用代表的是浏览器对象。window对象有一个函数叫作alert用法是window.alert(消息);这样就可以弹窗了6.JS中的字符串可使用单引号也可以使用双引号。7.JS中的一条语句结束之后分号;可有可无。--input typebutton valuehello onclickwindow.alert(hello world)input typebutton valuehello onclickwindow.alert(hello js);!-- window可以省略 --input typebutton valuehello onclickalert(hello zhangsan);alert(hello lisi);
第二种有内容的脚本块
!DOCTYPE html
html langen
!-- 1.JS的脚本块在一个页面当中可以出现多次2.JS的脚本块可以出现在任何位置
--
scriptwindow.alert(first....);//alert会阻挡当前页面加载直到用户点击确定按钮。
/scriptheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 样式块 --style typetext/css/* css代码 *//style
/headbodyinput typebutton value我是一个按钮对象1!-- 第二种方式脚本块的方式 --script typetext/javascript/*脚本块当中的程序在页面打开的时候以自上而下的顺序依次执行这个代码的执行不需要事件*/window.alert(Hello World!);window.alert(Hello JavaScript!); //JS代码的单行注释/*JS代码的多行注释和Java一样*//scriptinput typebutton value我是一个按钮对象2
/body/html
!--
/**
*
*javadoc注释这里的注释信息会被javadoc.exe工具解析提取生成帮助文档
*/--
第三种无内容但有引入js脚本文件的脚本块 !-- 在需要的位置引入js脚本文件 --script typetext/javascript srcjs/1.js/script!-- 同一个js文件可以被引入多次但在实际开发中需求很少--script typetext/javascript srcjs/1.js/script!-- 这种方式不行不能省略 结束的script标签script typetext/javascript srcjs/1.js /--!-- 若引入js脚本文件则脚本块里写的代码(hello world)不会被执行 --script typetext/javascript srcjs/1.jshello world!/script
// 在页面打开的时候以自上而下的顺序依次执行这个代码的执行不需要事件
window.alert(Hello World!);
window.alert(Hello javascript);
window.alert(Hello zhangsan); 3.标识符 命名规则
可以由字母、数字、下划线、美元符号构成。首字符不能是数字。不能是关键字。长度上无限制。
命名规范
类名和接口名首字母大写变量名和方法名第一个单词的首字母小写第二个单词的首字母大写。驼峰原则常量名字母全大写两个单词之间下划线隔开。 4.JS变量
!-- java语言是一种强类型语言,存在编译阶段且编译期间强行固定变量的数据类型。假设有代码int i;则java程序编译阶段就已经确定了i变量的数据类型该i变量的数据类型从编译阶段到变量最终释放一直都是int类型不可能变成其他类型。--script/*js是一种弱类型语言没有编译阶段一个变量可以随意赋值赋什么类型的值都行。var 变量名;//声明变量变量名值;//给变量赋值*/var i;//在JS中当一个变量没有手动赋值的时候系统默认赋值undefined具体存在值alert(i i);//iundefinedalert(undefined)var k undefined;alert(k k);//kundefinedvar a, b 200;alert(a a);//aundefinedalert(b b);//b200a true;alert(a);//true//一个变量没有声明/定义不能直接访问该变量alert(age);//语法错误age is not defined变量age不存在不能这样写/script
按F12键打开控制台 5.JS函数初步
body!-- java中的方法[修饰符列表] 返回值类型 方法名(形参列表){方法体;}例如public static boolean login(String username,String password){...return true;}boolean loginSuccesslogin(admin,123);--script typetext/javascript/*1.JS中的函数作用等同于Java语言的方法。语法格式:第一种方式function 函数名(形参列表){函数体;}第二种方式:函数名function(形参列表){函数体;}JS中的函数不需要指定返回值类型返回什么类型都行。*/function sum(a, b) {//a和b都是形参且都是局部变量alert(a b);}sum(10, 20);//函数必须调用才能执行//定义函数sayHellosayHello function (username) {alert(hello username);}sayHello(zhangsan);//调用函数sayHello/script!-- 点击按钮才能调用函数 --input typebutton valuehello onclicksayHello(lisi);input typebutton value计算10和20的和 onclicksum(10,20);
/body
bodyscript typetext/javascript/*重载方法名相同形参不同类型、个数、顺序重写方法头相同方法体不同java中的方法有重载机制JS中的函数能重载吗JS中的函数在调用过程中参数的类型无限制参数个数无限制这体现JS的弱类型*/function sum(a, b) {return a b;}var retValue sum(1, 2);//调用sumalert(retValue);var retValue2 sum(jack);//jack赋值给a变量b变量没有赋值系统默认赋值undefinedalert(retValue2);//jackundefinedvar retValue3 sum();alert(retValue3);//NaN(NaN是一个具体存在的值该值表示不是数字。Not a Number)var retValue4 sum(1, 2, 2);alert(结果 retValue4);//结果3function test1(username) {alert(test1);}/*函数名字不能重名若函数重名后声明的函数会覆盖之前声明的同名函数*/function test1() {alert(test1 test1);}test1(lisi);//调用test1()函数/script
/body 6.全局变量和局部变量
bodyscript typetext/javascript/*全局变量在函数体之外声明的变量属于全局变量。浏览器打开时声明关闭时销毁。在这期间全局变量会一直在浏览器的内存中耗费内存空间。全局变量生命周期较长尽量少用全局变量。局部变量在函数体当中声明的变量、一个函数的形参都属于局部变量。函数执行开辟局部变量的内存空间;函数执行结束之后释放局部变量的内存空间局部变量生命周期较短尽量多用局部变量。 */var i 10;//全局变量function accessI() {alert(i i);//访问的是全局变量}accessI();var username zhangsan;function accesssUsername() {var username lisi;//局部变量alert(username username);//就近原则访问的是局部变量}accesssUsername();alert(username username);//访问的是全局变量function accessAge() {var age 20;alert(age age);}accessAge();//age20// alert(age age);//语法错误age is not defined变量age不存在不能这样写function setName() {name yidaihao;//当一个变量声明的时候没有使用var关键字不管这个变量出现在哪里都是全局变量}setName();//不调用函数也行alert(name name);//nameyidaihao/script
/body 7.JS数据类型
bodyscript typetext/javascript/*1.JS中在赋值时每一个数据都有数据类型。2.JS中的数据类型原始类型Undefined、Number、String、Boolean、Null引用类型Object以及Object的子类3.ES规范ECMAScript规范在ES6之后又基于以上的6种类型之外添加了一种新的类型。Symbol4.JS有一个运算符叫做typeof可以动态的获取程序在运行阶段变量的数据类型。typeof运算符的语法格式typeof 变量名typeof运算符的运算结果是以下6个小写字符串之一undefinednumberstringbooleanobjectfunction5.在JS当中比较字符串是否相等使用完成没有equals*///两个数字求和函数function sum(a, b) {if (typeof a number typeof b number) {return a b;}alert(a , b 必须都为数字);}var retValue sum(1, 2);alert(retValue);//3var retValue2 sum(true, abc);alert(retValue2);//undefinedvar i;alert(typeof i);//undefinedvar k 10;alert(typeof k);//numbervar f abc;alert(typeof f);//stringvar d null;alert(typeof d);//object null属于Null类型但是typeof运算符的结果objectvar flag false;alert(typeof flag);//booleanvar obj new Object();alert(typeof obj);//objectfunction sayHello() {}alert(typeof sayHello);//function/script
/body Undefined类型
bodyscript typetext/javascript/*1.Undefined类型只有undefined这一个值2.系统默认赋值undefined3.手动赋值undefined*/var i;//undefinedvar j undefined;//undefinedvar k undefined;//undefinedalert(i j);//truealert(i k);//false/script
/body
Number类型
bodyscript typetext/javascript/*1.Number类型包括哪些值数字(整数、小数、无穷大Infinity)不是数字(NaN)2.isNaN()函数3.parseFloat()函数转化为数字4.parseInt()函数:转化为数字结果取整数部分5.Math.ceil()函数Math类下的ceil()函数向上取整*/var v1 1;var v2 3.14;var v3 -100;var v4 NaN;var v5 Infinity;//numberalert(typeof v1);alert(typeof v2);alert(typeof v3);alert(typeof v4);alert(typeof v5);//NaN(Not a Number,不是一个数字但属于Number类型)var a 100;var b 小明;alert(a / b);//NaN(除法结果应该是数字但是运算过程导致结果不是一个数字)alert(a b);//100小明(字符串拼接)//Infinity(当除数为0的时候结果为无穷大)alert(10 / 0);alert(10 / 3);//3.333333333335//isNaN函数:is Not a Number//结果是true表示不是一个数字结果是false表示是一个数字function sum(a, b) {if (isNaN(a) || isNaN(b)) {alert(参与运算的必须是数字);return;}return a b;}alert(sum(100, 300));//400alert(sum(100, abc));//参与运算的必须是数字undefinedalert(parseFloat(3.9999));//3.9999alert(parseInt(3.9999));//3alert(Math.ceil(2.1));//3/script
/body
Boolean类型
bodyscript typetext/javascript/*1.JS中的布尔类型只有两个值true和false(这一点和java相同)2.Boolean()函数语法格式Boolean(数据)作用将非布尔类型转换成布尔类型*/var username jack;if (username) {//默认调用Boolean()函数,相当于Boolean(username)alert(欢迎您 username);} else {alert(用户名不能为空);}//“有”就转换成真“没有”就转换成假//truealert(Boolean(1));alert(Boolean(abc));alert(Boolean(Infinity));//falsealert(Boolean(0));alert(Boolean());alert(Boolean(null));alert(Boolean(NaN));alert(Boolean(undefined));for (var i 0; i 10; i) {alert(i i);}//死循环while (10 / 3) {alert(hehe);}/script
/body String类型
bodyscript typetext/javascript/*1.在JS中字符串可以使用单引号也可以使用双引号。var s1abc;var s2abc;2.在JS中创建字符串对象两种方式第一种var sabc;第二种var s2new String(abc);//使用JS内置的支持类String注意String是一个内置的类可以直接用String的父类Object3.无论小string还是打String他们的属性和函数都是通用的。4.JS中字符串的常用属性和方法常用属性length 获取字符串长度常用函数indexOf 获取指定字符串在当前字符串中第一次出现处的索引lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引replace 替换substr 截取子字符串substring 截取子字符串toLowerCase 转换小写toUpperCase 转换大写split 拆分字符串*///小string(属于原始类型String)var x king;alert(typeof x);//string//大String(属于Object类型)var y new String(abc);alert(typeof y);//object//获取字符串长度alert(x.length);//4alert(y.length);//3alert(http://www.baidu.com.indexOf(http));//0alert(http://www.baidu.com.indexOf(https));//-1alert(http://www.baidu.com.lastIndexOf(w));//9//判断一个字符串中是否包含某个子字符串alert(http://www.baidu.com.indexOf(https) 0 ? 包含 : 不包含);//-1//replace想要全部替换需要正则表达式alert(namevalue%namevalue%namevalue%namevalue.replace(%, ));//namevaluenamevalue%namevalue%namevaluealert(namevalue%namevalue%namevalue%namevalue.replace(%, ).replace(%, ));//namevaluenamevaluenamevalue%namevalue//考点substr和substring//substr(startIndex,length)alert(abcdefg.substr(2, 4));//cdef//substring(startIndex,endIndex) 注意不包含endIndexalert(abcdefg.substring(2, 4));//cd/script
/body Object类型
bodyscript typetext/javascript/*Object类型1. Object类型是所有类型的超类。自定义的任何类型默认继承Object类中所有的属性和函数。2.Object类的属性prototype属性常用的主要是这个作用是给类动态的扩展属性和函数constructor属性3.Object类的函数toString()valueOf()toLocaleString()4.在JS中定义类new对象定义类的语法第一种方式function 类名(形参){}第二种方式类名function(形参){}创建对象的语法:new 构造方法名(实参);//构造方法名和类名一致5.在JS中类的定义和构造函数的定义同时进行。*/function sayHello() {alert(Hello!);}sayHello();//sayHello被当作函数来调用var obj new sayHello();//sayHello被当作类来new一个对象alert(obj);//[object Object]function User(no, name, age) {//no name age是形参属于局部变量//声明User类的属性this表示当前对象no name agethis.no no;this.name name;this.age age;}//创建对象var u new User(001, zhangsan, 19);//访问对象的属性alert(u.no);alert(u.name);alert(u.age);//访问对象的属性(第二种方式)alert(u[no]);alert(u[name]);alert(u[age]);Student function (name, major) {this.name name;this.major major;}var stu new Student(yidaihao, 网络工程);alert(stu.name , stu[major]);//yidaihao,网络工程function Product(pno, pname, price) {//属性this.pno pno;this.pname pname;this.price price;//函数this.getPrice function () {return this.price;}}var pro new Product(001, 计算机, 5000);var pri pro.getPrice();alert(pri);//可以通过prototype这个属性给类动态扩展属性和函数//类名.prototype.函数名Product.prototype.getPname function () {return this.pname;}//调用后期扩展的getPname()函数var pname pro.getPname();alert(pname);//给String扩展一个函数String.prototype.suiyi function () {alert(这是给String类扩展的一个函数叫做suiyi);}abc.suiyi();/script!-- Java与JS之定义类对比Java(强类型)public class User{private String username;private String password;public User(){}public User(String username){this.nameusername;}public User(String username,String password){this.nameusername;this.passwordpassword;}}JS:(弱类型)function User(username,password){this.usernameusername;this.passwordpassword;}创建对象(一样)User u1new User();User u2new User(zhangsan);User u3new User(zhangsan,123);--
/bodynull NaN undefined三者的区别
bodyscript typetext/javascript//null NaN undefined数据类型不一致alert(typeof null);//objectalert(typeof NaN);//numberalert(typeof undefined);//undefined//null等同于undefinedalert(null NaN);//falsealert(null undefined);//truealert(NaN undefined);//false//JS中两个比较特殊的运算符//(等同运算符只判断值是否相等)//(全等运算符既判断值是否相等又判断数据类型是否相等)alert(null NaN);//falsealert(null undefined);//falsealert(NaN undefined);//falsealert(1 true);//truealert(1 true);//true/script
/body 8.JS的事件
blur 失去焦点focus 获得焦点 click 鼠标单击dblclick 鼠标双击 keydown 键盘按下keyup 键盘弹起 mouseover 鼠标经过mousemove 鼠标移动mouseout 鼠标离开mouseup 鼠标弹起 submit 表单提交reset 表单重置 change 下拉列表选中项改变或文本框内容改变select 文本被选定load 页面加载完毕整个HTML页面中所有的元素全部加载完毕之后发生
注意
任何一个事件都会对应一个事件句柄在事件前加on。onXXX这个事件句柄以属性的位置存在。 8.1注册代码的两种方式
bodyscript typetext/javascript//回调函数自己写函数代码但自己不负责调用这个函数而是由其他程序负责调用该函数。//sayHello函数被称为回调函数(callback函数)function sayHello() {alert(hello js!);}/script!-- 注册事件的第一种方式直接在标签中使用事件句柄 --!-- 将sayHello函数注册到按钮上等待click事件发生之后该函数被浏览器调用。站在用户角度看sayHello函数这是正向调用。站在程序员角度看sayHello函数这是回调函数。--input typebutton valuehello onclicksayHello()!-- java中的回调函数机制public class MyClass{public static void main(String[] args){//站在用户角度看run方法这是正向调用。run();}//站在程序员角度看run方法这是回调函数。public static void run(){System.out.println(run...);}}--
/body
bodyinput typebutton valuehello idmybtninput typebutton valuehello2 idmybtn2input typebutton valuehello3 idmybtn3script typetext/javascriptfunction doSome() {alert(do some!);}/*第二种注册事件的方式是使用纯JS代码完成事件*///第一步获取这个按钮对象(document代表整个HTML页面可以直接用全部小写内置对象)var btnObj document.getElementById(mybtn);//第二步给按钮对象的onclick属性赋值btnObj.onclick doSome;//这行代码的含义是将回调函数doSome注册到click事件上在click事件发生之后才会调用。//注意千万别加小括号var btnObj2 document.getElementById(mybtn2);btnObj2.onclick function () {//这个函数没有名字叫做匿名函数也是回调函数alert(test.....);}//另一种写法document.getElementById(mybtn3).onclick function () {alert(test2.....);}/script
/body 8.2JS代码的执行顺序
!-- 页面加载完毕后load事件发生会调用ready函数 --body onloadready()script typetext/javascript/*var btnObj document.getElementById(btn);//返回null(因为代码执行到此处时idbtn的元素还没有加载到内存)btnObj.onclick function () {alert(hello js!);}*/function ready() {var btnObj document.getElementById(btn);btnObj.onclick function () {alert(hello js!);}}/scriptinput typebutton valuehello idbtn
/body
简便写法常用写法
bodyscript typetext/javascript/*1.页面加载过程中将回调函数a注册给load事件2.页面加载结束后load事件发生执行回调函数a3.回调函数a执行过程中将回调函数b注册到click事件4.用户单机hello按钮click事件发生执行回调函数b*/window.onload function () {//回调函数adocument.getElementById(btn).onclick function () {//回调函数balert(hello js!);}}/scriptinput typebutton valuehello idbtn
/body 8.4JS代码设置节点的属性
bodyscript typetext/javascriptwindow.onload function () {document.getElementById(btn).onclick function () {var mytext document.getElementById(mytext);//节点对象.有的属性mytext.type checkbox;}}/scriptinput typetext idmytextinput typebutton value将文本框修改为复选框 idbtn
/body 8.5捕捉回车键
bodyscript typetext/javascriptwindow.onload function () {var passwordElt document.getElementById(password);//回车键的键值是13//ESC键的键值是27 /*passwordElt.onkeydown function (a) {//变量a变量名自定义接受浏览器传过来的“键盘事件对象”alert(a);//[object KeyboardEvent]}*/passwordElt.onkeydown function (event) {//“键盘事件对象”有keyCode属性用来获取键值if (event.keyCode 13) {alert(正在验证请稍候...);}}}/script用户名input typetextbr密码input typetext idpassword
/body 8.6void运算符
body页面顶部brbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbrbr!-- void运算符语法void(表达式),表达式任意且不能为空运算原理执行表达式但不返回任何结果javascript:void(0)javascript不能省略其作用是告诉浏览器后面是一段JS代码--a hrefjavascript:void(0) onclickwindow.alert(test code);既保留超链接的样式同时用户点击超链接的时候执行一段JS代码页面还不会跳转/abr!-- 语法错误Uncaught SyntaxError: Unexpected token ) --a hrefjavascript:void() onclickwindow.alert(test code);既保留超链接的样式同时用户点击超链接的时候执行一段JS代码页面还不会跳转/a
/body 8.7控制语句
bodyscript typetext/javascript/*1.if2.switch3.while4.do...while5.for循环6.break7.continue8.for...in语句(了解)9.with语句(了解)*/// 创建JS数组var arr [1, 3.14, abc, true];//JS中数组元素的类型和个数都随意//遍历数组元素for (var i 0; i arr.length; i) {alert(arr[i]);}//for..infor (var i in arr) {//alert(i);//遍历数组下标alert(arr[i]);//遍历数组元素}User function (username, password) {this.username username;this.password password;}var u new User(zhangsan, 123456);//zhangsan,123456alert(u.username , u.password);alert(u[username] , u[password]);with (u) {alert(username , password);}//for..in遍历对象的属性for (var shuXingMing in u) {//alert(shuXingMing);//遍历属性名//alert(typeof shuXingMing);//shuXingMing是一个字符串alert(u[shuXingMing]);}/script!-- java:public class Test{public static void main(String[] args){int arr[]{1,2,3,4,5};int arr2[]new int[5];//等同于int arr2[]{0,0,0,0,0};String arr3[]{a,b,c};String arr4[]new String[3];//等同于String arr4[]{null,null,null};}}--
/body 9.BOM和DOM
bodyscript typetext/javascript/*1.JavaScript包括三大块ECMAScriptJS的核心语法ES规范/ECMA-262标准DOMDocument Object Model(文档对象模型)HTML文档相当于一颗DOM树网页中的节点进行增删改。BOMBrowser Object Model(浏览器对象模型)打开一个新的浏览器窗口、关闭浏览器窗口前进、后退浏览器地址栏上的地址2.DOM和BOM的区别和联系BOM的顶级对象是windowDOM的顶级对象是documentBOM包括DOM*/window.onload function () {//var btnObj window.document.getElementById(btn);var btnObj document.getElementById(btn);alert(btnObj);//[object HTMLInputElement]}/scriptinput typebutton valuehello idbtn
/body 10.DOM编程
10.1获取文本框的value值
bodyscript typetext/javascriptwindow.onload function () {//获取文本框的valuevar btnObj document.getElementById(btn);btnObj.onclick function () {var usernameObj document.getElementById(username);alert(usernameObj.value);usernameObj.value zhangsan;//修改value值}//将第一个文本框的value赋值到第二个文本框上document.getElementById(setBtn).onclick function () {document.getElementById(username2).value document.getElementById(username1).value}}/script!-- blur :失去焦点--!-- this代表的是当前input节点对象this.value就是这个节点对象的value属性 --input typetext onbluralert(this.value);hrinput typetext idusernameinput typebutton value获取文本框的value idbtnhrinput typetext idusername1brinput typetext idusername2input typebutton value将第一个文本框的value赋值到第二个文本框上 idsetBtn/body 10.2innerHTML和innerText
style typetext/css#div1 {width: 300px;height: 300px;background-color: pink;border: 1px solid red;position: absolute;top: 100px;left: 100px;}
/style
body!-- innerHTML和innerText相同点都是设置元素内部的内容不同点前者会把“字符串”当做HTML代码解释执行后者只认识字符串不认识HTML代码--script typetext/javascriptwindow.onload function () {document.getElementById(btn).onclick function () {var divObj document.getElementById(div1);//divObj.innerHTML font colorred用户名不能为空/font;//用户名不能为空divObj.innerText font colorred用户名不能为空/font;//font colorred用户名不能为空/font}}/scriptinput typebutton value设置div中的内容 idbtndiv iddiv1/div
/body 10.3正则表达式 1.正则表达式Regular Expression主要用于字符串格式匹配。
2.正则表达式最初使用在医学方面用来表示神经符号等。目前使用最多的是计算机编程领域用作字符串格式匹配如搜索方面等。
3.正则表达式实际上是一门独立的学科大部分编程语言都支持正则表达式。如在Java语言中支持c语言中也支持JS中也支持。
4.常见的正则表达式符号
. 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白格符 \d 匹配数字\b 匹配单词的开始或结束^ 匹配字符串的开始 $ 匹配字符串的结束 \W 匹配任意不是字母数字下划线汉字的字符 \S 匹配任意不是空白格符的字符 \D 匹配任意非数字的字符 \B 匹配不是单词开头或结束的位置 [^x] 匹配除了x以外的任意字符 [^aeiou] 匹配除了aeiou这几个字母以外的任意字符 * 重复零次或更多次 重复一次或更多次 ? 重复零次或一次 {n} 重复n次 {n,} 重复n次或更多次{n,m} 重复n到m次 [1-9] 表示1到9的任意一个数字 [A-Za-z0-9] 表示A到Z a到z 0到9中的任意一个字符[A-Za-z0-9-]表示A到Z a到z 0到9 -(减号)中的任意一个字符 正则表达式当中的小括号()优先级较高 5.简单的正则表达式
QQ号的正则^[1-9][0-9]{4,}$ 6.学会看懂他人编写的正则表达式: email正则^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$
7.创建正则表达式对象和调用正则表达式对象的方法
第一种创建方式 var regExp/正则表达式/flags;第二种创建方式(使用内置支持类RegExp) var regExpnew RegExp(正则表达式,flags);关于flags: g:全局匹配i:忽略大小写 m:多行搜索(ES规范制定之后才支持m)。//只有前面是普通字符串的时候m才可以使用。当前面是正则表达式的时候m不能用。正则表达式对象的test()方法 正则表达式对象.test(用户填写的字符串);//结果返回true或falsetrue:字符串格式匹配成功false:字符串格式匹配失败
bodyscript typetext/javascriptwindow.onload function () {//给按钮对象绑定click事件document.getElementById(btn).onclick function () {var emailObj document.getElementById(email);var regExp /^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$/;//或var regExpnew RegExp(^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$);var ok regExp.test(emailObj.value);//通过调用正则表达式的test()方法判断文本框对象的属性value是否符合正则表达式if (!ok) {document.getElementById(emailError).innerText 邮箱地址不合法;}}//给文本框对象绑定focus事件document.getElementById(email).onfocus function () {document.getElementById(emailError).innerText ;}}/scriptinput typetext idemailspan stylecolor: red; font-size: 12px; idemailError/spanbrinput typebutton value验证邮箱 idbtn
/body
正确输入 错误输入
错误输入出现提示错误。 文本框获得焦点
如果之前是错误输入文本框获得焦点后提示错误消失。 10.4扩展字符串的trim函数
bodyscript typetext/javascript//低版本的IE浏览器不支持字符串的trim()函数//想要在低版本的IE浏览器上运行trim()函数可以自己对String类扩展一个全新的trim()函数String.prototype.trimfunction(){return this.replace(/^\s/,).replace(/\s$/,);//去除字符串的前后空白this代表当前字符串}window.onload function () {document.getElementById(btn).onclick function () {var usernameObj document.getElementById(username);//获取文本框对象var username usernameObj.value.trim();//去除文本框内容的前后空白alert(----- username -----);//测试}}/scriptinput typetext idusernameinput typebutton value获取用户名 idbtn
/body10.5表单验证
要求
用户名不能为空用户名必须在6-14位之间用户名只能有数字和字母组成不能含有其它符号(正则表达式)密码和确认密码一致邮箱地址合法。统一失去焦点验证错误提示信息统一,在span标签中提示并且要求字体12号红色。文本框再次获得焦点后清空错误提示信息如果文本框中数据不合法要求清空文本框的value最终表单中所有项均合法方可提交
用户名 密码 邮箱地址 提交表单 完整代码 HTML
body!-- 这个表单提交应该使用post这里为了检测所以使用get --form actionhttp://localhost:8080/jd/save methodget iduseFormtabletrtd用户名/tdtdinput typetext nameusername idusername/tdtdspan idusernameError/span/td/trtrtd密码/tdtdinput typepassword namepwd idpwd/td/trtrtd确认密码/tdtdinput typepassword idpwd2/tdtdspan idpwdError/span/td/trtrtd邮箱/tdtdinput typetext nameemail idemail/tdtdspan idemailError/span/td/tr/tableinput typebutton value注册 idsubmitBtninput typereset value重置/form
/body
css
stylespan {color: red;font-size: 12px;}
/style
JS
script typetext/javascriptwindow.onload function () {var usernameErrorObj document.getElementById(usernameError);//获取idusernameError的span标签的对象var usernameObj document.getElementById(username);//获取idusername的input标签的对象//给用户名文本框绑定blur事件usernameObj.onblur function () {var username usernameObj.value;//获取用户名username username.trim();//去除用户名的前后空白if (username) {//用户名不为空if (username.length 6 username.length 14) {//用户名长度合法var regExp /^[A-Za-z0-9]$/;var ok regExp.test(username);if (ok) {//用户名匹配正则表达式用户名最终合法}else {//用户名不匹配正则表达式usernameErrorObj.innerText 用户名只能由数字和字母组成;}} else {//用户名长度不合法usernameErrorObj.innerText 用户名长度必须在6-14位之间;}}else {//用户名为空usernameErrorObj.innerText 用户名不能为空;}//if(username.length0){}//if(username){}}//给用户名文本框绑定focus事件usernameObj.onfocus function () {if (usernameErrorObj.innerText) {//如果有错误提示信息则清空文本框的value值usernameObj.value ;//修改value值}usernameErrorObj.innerText ;//清空错误提示信息}var pwdErrorObj document.getElementById(pwdError);var pwdObj document.getElementById(pwd);var pwd2Obj document.getElementById(pwd2);//给确认密码框绑定blur事件pwd2Obj.onblur function () {var pwd pwdObj.value;var pwd2 pwd2Obj.value;if (pwd ! pwd2) {pwdErrorObj.innerText 密码不一致;}}//给确认密码框绑定focus事件pwd2Obj.onfocus function () {if (pwdErrorObj.innerText) {pwd2Obj.value ;}pwdErrorObj.innerText ;}var emailObj document.getElementById(email);var emailErrorObj document.getElementById(emailError);//给邮箱文本框绑定blur事件emailObj.onblur function () {var email emailObj.value;var regExp /^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$/;var ok regExp.test(email);if (!ok) {emailErrorObj.innerText 邮箱地址有误;}}//给邮箱文本框绑定focus事件emailObj.onfocus function () {if (emailErrorObj.innerText) {emailObj.value ;}emailErrorObj.innerText ;}var submitBtnObj document.getElementById(submitBtn);//获取按钮标签的对象//给按钮绑定click事件submitBtnObj.onclick function () {//使用JS代码触发focus、blur事件不需要人工操作usernameObj.focus();usernameObj.blur();pwd2Obj.focus();pwd2Obj.blur();emailObj.focus();emailObj.blur();if (usernameErrorObj.innerText pwdErrorObj.innerText emailErrorObj.innerText ) {var useFormObj document.getElementById(useForm);useFormObj.action http://localhost:8080/jd2/save;//修改提交地址useFormObj.method post;//修改提交方式useFormObj.submit();//调用提交函数}}}/script 10.6复选框的全选和取消全选
bodyscript typetext/javascript// window.onload function () {// var firstChkObj document.getElementById(firstChk);// firstChkObj.onclick function () {// var hobbys document.getElementsByName(hobby);//根据name获取所有元素(数组)// //判断第一个复选框的选中状态为true或false// if (firstChkObj.checked) {// //全选// for (var i 0; i hobbys.length; i) {// hobbys[i].checked true;// }// } else {// //取消全选// for (var i 0; i hobbys.length; i) {// hobbys[i].checked false;// }// }// }// }window.onload function () {var firstChkObj document.getElementById(firstChk);var hobbys document.getElementsByName(hobby);//根据name获取三个复选框标签(数组)firstChkObj.onclick function () {for (var i 0; i hobbys.length; i) {hobbys[i].checked firstChkObj.checked;}}//对以上数组进行遍历,三个复选框都绑定了click事件for (var i 0; i hobbys.length; i) {hobbys[i].onclick function () {var checkedCount 0;for (var i 0; i hobbys.length; i) {if (hobbys[i].checked) {checkedCount;}}firstChkObj.checked (hobbys.length checkedCount);//总数量和选中的数量相等的时候第一个复选框选中}}}/scriptinput typecheckbox idfirstChkbrinput typecheckbox namehobby valuestudy学习brinput typecheckbox namehobby valueexercise锻炼brinput typecheckbox namehobby valuetravel旅行br
/body 10.7获取下拉列表的value
body!-- 通过change事件获取选项中的valuethis代表当前元素 --select idprovinceList onchangealert(this.value);option value--请选择省份--/optionoption value001湖南/optionoption value002湖北/optionoption value003广东/optionoption value004广西/option/select/bodybody!-- 通过回调函数给下拉列表标签绑定change事件 --script typetext/javascriptwindow.onload function () {var provinceListObj document.getElementById(provinceList);provinceListObj.onchange function () {alert(provinceListObj.value);//获取选项中的value}}/scriptselect idprovinceListoption value--请选择省份--/optionoption value001湖南/optionoption value002湖北/optionoption value003广东/optionoption value004广西/option/select
/body
实际开发中 这个List集合通过浏览器解析后就会得到一个新的关于河北省市区的下拉列表。 10.8内置对象
10.8.1Date
获取并输出系统时间输出具有本地语言环境日期格式的时间输出自定义日期格式的时间获取并输出毫秒数
body!-- 关于JS中内置的支持类:Date,可以用来获取时间/日期 --script typetext/javascriptvar nowTime new Date();//获取系统时间document.write(nowTime);//输出于HTML页面document.write(br);//转换成具有本地语言环境的日期格式nowTime nowTime.toLocaleString();document.write(nowTime);document.write(br);//当以上格式不是自己想要的可以通过日期获取年月日等信息自定义日期格式var t new Date();var year t.getFullYear();//2022(以全格式返回年信息)var month t.getMonth();//月份是0-11//var dayOfWeek t.day();//获取一周的第几天(0-6)var day t.getDate();//获取日信息document.write(year 年 (month 1) 月 day 日);document.write(br);//获取毫秒数(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)var times t.getTime();document.write(times);//一般使用毫秒数当时间戳(timestamp)document.write(br);document.write(new Date().getTime());//一行代码获取毫秒数/script
/body
显示网页时钟setInterval函数与clearInterval函数
bodyscript typetext/javascriptfunction displayTime() {var t new Date();var strTime t.toLocaleString();document.getElementById(timeDiv).innerText strTime;}function start() {v window.setInterval(displayTime(), 1000);//每隔1000毫秒1秒调用displayTime()函数,v是全局变量}function stop() {window.clearInterval(v);//终止系统时间}/scriptinput typebutton value显示系统时间 onclickstart();input typebutton value终止系统时间 onclickstop();div idtimeDiv/div
/body 10.8.2Array
bodyscript typetext/javascript//创建长度为0的数组var arr [];alert(arr.length);//0//数据类型任意var arr2 [1, 3.14, abc, true];alert(arr2.length);//4arr2[5] test;//自动扩容下标越界没问题document.write(br);//遍历for (var i 0; i arr2.length; i) {document.write(arr2[i] );//1 3.14 abc true undefined test}//另一种创建数组对象的方式var a new Array();alert(a.length);//0var b new Array(2);//2表示长度alert(b.length);//2var c new Array(1, 3);alert(c.length);//2var a [1, 2, 3, 9];var str a.join(-);//元素与元素之间用-相连alert(str);//1-2-3-9a.push(10);//在数组a的末尾添加一个元素(数组长度1)alert(a.join(-));//1-2-3-9-10var endElt a.pop();//在数组a的末尾弹出一个元素(数组长度-1)alert(endElt);//10//注意JS中的数组可以自动模拟栈的数据结构先进后出后进先出//push 入栈//pop 出栈//反转数组a.reverse();alert(a.join(-));//9-3-2-1/script
/body 11.BOM编程
11.1window.open和window.close
1.open和close.html
bodyscript typetext/javascript// 1.BOM编程中window对象是顶级对象代表浏览器窗口。// 2.window有open和close方法可以开启窗口和关闭窗口。/scriptinput typebutton value开启百度(新窗口) onclickwindow.open(http://www.baidu.com);brinput typebutton value开启百度(新窗口) onclickwindow.open(http://www.baidu.com,_blank);brinput typebutton value开启百度(当前窗口) onclickwindow.open(http://www.baidu.com,_self);brinput typebutton value开启百度(父窗口) onclickwindow.open(http://www.baidu.com,_parent);brinput typebutton value开启百度(顶级窗口) onclickwindow.open(http://www.baidu.com,_top);brbrinput typebutton value测试打开新窗口 onclickwindow.open(2.open.html);
/body
2.open.html
bodyinput typebutton value测试关闭当前窗口 onclickwindow.close();
/body 11.2window.alert()和window.confirm()
windows.alert()用来弹出消息框windows.confirm()用来探出确认消息框。
bodyscript typetext/javascriptfunction del() {/*var ok window.confirm(亲确认删除数据吗);返回值true或falseif (ok) {alert(delete data...);}*/if (window.confirm(亲确认删除数据吗)) {alert(delete data...);}}/scriptinput typebutton value弹出消息框 onclickwindow.alert(消息框)!-- 删除操作的时候要先得到用户的确认 --input typebutton value弹出确认框(删除) onclickdel();
/body11.3将当前窗口设置为顶级窗口
应用场景 页面4
bodyiframe src5.html width500px height500px frameborder100/iframe
/body
页面5
bodyscript typetext/javascriptfunction setTop() {if (window.top ! window.self) {//如果当前窗口不是顶级窗口window.top.location window.self.location;//则将当前窗口设置为顶级窗口//window.self.location是当前窗口的地址即页面5的地址//window.top.location是顶级窗口的地址即页面4的地址}}/script页面5brxxxxinput typebutton onclicksetTop(); value如果当前窗口不是顶级窗口则将当前窗口设置为顶级窗口
/body
打开页面4点击内联框架中的按钮 当前窗口变为顶级窗口 11.4history和location对象
页面6
body!-- 后退相当于撤销前进相当于恢复--a href7.html页面7/ainput typebutton value前进 onclickwindow.history.go(1)
/body
页面7
bodyinput typebutton value后退 onclickwindow.history.back()input typebutton value后退 onclickwindow.history.go(-1)
/body
设置浏览器地址栏上的URL
bodyscript typetext/javascriptfunction goBaidu() {// var locationObj window.location;// locationObj.href http://www.baidu.com;//设置浏览器地址栏上的URLwindow.location.href http://www.baidu.com;//一行代码搞定window.location http://www.baidu.com;//href可省略document.location.href http://www.baidu.com;//window可以换成documentdocument.location http://www.baidu.com;//href可省略}/scriptinput typebutton value百度 onclickgoBaidu()
/body 11.5通过浏览器向服务器发送请求的方法
直接在浏览器地址栏上输入URL然后回车提交form表单 actionxxx超链接 hrefxxxwindow.open window.open(xxx) window.location window.locationxxxdocument.location document.locationxxx
注意以上所有的请求方式均可以携带数据给服务器但只有通过表单提交的数据(用户填写表单内容)才是动态的。 12.JSON
JSON是一种标准的轻量级的数据交换格式。其英文全称为JavaScript Object NotationJavaScript对象标记简称JSON。在实际的开发中有两种数据交换格式使用最多一个是JSON另一个是XML。 JSON体积较小易解析。目前非常流行90%以上的系统采用JSON。系统A与系统B交换数据的话都是采用JSON。 XML体积较大解析麻烦但是语法严谨。通常银行相关的系统之间进行数据交换的话会使用XML。
XML
HTML和XML有一个父亲: SGML (标准通用的标记语言。) 12.1简单JSON对象
代码格式
var jsonObj{ 属性名:属性值, 属性名:属性值, 属性名:属性值 ...
};
bodyscript typetext/javascript// 不使用JSON对象//定义类Student function (sno, sname, sex) {this.sno sno;this.sname sname;this.sex sex;}var stu new Student(001, zhangsan, 男);//创建对象alert(stu.sno , stu.sname , stu.sex);//访问对象的属性//创建JSON对象(无类型对象)var studentObj {sno: 002,sname: 李四,sex: 男};alert(studentObj.sno , studentObj.sname , studentObj.sex);//访问JSON对象的属性//创建JSON数组,每一个JSON数组元素就是一个JSON对象var students [{ sno: 001, sname: zhangsan, sex: 男 },{ sno: 002, sname: lisi, sex: 男 },{ sno: 003, sname: wangwu, sex: 男 },];//遍历数组对象for (var i 0; i students.length; i) {var stuObj students[i];alert(stuObj.sno , stuObj.sname , stuObj.sex);}//访问JSON对象的两种方式alert(json.username);//zhangsanalert(json[username]);//zhangsan/script
/body
面试题 问在JS中[]和{}有什么区别
答 []是数组{}是JSON
举例
JS中的数组: var arr[1,2,3,4,5];//[]JSON: var jsonObj{email:zhangsan123.com,age:25};//{} java中的数组int arr[]{1,2,3,4,5};//{} 12.2复杂JSON对象
bodyscript typetext/javascript// JSON对象的属性值的数据类型随意// JSON对象的属性中可以嵌套JSON对象var user {usercode: 001,username: 张三,isStudent: true,//属性值是boolean类型address: {//属性值是一个JSON对象city: 北京,street: 大兴区,zipcode: 123456},hobby: [study, exercise, travel]//属性值的数据结构是一个数组};//最外层的JSON对象的最后要加;//访问人名以及居住的城市alert(user.username 居住在 user.address.city);//设计JSOM格式的数据这个JSON格式的数据可以描述整个班级中每一个学生的信息以及总人数信息。var jsonStudentData{total:3,students:[//JSON数组{sno:001,sname:zhangsan,sex:男},{sno:002,sname:lisi,sex:男},{sno:003,sname:wangwu,sex:男}]};/script
/body 11.3eval函数
为什么要使用eval函数
java连接数据库查询数据库之后将数据在java程序中拼接成JSON格式的“字符串”,将JSON格式的字符串响应到浏览器也就是说java响应到浏览器上的仅仅是一个“JSON格式的字符串”,还不是JSON对象可以使用eval函数将JSON格式的字符串转换成JSON对象。本质上来说是因为eval函数可以去掉json字符串两侧的引号。
script typetext/javascript// eval函数的作用:将字符串当做一段JS代码解释并执行window.eval(var i100;);alert(i i);//i100var fromJava {\name\:\zhangsan\,\password\:\123\};//java程序发过来的json格式的“字符串”,加转义字符是为了双引号的匹配window.eval(var jsonObj fromJava);//JSON格式的字符串转换成JSON对象alert(jsonObj.name , jsonObj.password);//访问JSON对象,在前端取数据/script 11.4设置table的tbody
底层java语言中的JDBC查询数据库中的数据,发给浏览器浏览器将JSON格式的字符串转换成JSON对象(数据)。(实际开发中是这样的这里我们简单化已经给出了JSON数据)tbody/tbody中本身没有数据。设计代码使得单击按钮就能将JSON数据显示到页面上。
bodyscript typetext/javascript//有这些JSON数据var data {total: 3,emps: [{ eno: 001, ename: 张三, sal: 700.0 },{ eno: 002, ename: 李四, sal: 800.0 },{ eno: 003, ename: 王五, sal: 900.0 }]};//希望把数据展示到table中window.onload function () {var displayBtnObj document.getElementById(displayBtn);displayBtnObj.onclick function () {var emps data.emps;//JSON数组var html ;for (var i 0; i emps.length; i) {var emp emps[i];//JSON数组每一个元素即为一个JSON对象这里是指一个员工//字符串拼接html tr;html td emp.eno /td;html td emp.ename /td;html td emp.sal /td;html /tr;}document.getElementById(emptbody).innerHTML html;//把“字符串”当做HTML代码解释执行document.getElementById(count).innerHTML data.total;}}/scriptinput typebutton value显示员工信息列表 iddisplayBtnh2员工信息列表/h2hrtable border1px width50%theadth员工编号/thth员工姓名/thth员工薪资/th/theadtbody idemptbody!-- trtd001/tdtd张三/tdtd700.0/td/trtrtd002/tdtd李四/tdtd800.0/td/trtrtd003/tdtd王五/tdtd900.0/td/tr--/tbody/table总共span idcount0/span条数
/body 12.jQuery
12.1初始jQuery及公式 jQuery是一个快速、简洁的JavaScript框架是继Prototype之后又一个优秀的JavaScript代码库框架于2006年1月由John Resig发布。jQuery设计的宗旨是“write LessDo More”即倡导写更少的代码做更多的事情。它封装JavaScript常用的功能代码提供一种简便的JavaScript设计模式优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为具有独特的链式语法和短小清晰的多功能接口具有高效灵活的CSS选择器并且可对CSS选择器进行扩展拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器如IE 6.0、FF 1.5、Safari 2.0、Opera 9.0等。 [1] jQuery库下载地址
Download jQuery | jQuery 第一个是生产版已编译已压缩
第二个是开发版未编译未压缩
jQuery cdn加速插件下载
为什么
当用户访问自己的站点时从服务器加载文件每个服务器同时只能下载2-4个文件这样就会降低文件的执行效率如果多用几个服务器这样同时加载文件的个数就是(2-4)*服务器个数所以我们把jQuery放到CDN上就是为了提高网站加载文件的效率。
怎么做
在百度上搜索关键字随便找一个复制JS代码。
这里我选择了这个script srchttp://code.jquery.com/jquery-2.1.1.min.js/script
body!-- 导入下载下来的JQuery库 --script srclib/jquery-3.6.0.js/script!-- 也可以导入JQuery cdn --!-- script srchttp://code.jquery.com/jquery-2.1.1.min.js/script --script typetext/javascript/*//不使用JQuerywindow.onload function () {document.getElementById(testjQuery).onclick function () {alert(hello jQuery!);}}*/window.onload function () {/*$(选择器的id).事件(function(){})*/$(#testjQuery).click(function () {alert(hello jQuery!);})}/scripta href idtestjQuery点我/a
/body 12.2选择器
bodyscript srclib/jquery-3.6.0.js/scriptscript typetext/javascriptwindow.onload function () {/*document.getElementsByTagName(input).onclickfunction(){alert(测试标签选择器!);}*/$(input).click(function () {alert(测试标签选择器!);})/*document.getElementsByClassName(a1).onclickfunction(){alert(测试类选择器);}*/$(.a1).click(function () {alert(测试类选择器);})/*document.getElementById(a1).onclickfunction(){alert(测试id选择器);}*/$(#a1).click(function () {alert(测试id选择器);})}/scriptinput typebutton value测试标签选择器a href classa1测试类选择器/aa href ida1测试id选择器/a
/body
公式(与css中选择器相对应)
标签选择器$(标签名).事件类选择器$(.类名).事件id选择器:$(#类名).事件
文档工具站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm 12.3事件
style#divMove {width: 500px;height: 500px;border: 1px solid red;text-align: center;}
/style
bodyscript srclib/jquery-3.6.0.js/script!-- 要求获取鼠标当前的一个坐标 --div iddivMove在这此区域移动鼠标试试/divmouse:span idmouseMove/spanscript typetext/javascript//当网页元素加载完毕之后执行回调函数,等同于$(document).ready(function(){...$(function () {$(#divMove).mousemove(function (e) {$(#mouseMove).text(x: e.pageX y: e.pageY);})});/script
/body 12.4操作DOM
//文本操作
$(#div1).text(123);//document.getElementById(div1).innerText123;$(#div1).html(strong123/strong);//document.getElementById(div1).innerHTMLstrong123/strong;//css的操作
$(div1).css(color,red);//元素的显示和隐藏隐藏本质display: none
$(div1).show();
$(div1).hide();13.Web前端基础推荐教程
w3school:w3school 在线教程
菜鸟教程:菜鸟教程 - 学的不仅是技术更是梦想
