00:00
啊。这边呢,复制一下咱们。接过来啊,改成。012。这个011呢,我把路径拿一下。然后呢,我把这个部署一下。新疆。走。贴过来删除,OKOK,然后这边咱们给它关了。来这边看一看它怎么走。跳转的最外页面已经做了,这边该该干什么了?修改用户信息吧。修改用户信息之前需要校验表单吗?需要吧,好,接下来讲一个。面向对象的javascript。嗯。注意听啊呃,修改用户信息啊,修改用户信息之前需要校验什么表单,表单合法之后再修改吗?再修改来啊,第一种方式印象过程呢,JS代码,第二种方式主要是讲面向对象的GSM啊,面向对象和面向过程主要是说这个啊,这个版本是咱们今天上午比较重要的东西啊,主要是讲它像这个以前都做过了啊行了,呃,我们来看一下,把服务器提一下。
01:43
好了,没事儿打开。打开之后呢,我们来点登录啊,点这个点用户管理,我们来点一下那个叫。修改吧,啊点修改这边是不是有星号啊,星号行了这个啊。
02:04
星状就代表不能为空吧,不能为空啊,不能为空,不能为空,并且呢,这个也不能为空,而且这个和这个还得干什么一致吧,一致性校验啊,非空性验证,我们就来说一下这个东西,先用第一种方式是大家所熟悉的打开web root,打开system,是这个了吧,跟这个没关系吧,是更新这个页面啊,在这个J上呢,我们这边有很多信息。啊,就是这些信息我们加ID了吗?ID加了有一个忘加了啊。这个ID加了,这个ID加了,这个ID也加了这个机构类型,是不是ID没加。这个机构类型的ID name是什么?Org type ID是什么呀?Or type吧,都给上啊,ID都给上,咱们先用第一种方式啊,就是大家所熟悉的那种方式,咱们这边呢,要修改了吧。
03:05
修改怎么写,他应该是点的谁?保存,保存在哪呢?保存那个图片在哪呢。Save是吧?啊,这跑这。来就是这个吧,Save是吧,你看啊,这个save呢,它这边有一个什么uncle click吧,那这边呢,就叫do how对吧。好,就这样,你看它最初的是什么,最初的时候你点它是不是就跳到user HT呢?啊,这个页面是不是就是分页查询这改一改啊,还是这个叫do update啊,把这函数写一下,呃,写这个的话,咱们需要在这写一个什么function叫do update对吧?那么这边呢,你要改就加个form表单吧,加上S叫斜杠A吧,来这matter给上去,Post name写上去,You form farm捡了还等什么,下边吧。
04:16
放在下面,好,那将来会提交这个表单,那这样的话咱们就来看一看这边校验表单吧,OK validate什么放满这样表达,如果OK怎么办?就提交吧,刚我们点什么放的是这个吧,点some吧,点啊3ME提交。校验表单,表单合法则提交,那这样的话,在这有个方法吧,Function啊叫valid form,第一种方式,面向good的JS代码开发效率较低啊,我们先把这个写一写吧先啊写了之后呢,是讲面向对象的啊,怎么去写好这个大家理解吧,注意啊,你记能记住吗?
05:12
我改在哪?你记能记住吗?记不住啊,不可能啊,你要能记住就神人了,这个真是这样,你你记不住啊,我改的东西太多了,记不住,但是有规律吗?有规律啊,有规律这个所不是说没规律啊。这个东西你点哪入手,点点这个呀,点这个你就找他吧,找他你就on click吧,你on click就调函数吧,你函数一调就提交表单吧,你一提交表单,你是不是得给表单起个名啊,所你是不是得写个报表单啊,你都写上,另外还有一个,你教验的时候需要ID吗?这个ID是不是都得加上啊,就这个,我希望你到这个时候不要记啊,你记东西没有用,你记不住。你以后开发的是你自己的项目,跟内容没有关系,所以那个时候我希望啊,就是能够有一有一点啊,就是能。能够知道大概思路是怎么走的,一步步走就行了啊,学思路吧啊记东艺肯定记不住的啊,咱教练表单吧,这块怎么校验,咱们叫Yoga Yoga name需要一个,还有一个Yoga password吧,还有一个是take,什么password,还有个是什么over type,是是就这就这四个,来这边的话,咱们获取一下叫document,你看document.get element by ID,谁呢?就user name吧,行了,这个我就复制一下得了啊,复制得了把它放到这,放到这,放到这,放到这,这样的话,咱们是不是可以把这个从这这样开发是不太合法的啊。
06:40
是不,前面有可能出错呀,这个这个是不是必须填ID呀,啊行就先这么写吧,啊我就省卵劲嘛,就这样省览劲一会就错了啊有可能这个出现一个问题,哎,如果什么怎么写来着,如果user name.value啊等于等于这个,那咱们是不是alert呀,就说那个叫什么用户姓名不能为空,请填写,然后直接user name.focus return for。
07:14
嗯,是吧,这需要继续啊,这个一样吧,你这拿过来放到这就行了啊,这个无非就是那个叫什么user password吧,这个啊user password来pass.value啊,要是等于等于这个的话叫用户什么密码吧,嗯,这个改成u password吧,行了,继续吧,那这样完了复制一下啊,复制这个吧啊。我不敢复制这个啊,有可能这个是错的。复制这吧啊。来这个叫check password复制一下啊,咱们贴过来,这叫确认密码吧,确认密码不能为空,来这边咱们写上check passwor没错吧,那行继续啊,这叫or type,咱们type复制咱们放到这啊,它value接下来就叫机构类型啊类这边写机构类型没错吧。
08:11
行,就这样了啊,这边判断一下,如果什么叫user password.value不等于check password.value是吧?咱们就alert吧,算什么?这个用户密码和确认密码不一致,请重新填写了,这样的话就user password.value等于空白。然后呢,Take password their value等于空呗,User password.focus呗,Return for吧,最后别忘了还有一个什么呢,行啊啊,这最初的就这么写了,你看都费劲的那个来点它来点中这个,然后点修改来这个不写。
09:03
不写不行吧,得写上啊来写上去,接下来这个清掉啊,那这个不写不行吧,得写上来,这个清掉,这个清掉好,这个都清掉,这个不写不行啊,写上去吧,啊点他说不一致,重新写吧,是吧,重新写好,这边选这个是吧,他说不行啊,得选啊选中了,选中你就404了。是吧,提交表单嘛,提交表单就就底层没写吗?底层没写不就这个,反正咱们这个校验呢,大概呢是起作用了啊,但是呢,我们这么写肯定太费劲了,你看这个代码和这个代码,还有这个代码,还有这个代码,这不都一致吗?这不都都都一样吗,你看。有同老说我们,我说不一样啊,这U内吗?你是抬杠,这不是不一样,你看啊。你。人和人都是都是一样的,对吧,但是有有没有个性的东西啊,有啊。
10:02
是吧,你有姓名。说你同桌也有姓名,但是姓名具体一样吗?不一样,他有ID吗?对,它有ID吗?ID具体的值一样吗?可以啊。就是说你明白不明白,这里边你看到一种有对象存在吗?它是不是一个对象。我如果能够把这几个看成四个对象的话。这四个对象吗,是吧。是个对象,对象,对象,对象全是对象。关键是呢对象,你谈对象之前应该先谈累,对吗?所以应该先去抽象类是吧,抽象类的话,类应该有属性对吧。所以你给我抽象出来属性来,怎么抽象属性啊,属性有几个。
11:09
有几个属性行吧,先不说这个了啊。关闭所有好了,这边呢,我先做了一个面向过程的JS代码,开发效率较低。嗯,咱们这么着吧,先讲一讲加图里面的面练对象,讲完之后咱们再做这个东西,嗯。现在回顾一下啊。第一种方式,第二个方式。行了,这个先放一边去啊,打开document在这呢,我写上去零六。面向对象的JS。来把它打开。我先把这个说了一下,之后呢,我们再回头来再来看。
12:00
再来看这个东西啊。啊,这边呢,先讲讲,先讲一讲这个,我先先得说一下关于这源代码进行顺序啊,先说这个关于。JS代码的执行顺序行吧,先讲这个,然后再讲面向对象啊。点右键打开。来这边呢,有一个头头啊,然后这边呢,我加一个title title啊,是关于JS代码执行顺序,关于JS代码的执行顺序,接下来这边呢,我就加一个script行了,Script script好了,这边呢。
13:00
这边我写这么一个代码,大家看一看,我在这加一个body body里边呢加一个嗯,Input type。加一个div吧,Div div都有ID吧,加上ID啊,叫my div行了,就这么着了,接下来呢。我想获取div标签,并且设置div标签中的H代码,怎么写这个代码?document.get element by ID吧?ID这块呢,写上去是这个吧。把这个拿过来放在这啊,这样的话是不是就拿到了,拿到之后呢,它里边有一个属性吧,Div和span啊都有一个属性,属性啊叫做什么in h。
14:02
这个你用过吗?用过是吧,咱直接用了啊,不查了,Div点什么in写上啊,嗯,这。是一个div标签或者是图层吧,这边呢,我加上去啊H1标记,然后再加上去he标记,然后这边呢,我加上句a center啊,放字体color颜色。灰色的啊,加一个啊行吧,现在能看懂吧。程序开始执行,就拿div,设置div里边这个这个东西吧,设置div。居中也别居中了啊,就直接这么着得了,你要想居中,应该设置div的居中行,大家看这个程序能执行吗?
15:08
啊。能不能执行这个。这个不能执行吗?啊,这个执行不了哪有错。啊。哪错呀?这个来打开。他执行不了啊,有问题。来点它是啊,是不是有问题啊,这啥问题啊。直接暴露在script标签里边的JS代码在我们HTM1链加载时执行,并且遵守自上而下的顺序执行。当我们执行这段代码的时候,这个并没有在网页中加载document.get element by ID获取不到任何数据。
16:07
因为程序执行到第八行的时候,第17行。还没有加载呢。明白吧,所以他报什么错呀?My div为空或不是对象是吧?第11行。他说这个是空,不是对象证明这个是没有获取到啊,没获取到这证明为什么它获取不到啊。因为这个spring标签,它会不会在这个页面打开时,这个里边执行,执行的时候先执行它,再执行它在上R线顺序执行,在执行这边代码的时候,这个加载了吗?没有啊,所以这个这个很正常啊,你要想执行有一个办法。什么办法呀?我教你什么办法啊,弄个位置就行。
17:02
加上函数不用啊。挪到这行吗?兄弟。这可以了啊,你想一想你的页面加载完了,我随后第二先开始执行了,那执行了这边拿到吧,拿到之后就吧可以。试试啊,来刷。可以了。嗯。我再强调一下,SC标签不一定非得放在投标记中。啊。为什么呢?你想一想,HTML是H,前面JS是JS,这是两种不同的语言对吗?它有位置限制吗?啊,我非得放在你头里边。不会啊,不是这样。
18:00
当这个头这边加载的时候,它会执行这个程序,但是这个程序呢,拿不到是很正常的。啊,刚才还有同学说还有一种方式,哪种方式啊,我可以这加一个什么按钮吧,来,我就在这加一个按钮gotten吧,Value写上什么就显示什么,显示div吧,怎么做,在这加个on click吧,啊click那写上去对吧,I div行了显示,咱把这个复制一下,咱们从这写上去一个函数function对不对,Function写上,然后呢,叫E或者是还有一个show吧,从受吧,受得了啊,受受啊,那瘦的话你这这边来。贴过来行吧,那瘦的话来怎么写啊,是不是这这个代码就写进去就行了,是这个吧,复制一下啊,你放到这就行,接下来把这个复制一下吧,啊来你放到这行不行,这样做行不行啊,这个函数它是放在这个此刻标签里面,我说过函数呢,其实你要是不调用它是不会执行的,这个库往下加载,加载到这个函数的,它只会把这个函数声明,对吗。
19:12
都加载完,只有你点这个按钮,发生一个事件的时候,函数是不是才会执行。所以我这说一说啊,直接道路在script标签中的啊,JS代码。在H下面页面加载时执行啊,页面加载时执行,并且啊是自上而下的顺序加载,而且加载会影响到什么,谁的加载啊,而且加载和H前面是什么同步的吧,好听清楚是同步的吧,也就是说这个加载的时候,H面这个下面能执行吗?不能它在加载,都是都是一样的,明白吧,他怎么走我也怎么走。
20:03
都是一样的啊,所以而且加载和什么是同步的啊,所以注意什么问题啊,注意ID问题。由于页面没有加载,没有加载完毕啊,所以。此时获取不到任何元素啊,不到任何元素。谁获取不到元素吧,元素行这样。但是这个函数呢,函数是在什么时候,函数在H前面页面加载时声明嘛,啊声明不执行对吧?啊不执行什么时候执行啊,只有调用的时候啊,只有调用的时候函数执行啊函数分两个过程吗?函数啊分两个过程,哪个过程啊,声明好了调用对了,声明和调用这个知道行咱试试啊点一下吧,我点一下看行不行啊,点完之后它会执行这个函数,行,我试一下刷新。
21:09
那有点。行不行啊行,我再来个隐藏,能隐藏吗?能隐藏吗?可以吧,来叫had hadde行不行,Hadde啊,这简单啊,就hadde就行了,来function叫hi的div,那这样的话你这边怎么写啊,那这个拿过来吧,直接拿过来哈,这边直接给它设置成什么。空白行不行?来刷新显示啊啊。显示个音啊,这是不是显示啊,随便改一改,这叫。隐藏隐藏啊,你看一下是最简单的嘛,显示隐藏显示隐藏吧,这是个div吧。大家看到我家换行了吗?
22:02
我在这并没有加换行对吧,但是这个东西按钮换行了嘛。按钮是不是在下边一行呢,所以div独占行啊缺省情况下啊,缺省情况下div独占一行,我如果此时把这个div。改一改,改成呢。Span和div都可以看成图层啊,来刷新走。哟,这边怎么还是一行,我看看啊。哦,这有H1,我说呢,这这这干扰了啊h he干扰了,来把它去掉,那是不是也应该再测一下div啊。是失误了啊,这东西我先再来一遍啊,看div是不是独占一行,我先想说明一个问题。
23:06
来刷新点它。是吧,是不是独占一行啊,独占一行啊,那这样我看看这个SPA啊。我把这个去掉,用SPA来刷一下来点它啊,你看是吧,它它不是独自占一行啊,所以你你看清楚啊,这个span和div有区别。不会独占行,缺省情况下啊,缺省情况下不会独自占一行啊,占一行就这点区别啊,两个都可以看成图层,Div和span都可以看作图层。这块我说一下啊,主要是讲哪个知识点呢,想说一下这个此刻的标签,它的它的它这个里面代码进行顺序啊,希望大家能够理解的顺序啊,直接暴露在我们此刻的标签里面,场景会执行。
24:06
这个,但是如果这个函数的话,只是声明吧,只有当你调的时候,是不是才会执行啊,知道顺序啊,知道顺序问题,这讲一讲顺序,另外讲一讲div和SPA的一个简单的区别啊,行,这个就说到这儿,嗯,这个关了啊,接下来我们继续啊,把这个讲了,面向对象说一下。零七叫面向对象的什么CS吧?来我们看一下这边呢,我把它打开,打开之后呢,一起看一下啊样对象HTML,然后呢,接下来呢,在这边我写上去头头啊在这呢,我加一个title头来我写啊在我面向对象的啊,面向对象的JS。
25:01
嗯,这个类会大家会定义吗?嗯,类会定义吗?定义类怎么定义啊,定义类的第一种方式怎么怎么写function,比如说manner吧,啊,这是一个对吧,这个写上去name。Salary吧,薪水吧。这。行了,列壮啊,这个叫员工的名字啊,这边怎么写啊。哎,Name name吧啊,This their job job吧,我这边可以随便写啊,AB对吧,这边改成什么A对吧,就改成什么对吧?呃,这是第一种方式啊。
26:04
以下既是一个函数啊,又是一个类的定义,需要注意一个问题啊,JS中类的声明啊,类的声明和构造方法的定义和构造方法的定义啊,和构造方法的定义是合为一体的,这既是一种类型的声明啊类的什么声明,同时又是一个函数叫什么函数啊,构造方法的定义,而这个就是成圆变量啊,定义成员变量啊,定义成员变量。两个层面的一个一类名词,这样还可以定义方法吧,定义成分方法吧,算方法的定义啊,这点啊,比如说walk function跟上去函数是吧。
27:08
这边的话,我们可以给一个时间吧,比如time。给个时间啊,就是比如worktime啊,随便给一个吧,给一个将来调这个方法的时候需要传参吧,这边写上去啊,说alert是吧,嗯,这个,呃,This there name啊,写上去,嗯,Is working啊,Time等于加上吧,啊,Whattime,行了。这能看懂吗?定义个方法吗?接下来我在这是不是可以创建对象啊,怎么创建对象来new你的,你new这个运算符是不是只能调构造方法呀,这是构造方法吧,你调构造方法里面需要几个参数啊,两个吧啊我不传行不行啊。可以吧,不传的话,这个A和B就是安迪办的呀。
28:03
AB啊,都是undein。M2,你有一个manager吧,来再来这边A呢,我就传一个什么呢名字,我就传一个Jack吧啊。这个工作岗位就是比如说销售经理啊,销售经理你随便写吧啊。我当然我传一个。行对不对,我要是我要是传两个也行嘛,这我我我我我传一个啊,这是张三,然后呢,这个Jack啊,这个M3,那你想对象充电完是不是可以调调用方法呀,调用方法怎么调啊,M1能调方法吗?M1不就是这个对象吗?要这个方法吧,而这个方法在调用的时候呢,它是不是需要参数啊,这个参数what time啊what time就用一个吧,啊date行不行啊。
29:04
那这里不是有一个。Date嘛,是吧,可以拗啊,系统时间嘛,来拗一下啊,This time可以new一个date吧。好,那么接下来呢,我就直接写啊,M1调work刚把这需要一个时间,那这样的话把这个systemtime是不是传进去了,行传进去啊,接下来M2能调work吗?是不是也能调啊,M3能调work吗?是不是也可以啊。叫沃传参数啊来这个输出内容是什么。UN demand嘛,Is working嘛,因为第一个的话,你想一想,你一是不是没有传餐,没有传单,是不都是UN DeFine,那这样的话,这个this UN find is working吗?Time有啊,第二个话是张三,张三的话是张三is working吗?最后一个是不是?是不Jack is open啊行,就这样啊,咱们来看一下注意了,大家看一看这个函数是不是在这声明了,但是呢,在哪掉的,是不是在spring标签里面这个位置开始创建了,创建了吧,所以这个呢,会执行啊。
30:09
直接双击把它打开。第一个啊,Undein is working。Time是这个是吧,点确定是张三is working啊,再往下Jack is working嘛,是吧,这你得看这是面向对象啊,跟Java没区别吧。但是我觉得Java语法好啊,为什么Java语法,Java语法就是一个,比如说类,它定义一个类就叫什么manager吧,然后呢,这个类里边就有一个什么属性,有一个什么属性啊name还有个什么属性啊,Job吗?你看这就是成员变量在这写上去,Public什么,它不是写public那个啊,叫many吧啊你看大家看一看啊,人家加法中啊,就是类的定义吧,构造方法就是构造方法的定义吧,就是构造方法啊,构造方法定义大家看看人家ZS啊GS呢,这类的声明和构造方法是融在一体。
31:05
明白吧,是有这点区别啊,所以这个呢,你得注意一下。行吧,这是属于这个加二中啊,是这样做的。但是等咱们自然学是这样做的,当然我一般都不会这么写啊,我一般定义类的是这样定义啊,来定义类怎么定义呢?Employee function,明白吧,P number name salary这边写上去,This their number p number this their name,然后name吧。然后呢,写上this salary啊,Salary来这边我写上去this.print in像一个函数function,就相当于突出方法一样啊,来在这呢,我就alert啊,打印输出this.e p number加上去逗号,再加上去this,点一再加上取逗号,再加上去this salary,谁能看懂吧?下来你就在这调串建对象吧,看对项啊,这是第几种方式,第二种方式啊,这就是类的定义。
32:10
那接下来创对象怎么创建啊,直接呗,Employee是吧,又一个employee吧,这边传上去啊,这边呢,这个名字1123啊传上去名字传上去张三啊薪水比如说5万好了,那这边的话一一.print in four吧,调这个方法啊,Print in four教这个方法就行了,你只要调这个方法就执行看出来了啊,所以刷新一下好点,确定确定确定啊没问题吧,就这。这就是面向面向对象嘛,这样处理问题。有类的定义啊,方法的构,方法的定义啊,属性的定义啊,行吧,就这么着吧,啊,这节课咱们到这儿,下节课咱们再说这个项目啊,所。
我来说两句