A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 厦门校区 于 2018-5-17 14:27 编辑

同学们,以下是今日任务,以案例为主,在之后的学习中,JavaScript也是大家经常要操作的部分,所以认真总结。今日重点是熟悉JavaScript的基本语法,掌握定时器的使用要求每位同学可以完成以下案例,然后以口语化的方式在评论区提交你的每日总结,谈谈你对今日重点知识的理解!

  • 使用JS完成简单的数据校验
  • 使用JS完成图片轮播效果
  • 使用JS完成页面定时弹出广告

56 个回复

正序浏览
杜石苇
HTMLday3总结
今日学习了JS脚本的使用方法,比起CSS是美化页面  JS是让页面动起来.
JS的函数和java的方法有些相似,
var 可以定义 数字 字符串 对象等等  比如java的int String万能多了
JS的调用方法有两种 页面内调用和调用外部文件   <script>  或者 <script src="">


BOM对象
        window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
        history:go(参数),back(),forward()
        location: href属性
其中window对象属于bom最顶层对象,里面方法可以直接使用,不需要加window
JS运行逻辑 .
由事件触发函数(如window.onload 打开页面就触发)
然后触发的函数中定义函数 (如 在onload中定义方法 播放广告,轮播商品等等)
获取对象的操作权 (如定义var test =document.getElementById("id")  获取对象的操作权)
修改要操作的对象相应的值或者属性(如修改  test.style.display  修改bolck或者none)


        onsubmit()此事件写在form标签中,必须有返回值。
        onload()此事件只能写一次并且放到body标签中(    页头hert中也可以设置window.onload.设置后打开页面自动加载,无需在body中设置)

        其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)
        获取元素:
        document.getElementById("test")  翻译大概就是文件中获取用("test")这个ID来获取元素
获取元素里面的值:
        document.getElementById("id").value
                可以在script中定义方法 然后在标签中或者div中使用方法
        今日的几个案例思路:               
1:        定义加载广告的方法就是使用onload加载延迟 定义具体加载广告的时间 和关闭打开style中的display

2'        页面商品轮播的方法也跟广告差不多 加载广告基本设置一次性setTimeout(),轮播的设置循环setInterval() ,
        最好加载的图片设置成有规则的 1 2 3 4 5这样.定义循环变量 i 大于最大值的图片就从新从i=1开始
       
3:        JS做表单的变量原理也很简单 form中设置onsubmit()此事件写在form标签中,必须有返回值。     
        设置个ID  JS中获取相应的值 然后判断是否符合正确数据的判断  不符合返回false 默认是true .  
注意事项
另外 JS严重区分大小写  function 写成Function都执行不了.  还有引号要注意 比如 document.getElementById("username").value;  中uesrname要加引号
window.setTimeout("alert('test')",5000);    双引单引号避免错乱
       
        今日单词
document:文档
check:检查
change:改变
Interval:间隔 循环'
Timeout 超时
history:历史
alert:警告框
confirm:确认框
prompt:输入框
function:功能(函数)
click:点击
back:返回
tips:提示
info:信息
onfocus:聚焦
onblur:离焦
location:位置
screen:屏幕
navigator:导航(浏览器相关信息)
回复 使用道具 举报 1 0
常小天
今天学习了javaScript,并利用JavaScript来使我们的页面更加强大。通过三个案例体现出JavaScript的功能。
案例一、注册页面的简单校验。作为第一个案例,本案例首先向我们展示了js的开发步骤。创建触发条件引用函数、定义或者声明函数、获取操作对象、最后修改或操作对象。需要注意的是获取对象获取的只是对象的一个壳子,对象的具体的值、属性以及方法还需要通过对象再去调用,这一步虽然简单但有可能会忘记做,所以需要注意一下。另一个就是onclick事件的特殊性,onclick事件调用函数必须要有返回值,并且在onclick的声明中应加上 “return”,在函数编写时同样注意不要遗忘返回值。
案例二、首页的图片轮播。这里有一个重点就是js的定时方法。定时方法作为js中最高层的对象window的方法,同样在使用时需要遵循js的开发步骤,即先要创建触发事件。需要注意的一点是在编写定时方法的参数时,其中的code部分,如果这一部分是一段代码而非方法名,要注意单引号与双引号的区分,否则容易出错。
案例三、广告页面的隐藏于显示。实现这一点依赖于定时方法和对象的style属性中的display属性。这一案例除了同样需要案例二中的知识和注意事项,还要全面地掌握window的定时方面的函数,也就是清除定时的函数,这里需要留意的是setinterval的返回值,这个返回值是清除定时方法用以定位待清除的定时方法的依据。
回复 使用道具 举报
颜琳琳
   
    今天学了JS,JS是一种用于浏览器的脚本语言.由:ECMAScriot,BOM,DOM组成.
