00:00
行,那咱们接着来啊,呃,上节课呢,咱们说到这个控制语句这一块,这个控制语句呢,咱们呢,诶重点还是呢,掌握咱们Java语言当中学过的那几个语句就可以了。那么再往下呢,咱们,诶接下来啊,咱们把这个跳过去啊,内置对象这块咱们先跳过去。跳过去啊,跳过去之后呢,我们写点有意思的东西啊,要不然一直不写有意思的东西啊,大家估计也顶不住了啊,现在我看好像也是顶不住了啊呃,咱们这样,咱们往下呢,说一说这个各位啊,说一说咱们javascript它其其实是包括什么呀三块。哪三块呢?一个是这个核心语法啊,一个是DOM编程,一个是boom编程。啊,那这三块都是什么意思呢?我们来解释一下,这个好比就说我们Java当中包括三大块是一样的,包括什么Java SE啊,Java EE啊和什么Java me。
01:08
Java不是三大块吗?诶这个知道吧,JA1是标准版是不是Java意义是什么?企业版是吧,Java意是微型版是不是好,那Java SE是必先要必须先要学的一个东西,学了这个Java SE,你是不是才能选择走这个Java EE方向,或者是走这个叫javae方向是不是?哎,那同样呢,我们加所这块呢,也包括三大块,你这样去理解就可以了,哪三大块呢?一个是X script。啊叫EMA script,还有一个是do还是ma script是什么呢?是这个javascript一个核心语法。啊,核心语法就是变量啊,数据类型啊,控制语句啊,运算符啊,这都属于谁的呀。
02:00
啊,那再往下呢,就是一个是文档对象模型。这个文档对象模型是干啥的呢?他是操作这个网页当中的一个这一部分内容的各位。就是对这个网页当中。这块东西我们说了它是一个什么do数。对吧,这个树上是不是有很多节点对吧?每一个节点是不是都有自己的ID。然后我们对这个节点进行增删改的过程,就是什么编程啊,Do编程。但如果说您想操作的是这个后退按钮,前进按钮刷新以及关闭这个浏览器窗口,还有你想操作的是这个浏览器地址栏上这个地址,您这块的操作都属于什么BOM?
03:03
编程。叫编程,这个B指的是什么浏览器?这个地址的是什么文档?啊,所以说javascript一共是包括三块。哪三块记住了吗和来这块我全部关掉,点右键图这里新建一个目录,各位这个目录呢,我们就叫哎吗script目录啊,把这几个文件拖进去。哎,能看懂吗。这一部分的东西都属于什么script基础语法,然后呢,我们再往下呢,就得有一个叫DOM编程的,然后呢,再建个目录叫什么呀,报编程。
04:03
我们现在先进行什么呀?DOM编程。点右键。啊,我们新建一个文件,这个文件呢,我们就可以写001了,各位啊001。哪儿可以买到防晒霜?或者说我们讲这个之前先练练手也行啊,怎么去获取文本框当中的value,各位看好了。001啊叫DOM编程获取什么文本框的value,注意听OK啊,诶放这了啊看这诶。那么接下来呢,在这里呢,我要给大家解释的,当然这个笔记我觉得还是得记清楚啊,刚才大致的粗略的说了一下,但是这个我觉得有必要详细的再说一说,首先第一点啊,就是Java script script啊,包括三大块,这三大块分别是ma script,还有一个是DOM,还有一个是DOM,这个指的是什么?是GS的核心什么语法啊,其实就是ES什么。
05:14
规范法是BS规范或者叫做什么X吗?多少262什么标准?听懂了吧?指的是document object model表示文档对象模型,下边这个是browse model表示浏览器对象模型。那文档对象模型就是说对网页当中的什么节点进行增删改的过程,被称为什么当我们编程,因为我们的HTML文档被当做一棵树,什么树啊,倒数来看待,这个树上有很多节点啊,节点有很多ID嘛,其中有个非常经典的document.get element by ID的这个方法,ID。
06:13
返回一个什么对象?这个就是DOM编程当中的代表,DOM编程的代表这句话啊,通过ID来获取元素。BOM,比如说关闭什么浏览窗口啊,还有什么呀,打开一个新的什么浏览器窗口呀,后呀,对吧,叫后退前进呀,对吧,浏览器地址栏上的地址呀等。啊,都是BOM编程,就咱们先从这个。
07:02
概念的角度来看我们这块script,我们就说这么多了啊,然后再往下是do,然后do讲完之后我们讲boom。BOM,那现在呢?还有一点就是大家在我的这个思维导图上看到一句话,叫做BOM和DOM的区别与联系。这个BOM和DOM的区别和联系。DOM和BOM的区别和联系,首先我觉得是这样,各位啊,BOM的顶级对象是谁?DOM的顶级对象是谁?Document?明白吧,啊,实际上BOM是包括谁的DOM的。
08:05
因为这个BOM指的是浏览器对象模型,你这个网页是不是在在人家浏览器上是吧。对吧,所以说不是啊,是包括。诶,通过这个你就可以看到,比如说我在这有个input type类型是button,然后ID呢,就叫做买button或者button也行啊,Value写上去哈,有这么一个按钮,我现在我要获取这个按钮,怎么回去window.on,什么load,对吧,等于方式,因为加载完毕之后执行另回个函数,在这里我们执行一段代码叫document.get什么element by,什么ID,这个ID呢,我们就把下面这个BTN拿过来,这样是不是就可以拿到这个节点啊。哎,这个叫什么object或者button element元素。
09:00
其实这个window我来说一下啊,它前面是有个温点的。有没有在听课这个document前面是有个window点的,各位啊,Window点是可以怎么着省略的,Window指的是什么?就是你这个浏览器窗口,然后点document指的就是拿着你这个器窗口当中的这个什么网页页面。是这样的,来,我们在这儿呢,Alert一下button。我们可以在这点运行,给它运行一下,我们看能不能运行。好,大家看行不行。这个论方法的结果是什么?HL的元素吧,看弹出来了吗?对吧,它是一个什么HTML input元素是不是是啊,ID等于BTN的这个元素拿出来这。
10:06
对吧,哎,所以说我想说的是这个温度点是可以省略的,什么意思就是说。可以这样写。这。哎,这个是不是我们之前一直都是这样写的,这样写。只不过那个时候我没有告诉大家,其实它前面有个什么window。这其实就是想告诉你,这个BOM和DOM之间的关系是什么呢?是一个包含关系,BOM是包含DOM的。其实你也可以从网上找一些相关的图。BOM和DOM关系图。我们从这点过去看这个看见了吗。整个这个叫什么。叫做BOM。叫浏览器对象模型明白吗?浏览器对象模型当中的顶级对象是window对不对,Window下有没有document呀,你看什么整个这块的东西,我们叫什么网页上的东西。
11:17
叫DOM。懂吧,但是你整个这个东西我们叫什么BOMBOM是包括do。这个history是什么?History是历史啊,历史包括前进和后退啊,好,Location是位置,说的是谁地址聪明,如果你操作这个地址栏上的东西,你就得借助哪个对象window,什么location,你想操作这个后退和前进就是window history。明白,就是这样。这个属于BOM编程,但如果说你用document这块就是点点什么呀,其他的比如forms就可以获取什么,整个网页当中的表单,你有十个表单,他都可以把表单拿到。
12:14
你有十个超链接,他可以把这十个超链接都拿到。链接嘛,Link链接懂什么意思吧,啊这样。就总之呢,这个呢,大家要知道,谈起来这个BOM和这个BOM之后,你要知道它是包含它的。就行了。好,这是我们所说的这个知识点,各位啊,就是BOM和DOM的一个区别与联系啊,其实是一种包含关系,我觉得你应该把这个图啊,你你你别截了。啊,我这块我给你保存一下得了啊,就是这个叫BOM和DOM的什么关系,这个关系图呢,咱们放到这个叫做。
13:07
这个位置吧。行吧,放这啊好了,那这个思维导图当中,这块咱们是不是经说过了,哎,已经说过了啊,三者的关系大家理解了吧,理解了,然后这个是基础,然后这个DOM和DOM,呃,这个DOM和BOM他们都是干什么呀?操作对应位置的,DOM是操作这个文档页面的,BOM是操作整个浏览器的啊,然后他们之间的关系简单提了一下,那行,那是不是只有这个现在还没有讲,就GS那个内置对象没说吧,咱们直接进入到这儿了,各位啊,回头咱们再看这行吧,回头咱看这,咱们看这啊叫DOM编程案例,DOM编程案例首先第一个我要做的什么呢?就是获取这个文本框的value啊。怎么获取,我先把这个代码我先给它注释掉,各位啊,咱们全全新全新开始啊,来从这咱们先注释掉,在这里有一个input type,类型是text,然后接下来在这有个ID叫做username,然后在这呢加一个input type,类型是button,然后叫获取文本框的value来ID,我们就叫做button,这个页面呢,我再重新把它打开,我的意思是这里填的张三,我一点拿到张三,如果填李四,我一点拿到李四,我填王五,我一点拿到王五。
14:31
就是这个框里边填什么我就拿什么行吧,诶这个框里边填的这个东西是不是就是value,就是value吧,啊就是value,所以想拿到这个王五。你得。想拿到这个王五,你得先拿到这个文本框对吧。文本框好拿。来。
15:00
怎么写window onload是吧,Function怎么写?是不是给这个按钮绑绑绑绑那个鼠标单击是吧?Document点什么get element by ID是谁拿到了吗?拿到这个八根元素之后,我们给这个元素绑定一个on click吧,是不是?然后on click鼠标单击的时候,我们执行回调函数吧。Alert,我们来看看这个程序能不能正常执行,最好写一步测一步,我们同时把这个F12打开,看控制台这有没有错行吧,来我们刷新一下,接下来我们这边呢,什么也先不写,点一下你看。有吧,下面没报错吧,没报没报记住把这个打开啊,点一下你看,所以最起码现在可以保证的是。
16:03
我这段代码可以正常执行,再往下这里的思路是什么?你你想你要获取这个文本框上的那个value,你得先把这个元素获取到啊,这个元素有没有ID,有我们获取username节点吧,怎么获取username element等于document.get element by ID又是这个方法,或者叫这个函数,这个函数ID是username,拿过来放到这儿,拿到这个username element之后username element.value因为这里有一个value属性啊。这个文本框里边有没有Y6属性?我曾经说过,一个元素当中有什么属性我们就能点什么,您千万要记住,能加括号吗?不能,Y6是一个什么属性,听懂了吧?这个时候拿到了什么username,接下来我们是不是把这userme给它输出吧?好,接下来我们再刷新一下,王五走一个王五,王五二走一个王五二。
17:15
是吧,王五三走一个王五三就你填什么他就能获取什么。这个大家会了吗?这诶没什么技术含量吧,这个来各位连起来一串写啊,怎么写document by username过来,然后直接在这点。是吧,别加括号啊,还是那句话点。那接下来呢,我们再来刷新一下啊,我们这块呢,填上一个别的,嗯,可以。
18:00
好了。那你说我除了可以拿这个Y6之外,我能修改Y6吗?可以修改它的Y6吗?怎么做?直接把这个拿过来放到这个位置上,等号后边能不能写点东西啊?就写个张三呗。那这样的话,我在这个位置上就相当于你是杰克,我一点变成张三了。你就是你你你你改嘛,你改改了嘛,他为什么改成张三了,因为我重新赋值了呀,也就是说这个点Y流属性有两个作用,第一个作用是点Y了之后,它可以获取。文本框的内容对吧,然后用等号的方式可以给他怎么着修改吧,哎,现在我给大家出一个题目,假如说在这有一个文本框,在这个位置有一个文本框。
19:10
我希望你能写一个程序,从这个文本框里边获取值,设置到这个文本框里边。听懂了吗?就我的意思是这有个文本框,这有个文本框,这有个按钮啊,我一点那个按钮,你把这个文本框的东西拿出来,放到这个文本框上。喂。那就做一做呗,你说可以了啊,那你说行了啊,来咱们就写一写,就在这个例子里边写了不动了啊,来我写几个框,先来个HR行吧,换行就不是换行,横线来个into的type,类型是T,然后接下来就要ID是user,什么NAME1,然后接下来把这个复制一下,然后拿过来之后把它改成什么user name2,然后接下来我在这里有个按钮呗,对吧?哎,有个按钮啊,这个按钮input type类型是button,然后value呢,就写上叫做将第一个文本框中的value赋值到第二个文本框上,ID38分。
20:19
那如果我们打开这个页面就是这样的。对吧,ABC为点,诶你把这个ABC放这。就把ABC拿出来放这,那我这块应该怎么写呀,就直接写了啊,Script能不能再写一个type type加除数吧,好接下来这怎么写window点什么漏吧,好function以免加载完毕之后执行,执行什么呢?给这个按钮,这个按钮是不是绑定事件,所以连起来写啊点点什么get element by ID是谁?它它点什么on click呀,你因为鼠标单击,你单击的是这个呀,单击它就执行一个回调函数吧,好,那这个回调函数要做什么?获取第一个框的值。
21:17
对吧?获取第一个框的值怎么获取document.get element by是哎,USERNAME1,只要把这个USERNAME1拿过来,点什么Y6对吧?点Y6点value拿出来之后呢,直接赋值,赋给谁document.get element by ID,谁USERNAME2点什么。这个u nameme1的value赋值给u name2的value对吧,所以接下来我们刷新一下啊,这个位置呢,写上,比如说Q走。听二。
22:02
走。是吧,这个例子,这是咱们第一次尝试DOM编程啊,怎么去获取文本框的value?好了。我们再来一个input text类型是什么呢?比如text,然后呢,ID这块的username啊,这个ID项目先先不讲了啊先不讲了,这块呢,我加一个什么呀,昂卜乐,这个昂乐是什么呀,不论事件是什么事件失去焦点事件对不对,失去焦点。当失去焦点的时候,执行什么这段代码?对吧,好,那这一块alert啊,我直接弹出来谁呢?诶this.value各位,这里主要给大家讲一下this。
23:07
这个this代表的是谁啊,当前的这个文本框对象。那这个文本框对象它有没有Y属性啊,有,你看我们接下来在这呢,把这个再运行起来。这吧,哎,害我只要这个光标,怎么着一离开。Alert。我里边填什么,他就弹什么。因为我填的这个东西就是value嘛,买value光标失去买value。史密斯。走什么意思?我这里重点想向大家表述的是,以下代码中的this代表的是当前input。
24:07
节点对象value就是这个节点对象的什么value属性?啊,这个这种方式是不是也是获取我们文本框的value。我们这个题目的意思就是过去本本框的value啊,这种方式,你看它或许。
我来说两句