• JavaScript进阶


    第1章 系好安全带,准备启航

    1-1让你认识JS

    你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已。我们还需使用JavaScript增加行为,为网页添加动态效果。准备好,让JavaScript带你进入新境界吧!

    JavaScript能做什么?

    1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

    2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

    JS进阶篇学习什么?

    JavaScript入门篇中,我们学习了如何插入JS、输出内容及简单的DOM操作,JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作,制作简单的网页动态效果。

    任务

    我们先来回顾下JS入门篇的基础内容,在网页中插入JS代码,实现输出"JS进阶篇",并弹出对话框,内容为"关注JS高级篇"。

    注意:

    1. JS是区分大小写的,如:classname和ClassName是不一样的。同时注意方法、属性、变量等的大小写吆。

    2. JS中的字符、符号等一定要在英文状态下输入吆。

     

    ?不会了怎么办

    <script type="text/javascript">

    document.write("JS进阶篇");

    alert("关注JS高级篇");

    </script>

    代码:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>我们互动下</title>
     6 <script type="text/javascript">
     7 document.write("JS进阶篇");
     8 alert("关注JS高级篇");
     9 </script>
    10 </head>
    11 <body>
    12 </body>
    13 </html>
    我们互动下

    1-2编程练习

    小伙伴们,实现在html页面中的插入JavaScript脚本,打开页面时,在页面中显示一句话 : "系好安全带,准备启航--目标JS",并弹出一个提示框:"准备好了,起航吧!" 

    温馨提示: 完成任务后,请验证是否与实践要求一致,如一致,恭喜您,已经掌握此技能。否则,请重新学习课程内容吆,直到实践编写代码与实践要求一致。

     

    任务

    第一步:把注释语句注释。

    第二步:编写代码,在页面中显示 “系好安全带,准备启航--目标JS”文字;

    第三步:编写代码,在页面中弹出提示框“准备好了,起航吧!”

    提示: 可以把弹框方法写在函数里。

    第四步:使用引入JS外部文件的方式实现以上的任务。

     

    ?不会了怎么办

    代码:

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>系好安全带,准备启航</title>
     6 <!--引入外部文件的方式-->
     7 
     8 <script type="text/javascript">
     9 //多行注释
    10   /*我是多行注释!
    11   我需要隐藏,
    12   否则会报错哦!
    13 */
    14 //在页面中显示文字
    15 
    16 document.write("系好安全带,准备启航--目标JS"+"<br>")
    17 //页面中弹出提示框
    18 function duihua(){
    19  var txt=confirm("请点击我,准备好了吗?");
    20  if(txt==true)
    21  {   
    22      document.write("准备好了,起航吧!!");
    23  } 
    24  else{document.write("请重新学习课程内容吆!");}
    25 }
    26 //单行注释
    27 //我是单行注释,我也要隐藏起来!
    28 </script>
    29 </head>
    30 <body>
    31 <input type="button" value="请点击我,准备好了吗" onclick="duihua()">
    32 </input>
    33 </body>
    34 </html>
    系好安全带,准备启航
  • 相关阅读:
    获取CheckBoxList当前选择项索引
    IE游览器与CMYK模式的JPEG格式图片不兼容
    jquery listbox左右移动 并且取值
    JS保留2位小数
    list.Contain 与 list.FindIndex()用法记录
    CSS 手型显示样式
    分页存储过程
    C#将datatable生成easyui的绑定tree 的json数据格式
    URL编码方法的比较
    UNIX I/O with TCP/IP
  • 原文地址:https://www.cnblogs.com/daipianpian/p/4516476.html
Copyright © 2020-2023  润新知