Js主要学习了其语言的语法,该语法和Java语言基本相同,其中不同的有1. ECMAScript的原始类型有:undefined类型: 未定义的值;boolean类型;number类型;String类型 字符或者字符串类型;null类型可看成是引用类型中的对象的默认值; 2. 变量,该变量是弱变量类型,类型为var代表任意类型;  3. 运算符,该运算符中的”==”表示值相同,”===”表全等,数据类型和值都相同的.
今天主要通过学习使用JS实现注册校验,使用JS实现图片切换和使用定时弹出广告三个案例来学习JS.
1.使用JS实现注册校验案例中学习了,Js的开发步骤和引入方法;
在开发步骤中要注意在创建html页面后必须要有个触发事件,如果是使用form表单提交,则要在form标签中添加onsubmit="return checkForm();"(return后面为触发事件的方法名/函数名)作为触发事件,然后在<head>标签中定义一个函数,在定义该函数时候需要有<script>标签内,定义函数的格式为
window.onload= funtion(){ 函数体 };(该方法页面只加载一次)
funtion() 函数名{ 函数体 };
常用的事件有:onclick,ondbclick,onmouseover,onmouseout,onload,在进行校验时需要通过ID来获取,document.getElementById("").value来获取要校验的值来进行对象的控制,然后使用if进行判断,最后还需有一个布尔类型的返回值.在校验中要注意邮箱的校验比较特殊,需要用到正则表达式来判断,获取的方法有两种:1. 使用String对象中的match方法 定义的id名.match(“正则表达式格式”);  2.使用正则对象中的test对象  正则表达式格式.test(定义的ID名)
引入方法有:1. 直接在页面内的<head>标签中定义<script></script>
2.在外部创建一个.JS文件,然后在html页面中导入即可.
2. 使用JS实现图片轮播和弹出广告的案例,该案例中学习了BOM中的对象有window对象,该对象中常用方法有: 1. setInterval(“要调用的函数或要是执行的代码串”,要执行的时间单位为毫秒)循环执行,  setTimeout(“要调用的函数或要是执行的代码串”,要执行的时间单位为毫秒)执行一次, clearInterval()取消setInterval设置的时间,循环执行,clearTimeou()取消setTimeout设置的时间,只执行一次;  2. alert() 弹出一个窗口;  3. confirm() 弹出一个确认的窗口; 4. open() 打开一个新的流浏览器窗口 ,  5. prompt()显示提示用户输入的窗口;  Naviqaitor对象 包含浏览器信息 ,Screen对象 用来获屏幕信息  ,History对象 浏览器的历史记录  ,Location对象 获取URL信息 使用href=””. 注意:window是所有对象的属于BOM最顶层的对象,需掌握其方法,其他对象了解即可.
这两个案例开发的代码如下:
<script>
                        var time1;
                                window.onload=function(){
//设置定时
                                        window.setInterval("changeImg()","5000");
                                        time1 = window.setInterval("show()","5000");
                                }
                                        var i=1;
                                        function changeImg(){
                                                i++;
//获取图片的控制权
                                        if(i>3){
                                                i=1;
                                        }
                                        var img1=document.getElementById("img1");
                                        img1.src="img/"+i+".jpg";
                                }
                                //显示广告方法
                                function show(){
                                        //获取广告的div元素
                                        var time=document.getElementById("adDiv");
                                        time.style.display="block";
                                        window.clearInterval(time1);
                                        time1 =  window.setInterval("hide()",5000);
                                }
                                //隐藏广告
                                function hide(){
                                        var adDiv=document.getElementById("adDiv");
                                        adDiv.style.display="none";
                                        window.clearInterval(time1);
                                }
</script>
回复 使用道具 举报
吴鹏

----------------------------------------------------
用js实现简单的文本框内容是否为空的案例:

一,对于每个需要判断的文本框元素,在其标签内分别定义不同的id值;

二,在需要检测的表单的<form>便签里边使用onsubmit="return 函数名",这个属性根据返回的true或者false来决定表单是否提交;

三,在<head></head>里面写<script></script>,之间定义一个函数,该函数的内容为
1 获取不同id值的对象的数值内容,
2 对数值内容进行判断,判断是否为空,
3 若数值为空,则使用alert()弹出提示,并且返回false,
4 因返回的数值为false,所以表单无法提交;
5 注意,对于邮箱地址,不光判断是否为空,还需判断是否是正确的邮箱格式,
可以使用字符串对象的match()或者正则表达式的test()方法来进行判断,形如:
邮箱地址.match(邮箱地址的正则表达式)
邮箱的正则表达式.test(邮箱地址)
6 对于密码,还需比较两次输入的内容是否相等;

----------------------------------------------------
循环显示图片的实现:

一,定义一个事件:因要求图片每隔一段时间后就改变,所以使用window.onload = function(),内部方法使用window.setInterval("",毫秒数值),
该方法为每隔毫秒数值,循环某个对象;

二,定义一个函数:定义一个改变图片的函数,函数名使用changeImg();

三,获取控制权:使用变量接收要改变图片的元素,

四,对文件进行修改:因要实现图片的自动改变,因此使用一个变量,用变量i关联文件名,
同时变量i在每次循环后都进行累加,判断当超过图片上限的数值后,重置变量i,使其从第一张开始重新输出;

---------------------------------------------------

实现图片显示及经过固定时间后隐藏:

对于这个要求,可以定义一个<div></div>块,将图片内容放在div块里,直接显示或隐藏div块;

一,div标签内先定义id=adDiv,再用style属性的display的none方法,隐藏div块,

二,
var time;
var time1;
window.onload = function() {
    time = window.setInterval("show()",2000);
    clearInterval()方法需要接收一个返回值,用来确定是哪个对象要调用这个方法,在这里使用全局变量time接收;
}

function show() {
var adDiv = document.getElementbyId("adDiv");获取到图片块对象
adDiv.style.display="block";对图片进行设置,使图片显示出来
window.clearInterval(time);根据返回值,将给定time返回值的setInterval清除;
time1 = window.setInterval("hide()",3000);调用hide()函数,将图片进行隐藏,使用变量time1接收此方法的返回值;
}
function hide() {
var adDiv = document.getElementbyId("adDiv");
adDiv.style.display="none";
window.clearInterval(time1);根据上面的time1返回值,结束hide()循环;



回复 使用道具 举报 1 0
何平波
今天又学了新的知识----JavaScript(简称JS).
JS是一种网页脚本语言,它是属于web的语言,如果说html语言是一个人的话,css语言就是为他美化外观,而JS语言就是赋予它动作,让人(网页)更加的面向对象.
JS是可插入的HTML的编程代码,它能让所有现代的浏览器解析执行,今天要掌握三个重点,第一个重点是检测注册表内容是否符合规范.第二个重点是网页页面的一个图片的滚动,第三个重点是学习如何让网页定时跳出广告.
以下是自己对今天的三个重点的一些理解:
第一个重点比较容易理解,使用事件onsubmit(因为这个事件比较特殊,需要return),然后让每个表单元素加上id,使用<script>里的function获取到元素内容id,定义一个变量名接收这些元素内容,然后进行一些判断,比如输入用户名就可以判断是不是空的,如果是的话就使用alert()让网页弹出警告,,并且return flase,让表单里的内容数据不提交.

第二个重点是让网页里的图片进行滚动翻页,在这里需要用到和重点一一样的方法,不过稍有区别的是直接在图片上做判断,而且还用到了JS里的一个方法叫        setInterval()根据设定的毫秒值周期来调用函数或者计算表达式.然后获取到网页显示内容的效果.这个方法需要去掌握.

第三重点是让网页定时弹出广告图片又自动关闭,这个重点相对来说不好理解,首先你需要让被显示的图片先隐藏在网页里,然后根据setInterval()来给他设定显现的时间毫秒值,同时也要根据setInterval()来给他设定消失的时间,这里重点是一个图片的代码里和函数计算表达式需要设计它的样式让他消失和显示,同时调用setInterval()这个方法就会在一个周期内一直显示和消失就会出现闪屏的冲突,这里需要让消失里的方法结束clearInterval();才会解决这个问题.
回复 使用道具 举报
本帖最后由 AsusCoder 于 2018-5-18 18:35 编辑

姓名:曾耀峰
   
   这三天html+css+js,有点吃不消,量力而为地掌握,熟悉API文档上的方法。设想这些功能在以后开发中的使用场景,以后遇到Mark一个印象。
   今天学了js,最大的感受是,在视觉上能够给页面有一些活力。比如给广告展示模块设置轮播;在功能上的使用是很强大的,比如:
    1.能够获得任意一个标签,并能修改它。
    2.多种事件触发捕获,能够添加更多的功能。比如,当点击表单form的submit按钮,会触发onsubmit事件。这个时候想捕获这个事件,就可以在form上面添加一个属性onsubmit ='js函数'。
   
总结今天的知识:
    一.案例1:制作广告图轮播效果。
    这个主要功能是使用window.setInterval("函数方法",毫秒数) 这个方法来设定该网页每个毫秒数执行所引用的函数方法。interval在英语的单词意思是间隔,时段等意思。理解方法的名称就可以知道这个函数的功能。
    另外,调用该函数还需要用到window.onload这个事件,当网页body标签加载的时候就会触发该事件。
    比较困难的是。函数内调用另外一个函数,还有第一次用js写逻辑时候,会有点手生。
    贴一下代码方便记忆:
    <script type="application/javascript">
                        window.onload = function() {
                                window.setInterval("changeImg()", 5000);
                                //window.setTimeout("popTopAd()", 3000);
                        };
                        var i = 1;

                        function changeImg() {

                                i++;
                                if(i > 3) {
                                        i = 1;
                                }

                                var img1 = document.getElementById("img1");
                                img1.src = "img/" + i + ".jpg";

                        }
       document是小写,不是大写的Document,写成大写会没有效果
       getElementById("标签的id名字")是重要方法
       做出来的轮播效果是瞬间切换图片的,和范例网页上的图片平移轮播不一样。在思考如何制作。

      
       二、案例2:加载页面一次性弹出广告层效果
        这个案例启动的事件同样是onload事件,由于onload事件只能声明一次。所以当广告图片切换和广告层弹出同时要使用onload事件的时候,只能把两个函数都放在window.onload = function(){}匿名函数体里面。一次性的延迟设置方法使用setTimeout("函数方法",毫秒数)。使用一次就不会再调用了。隐藏一个标签的属性是display:block;显示是display:none;通过getElementById()方法获取到广告层。直接设置ad.style.display 的值即可完成。
      
      三、案例3:其他常用的js方法:
        prompt()方法能够弹出一个可以输入数值的窗口。这个方法对于以后我们在后台管理页面进行数据的修改应该是比较常用的。输入新的数据,可以覆盖原来的数据
        confirm()方法能弹出一个确认的窗口,对于以后删除数据等慎重的行为,加上这样一个窗口可以再确认一次,防止数据丢失。
     另外,BOM的全拼是Browser Object Model 浏览器对象模型。是我们今天所学的知识。BOM除了Window这个顶级对象 ,其他另外六个对象。其中Screen屏幕,Timing.时间,Coookies本地缓存等三个对象是重要的,后面有空再学习。

     
     今天写代码遇到的问题:

     1.在补齐首页的热门商城模块中,单项商品的商品图片,名字,价格这三个,由图片,文字,链接等三个非块状标签组成,如何将它们进行规则排列。参考代码中的属性display:inline-block能将图片标签转换为块状元素,其他文字标签,链接标签各自贴上p标签,可以很好使用。

     2.在补齐首页的人们商城模块中。因为总共要连续粘贴复制十次相同的商品展示项,导致代码冗余。利用js的innerHTML方法来动态HTML代码。只要写好一个,获取它,并循环十次就可以生成同样的代码。

     3.当页面用百分比尺寸布局的时候,将浏览器窗口缩小的话,页面的布局会被打乱。这是一个不好的体验。后面查了资料。解决方法是给div设置最小宽度值min-width。设置的值为自己屏幕的大小。
   使用属性min-width。设置为min-width:1360px;。当然,每一个div都这样设置最小宽度值是不行的。直接给套在最外层
的一个div设置一个即可。
    视频上提供的WEB01项目并没有进行这样的设置。应该补上去的。
        
     
回复 使用道具 举报
本帖最后由 磬辰 于 2018-5-18 01:29 编辑

林文辉
     如果把网页比作一个人,css比作外貌的话.那js就相当于给它附上了灵魂.作为一种基于对象的弱类型脚本语言,整体相对于java要更加的简洁和紧凑.而且相对于java也没有那么的严谨,所以刚上手的时候会比较不适应,但是有编程基础整体学起来就比较快点.
     js的强大之处的之一就在于它只依赖与浏览器本身,只要浏览器能支持js,那么它就能发挥它的各种功能,非常的灵活.并且js还有对应的框架.比如jQuery.本着Write less,do more的核心概念,使我们操作起来更加的方便快捷.
    今天学习到的知识虽然只是js的凤毛麟角,但就已经足够体现它的优势了.比如我们可以直接在客户端通过js进行一些表单或者其他的校验,不要去往返的客户端和服务器之间进行传输,光是这点就可以节省很多资源了.并且通过js我们可以进行各种各样的人性化设置,让用户的体验变的更好.     因为js一般不会报错,所以很有可能会造成你单词或属性名打错  或者打反造成你调试了半天也没发现错误在哪. 这个影响还是很大的,所以在写js时尽量慢点或者仔细点,避免出现这些低级而又 耗时的错误.而且最后是写一点调试一点,不建议写了一大堆再去调试, 而且因为js代码相对来说可能会凌乱点, 而且代码量再多的话 就更难发现错误,
     调试可以用火狐或谷歌,也可以手动通过alert()来测试.浏览器就推荐这两个,其他的太坑了 尤其360,最好不要用.火狐和谷歌各有优点,谷歌的控制台是英文(按F12进入),j火狐有中文的,但是火狐偶尔也会有问题.比如某个功能要客户端跳转服务器,火狐可能就只给你抛回一个值,这样你可能不是很清楚到底有没出问题,但是谷歌就会直接给你报出错误在哪.所以这两个浏览器看个人喜好了.
     最后一点,命名要规范.尤其是像id="" name=""这种,最好不要用关键字,比如你写个<input id="submit"> ,这样有可能就会出现 submit() is not a function.很麻烦.所以建议命名时以小驼峰式命名(第一个单词小写,后面的每个单词首字母大写),这样不管是自己还是别人看代码 一目了然
回复 使用道具 举报
任佳锋(漏补)

js,一种网页脚本语言,学习之后可以让HTML页面动起来
它由DOM,BOM,ECMAScript构成
里面的变量都为弱变量类型,因此都用var来接受
它的数据类型有 undefined,number,boolean,string,null
当你为var赋值时,你赋的值是什么类型,那么var变量就是什么类型

四种时间设定方法:
setInterval();循环
setTImeout();只作用用一次
清楚:
clearInterval()
clearTimeout()

几种常见的触发事件:
onclick  点击事件
onsubmit  提交事件需要一个返回值,否则默认为ture提交
onload  页面加载事件 随着页面的加载而加载, 类似于静态修饰的方法,随着类的加载而加载
onfocus  获得焦点
onblur  失去焦点
回复 使用道具 举报
day04
施炎生
1.JS的输出:document.getElementById(“”).innerHTML=”HTML的代码”;(注意:innerHTML是属性后面不用加括号)

2.常用事件:
onfocus:获得焦点时触发该事件
onblur:失去焦点触发该事件
onsubmit:表单提交的时候触发  (onsubmit应该写在form里面)
onload : 页面加载事件
onclick: 点击事件
onchange : 下拉列表改变事件
ondblclick: 双击某个元素的事件
键盘事件:
onkeydown : 某个键盘的键被按下
onkeyup : 某个键盘的键被松开
onkeypress : 某个键盘的键被按下或按住
键盘事件:
onmousemove : 鼠标被移动
onmouseout ;鼠标从某元素移开
onmouseover : 鼠标被移到某元素之上
onmousedown : 某个鼠标按键被按下
onmouseup : 某个鼠标按键被松开
比如淘宝购物时把鼠标放到宝贝图上就会放大,移开就会缩小就是用到鼠标的onmouseover,onmouseout事件。

3.重点掌握以下四个案例:
案例一:使用JS完成表单提示和校验
        提取id和content然后作为参数传给onfocus()方法,简化代码。
案例二:使用JS完成表格的隔行换色
        a.获得表格的控制权
        b.获得表格行数
        c.遍历每行,
        d.判断语句(判断奇数行,偶数行)
案例三:使用JS完成复选框的全选和全不选
        a.获得全选框。
        b.判断全选框是否选中,再获得下面的复选框,修改checke属性。
案例四:使用JS完成省市二级联动的效果
        a.定义数组arr[i][j],录入各省各市
        b.清空城市列表中的内容
        c.for循环遍历所有市
        d.嵌套for循环
        e.使用document.creatElement和document.creatTextNode将第一个列表中所选省份对应的城市添加到第二个列表中。
回复 使用道具 举报
陈旭明
理解了class容器和id容器使用场景的区别,class选择器一般用于css和div里面,id选择器一般用于javascript里面。

Js定义方法的步骤:
1.先在要进行操作的对象里面设置id;
2.设置事件加载的对象名;
3.通过对象调用函数
4.函数体里面设置要进行的操作:先通过id获取要进行操作的对象,然后对该对象进行操作

常用事件:onclick,ondblclick,onmouseover,onmouseout,onload...
原始数据类型:
    undefined:未定义类型
    boolean:布尔类型
    number:数字类型
    string:字符或字符串.
    null:空
引用数据类型:null
定义变量都用var       
Windows对象的方法:
alert();                         --弹出对话框
setInterval();                        --设置时间间隔,循环进行
setTimeout();                        --设置时间间隔,只执行一次
clearInterval();                        --清除设置的时间间隔
clearTimeout();                --清除设置的时间间隔
confirm();                --弹出一个确认窗口
prompt();                        --弹出一个可输入的对话框
open();                        --打开一个新窗口
回复 使用道具 举报
柯建程
javaScript  脚本语言
BOM浏览器模型
DOM文档模型
弱变量类型语言(与java不同)javaScript没有具体类型,赋值后才找到类型    变量只用var
js的通常开发步骤
js通常由一个事件触发    事件(onclick,onload  onsubmit(需要写return))
触发一个函数,定义一个函数
获得操作对象的控制权
修改要操作的属性或值
定义函数
functiom 函数名称(){}
window.onload=function(){}   匿名函数   只能有一个匿名函数
js引入
两种方式
一种:页面直接编写<script></script>
一种:写入js文件夹中<script src=""></script>
完成图片滚动效果(window对象)
设置定时
setInterval()每隔多少豪秒换一次
setInterval("函数名",5000)
setTimeout()  隔多少毫米执行一次
setTimeout("函数名",5000)\
清除定时
clearinterval  取消setinterval()
cleartimeout取消settimeout()

显示和隐藏广告
需要用到setinterval或settimeout
           clearinterval或cleartimeout
css显示和隐藏的属性
display          
block 显示元素
none 隐藏元素
回复 使用道具 举报
day03
        施炎生                       
JavaScript是运行在浏览器端的脚本语言,需要重点掌握以下几点。
1.window对象常用方法:
setInterval()
setTimeout()
alert()
confirm()
prompt()弹出一个可输入的对话框
open()打开一个新窗口
2.JS的引入方式:
第一种:页面内直接编写JS代码,JS代码需要使用<script></script>
第二种:将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可通过标签引入<script  src = ""></script>
3.开发步骤:
JS通常都由一个事件触发;(常用事件:onclick单击, ondblclick双击, onmouseover鼠标放上,onmouseout鼠标移开,onload加载页面)
触发一个函数,定义一个函数;
获得操作对象的控制权;
修改要操作的对象的属性或值;
4.重点掌握以下三个案例:
案例一:注册页面的校验
案例二:图片滚动
案例三:广告的显示与隐藏
回复 使用道具 举报
林玮

今天呢,轩哥教了全新的内容js.js呢与之前教的没有任何关联,所以说是全新的内容;

之前web这一块学了两大块内容,一个是构建页面的框架,还有一个是给这个框架美化,他们分别是:
table(表格框架)由于不灵活就被div(块框架)替代了,CSS就是美化页面了;
但是学了框架和美化,页面还是死的,达到不了我们的需求,所以今天就学了js;

js全名JavaScript,主要功能是让页面动起来,JavaScript是一个脚本语言,它包含了ECMAScript,BOM,DOM(重点).
JS的基本语法很大程度的跟java语言嵌合;
而又有几个地方不同:                               
                JavaScript                                java
        1. js是弱变量类型语言                   1. 所有变量类型不同接收变量的基本数据类型也就不同
        所有变量都是用把var来接收            比如int--整数类型 String--字符串类型...
        2. js只有两种数据类型                   2.java也有两种类型
        一种原始类型,一种引用类型           一种是基本数据类型,还有一种是引用数据类型
                           (引用类型内容也是不一样的)
                            3. 还有一个就是运算符了
        运算符js和java基本相同就一个==和===号不一样,==号是内容相同就返回true,
                        ===号是内容和类型都一样才返回true;
还有就是ECMAScript,BOM和DOM,其中DOM还没讲.ECMAScript就是JavaScript的基础语法.
BOM有五个对象:
        window对象(重点讲了window的六个经典方法,我就讲两个比较重要的)
                setingterval("属性()",time)--定时执行一个任务无限循环
                settimeout("属性()",time)--定时执行一个任务只执行一次
        Navgator对象
        Screen对象
        Histion对象
        Location对象(这些查API都可以查的到,想知道去API查)
js的使用:
(由于这边的单讲的话有点繁琐,我就直接用代码实现了...)
    例(图片滚动代码):
        script标签是编写js代码的必要标签
        <script>
                        //静态代码块
                        window.onload = function(){
                                //定时滚动属性changeImg()
                                window.setInterval("changeImg()",5000);
                        }
                        var i = 1;
                        //定义属性changeImg()让三张图片顺序循环滚动
                        function changeImg(){
                                //alert("aaaa");
                                i++;
                                if(i > 3){
                                        i = 1;
                                }
                                var img1 = document.getElementById("img1");
                                img1.src="../img/"+i+".jpg";
                        }
        </script>
回复 使用道具 举报
陈叶隆
今天学习了JavaScript,跟以前所学的知识有相同部分,也有不同部分.
相同的是大部分数据类型和语法都跟java类似,比如数据类型也分字符串String,数字number之类的.for循环,if-else之类的语法差不多.window调用的方法比如setInterval(),alert,confirm类似于之前的类名点上静态方法直接调用,只不过这个”类名”window可以省略了.
不同的是开发步骤跟之前的知识不一样,JS的调用需要一个事件去触发,然后调用方法,然后需要获取某个对象的控制权,再对对象的属性进行修改.感觉绕了几个弯,比较麻烦,有时候想不到思路.
回复 使用道具 举报
林荣彬
        JavaScript是运行在浏览器端的脚本语言,脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

JS的基本语法:
1.区分大小写:
2.弱变量类型语言:
3:分号可有可无
4:变量命名:第一个字符必须是字母,下划线,美元符号


JS中的运算符:用法与java一致.只有一种不一样:===(全等于运算符)既比较运算符的类型也比较值.不同于==,==只比较值是否相等
JS中的语句:用法与java一致

设置定时的两种方法:
(1)setInterval("javascript语句",毫秒)  设置定时后会每隔设定的毫秒值后无限的循环执行
(2)setTimeout("javascript语句",毫秒)   设置定时后只会执行一次
关闭定时的两种方法:
(1)clearInterval(setInterval_variable)
(2)clearTimeout(setTimeout_variable)

数据校验:
1.给对象设置一个ID
2.在form中定义事件有返回值的触发函数onsubmit
3.在<script>标签中定义function(){}函数
4.根据ID名获取对象 document.getElementById("id").value并用变量var接收
5.if判断对象并返回值.

图片轮播:
1.将需要轮播的图片设置一个id
2.在<script>标签中定义匿名函数window.onload = function(){函数体}
3.在函数体中设定轮播时间window.setInterval("javascript语句", 毫秒值);
4.定义一个变量,并循环判断变量的值.
5.用图片的id在document.getElementById("id")中获取对象并用变量接收
6.图片id.src="img/" + 变量值 + ".jpg";轮播图片

页面定时弹出广告:
1.给隐藏的广告对象设置一个ID
2.在<script>标签中定义匿名函数window.onload = function(){函数体}
3.在函数体中设定轮播时间window.setInterval("javascript语句", 毫秒值)并用time接收
4.用图片的id在document.getElementById("id")中获取对象并用变量接收
5.图片id.style.display="block",显示广告
6.清空定时 window.clearInterval(time);
回复 使用道具 举报
弹出广告
先把图片设为none隐藏起来,然后设置显示定时
通过标签id获得标签对象: document.getElementById(" ")
block元素显示为块级元素,元素前后会带有换行符   清除定时
window调用设置隐藏定时,none隐藏起来 清除定时

让图片轮播
window对象加载function方法 :window调用设置定时 里面传入要执行的表达式和毫秒值;
获取图片控制权 , 获取元素id 把元素id里面的路径设为可变的i。

history对象方法;就是浏览的历史 go()方法可以前进后退或加载到某个具体页面。
location对象方法弹出confirm();弹出一个确认窗口。方法弹出prompt();弹出一个可输入的对话框方法弹出prompt();弹出 open();        打开一个新窗口

今日单词
onclick     点击
onload      加载
setInterval 设置时间间隔
confirm     确认
prompt      输入
Location    地点
display     展示
block       阻塞
none        没有的
document    文档
Timeout     超时
alert       警告框
onfocus     聚焦
navigator   导航
priPage     前一个页面
nextPage    下一个页面
回复 使用道具 举报
侯玉林
今天我们学习了js.
所谓js就是一种用于浏览器的脚本语言.
能够在浏览器端进行一些简单的逻辑运算,避免代码来回在浏览器和服务器之间来回切换,大大提高了程序的响应效率.
js的运行机制主要是通过事件和函数来实现的,当某个事件发生,就运行一个或多个函数.
主要的实现有两种方式:
1.在标签中写下当发生a事件就调用b函数,然后在script中写下b函数的具体实现步骤.
1.匿名函数,直接在script中写下当发生某个事件就触发莫个函数.
回复 使用道具 举报
叶凌青
今天学了JavaScript
其实他就是一种运行在浏览器的脚本语言
他的作用是让网页动起来

JavaScript的基本语法
很多都和java类似
要注意的地方是
=== 全等于.全等于是类型和值都一致的情况下才为true.
==知识比较他们的值是否相等,相等就返回true

今天还学习了事件,通过事件调用函数.
通常开发步骤
1,JS通常都由一个事件触发
2, 触发一个函数,定义一个函数
3,获得操作对象的控制权
4,修改要操作的对象的属性或值


还学习了两种js的引入方式,
JS代码需要使用<script></script>
1,直接在页面中引入
2,定义一个js文件
在HTML中引入该JS代码即可  通过标签引入<script  src = ""></script>

定义函数的两种格式
1.
function 函数名称(){
        // 函数体
}
可以理解为java中的方法,调用才执行

2.window.onload = function(){
        // 函数体
}
理解为java中的静态代码块
回复 使用道具 举报
这几天学习单词量有点多,英语渣渣的我学的有点吃力,明明知道原理是这样的,敲代码的时候无从下手,单词过一会就忘,忘了在回去也看不懂了,总结下,还是碰到新单词可以存下,把备注和单词的用途都写清楚一点,设定一个复习时间每天都复习一下
回复 使用道具 举报
Ldddd 初级黑马 2018-5-17 23:45:49
48#
赖镇东:
JavaScript
今天学习了JavaSciptECMAScript中的基础语法,与Java语法很相似,但有几点是与Java不一样的。1,变量是可变性;2,分号;可有可无3,数据类型的不同;4,有一个运算符===
主学习了BOM浏览器的对象Window方法,window中的方法主要是运用在网页界面上的操作。下面是我整理的Xmind

回复 使用道具 举报
李成林
js总结
关键字<script>(脚本);
window对象的常用方法
setInterval():设定间隔时间;
setTimeout():设定只执行一次
aler();弹出对话框
事件触发
onclick:点击触发
ondblclick:双击触发
mouse(鼠标)
onmouseover:鼠标悬浮触发
onmouseout:鼠标离开触发
onload:页面加载触发 一般定义在 dody(身体)中和window.onload;
document(文件)中的方法
getElementById():根据id获取地址值
element(元素)
一般在开发中的使用步骤:
确定触发事件;
根据触发事件来决定构造函数是否执行
根据id来获取要操作的对象
拿到对象进行修改;
回复 使用道具 举报
张育辉
        js总结:
                1:如果是html是骨架,css是衣服,那js就行为,
                让页面更加丰富,更炫,能让整个页面动起来;(运行在游览器的一个脚本语言)
                2:js三个部分组成ECMAScript,DOM,BOM,
                今天学习了两个部分,ECMAScript和BOM,
                        2-1:ECMAScript是一种类似java格式的语法,但是和java没有半毛关系,
                        不同的是,java是强类型语言,定义变量,明确类型,
                        js,任何数据类型都用var来接收,还有一个全都 ===是类型和数值都相等才返回true;
                        2-2:BOM学习了Windows对象,由于是最顶层,Windows可以省略不写,常用的事件有
                                1:onclick:点击事件,绑定空按钮,点击一次执行一次函数.
                                        补充:onsubmit 绑定提交按钮,但是需要返回值,不然话会提交数据,
                                2:onload:加载事件,等到页面加载完毕在执行onload事件所指向的函数,图片轮播
                                        还可以匿名函数window.onload = function();类似于java静态方法,类一加载就加载;
                                3:setInterval("changeTime()",3000);定时器,参数1:需要执行的函数,参数2,间隔多少毫秒,可以一直执行
                                4:setTimeout("同上")只执行一次就没了
                                5:他们都需要获取相对性的id,方法document.getElementById("lunboimg");
                                6:confirm("你确定是否删除");//确认弹出框
                                7:prompt("请输入你要查找的内容");//输入框  
                                8:location.href ="网站首页展示.html";//页面跳转,可以设置多少毫秒跳转一个新的页面
回复 使用道具 举报
郑学馨:
Javascript:脚本,在html中的作用,通过javascript函数,对我们

输入的动作进行识别判断然后做出回应!
今天要实现的三个功能:图片轮播,广告弹出,表单校验,
1:图片轮播:主要用到js中的setinterval方法,通过

Window.onload来启动方法的入口,onload表示网页一打开就执行

的方法,通过调用function(函数)来设置图片轮播,实现的关键点

是通过将利用id查找到的元素对象的src地址值改变成下一张图

片的src地址;
2:广告弹出:运用onload,settimeout来设置延时,注意图片的隐

藏和显示要使用css中的diaplay(block:表示显示/none:表示隐

藏)
3:表单校验:获取表单上输入的值(.value),通过if语句判断是否

符合要求,return一个布尔值,
总结:第一格式很重要,多打代码少看视频,第二,关键词的理

解;windos/onload/funtion/settimeout/setinterval/document

/getelementbyid/alert/var/这些理解了,至少能完全看懂代码

了,第三:功能如何实现的,
回复 使用道具 举报
黄进安:
1.    js的使用步骤: 你要在什么时候做什么事情?
做什么?------à操作的具体内容
对谁?---------à获取要操作的对象(document.getElementById(“id名”);)
把对谁做什么封装成一个函数(方法);
什么时候?---à触发你做这件事的事件(加载页面,单击鼠标……)

2.      学CSS的时候一直有个疑惑id选择器和类选择器到底有什么区别?好像可以都可以应用于任何元素,那么在使用上到底有什么区别之处?
今天教了js在获取要操作的对象都是采用document.getElementById(“id名”);来获取页面的元素,再对元素根据需求操作.
找了下度娘得到以下答案:
1)      ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2)      可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。


回复 使用道具 举报 1 0
1234下一页
您需要登录后才可以回帖 登录 | 加入黑马