第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>

代码:

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

我们互动下

1-2编程练习

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

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

任务

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

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

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

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

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

?不会了怎么办

代码:

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>
<!--引入外部文件的方式--> <script type="text/javascript">
//多行注释
/*我是多行注释!
我需要隐藏,
否则会报错哦!
*/
//在页面中显示文字 document.write("系好安全带,准备启航--目标JS"+"<br>")
//页面中弹出提示框
function duihua(){
var txt=confirm("请点击我,准备好了吗?");
if(txt==true)
{
document.write("准备好了,起航吧!!");
}
else{document.write("请重新学习课程内容吆!");}
}
//单行注释
//我是单行注释,我也要隐藏起来!
</script>
</head>
<body>
<input type="button" value="请点击我,准备好了吗" onclick="duihua()">
</input>
</body>
</html>

系好安全带,准备启航

JavaScript进阶 - 第1章 系好安全带,准备启航的更多相关文章

  1. JavaScript进阶篇 - -第1章 系好安全带

    第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...

  2. javascript进阶课程--第一章--函数

    javascript进阶课程--第一章--函数 学习要点 了解内存管理 掌握全局函数的使用 知识点 基本类型和引用类型 基本类型值有:undefined,NUll,Boolean,Number和Str ...

  3. javascript进阶教程第一章案例实战

    javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...

  4. javascript进阶课程--第二章--对象

    javascript进阶课程--第二章--对象 学习要点 理解面向对象的概念 掌握对象的创建方法 掌握继承的概念和实现方法 基本概念 对象究竟是什么?什么叫面向对象编程? 对象是从我们现实生活中抽象出 ...

  5. javascript进阶教程第二章对象案例实战

    javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...

  6. 慕课网javascript 进阶篇 第九章 编程练习

    把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看 ...

  7. JavaScript进阶 - 第9章 DOM对象,控制HTML元素

    第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...

  8. JavaScript进阶 - 第8章 浏览器对象

    第8章 浏览器对象 8-1 window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:

  9. JavaScript进阶 - 第7章 JavaScript内置对象

    第7章 JavaScript内置对象 7-1 什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的, ...

随机推荐

  1. HDU 2157 How many ways??:矩阵快速幂【i到j共经过k个节点的方法数】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2157 题解: 给你一个有向图,n个节点m条边,问你从i到j共经过k个节点的方法数(不算i点). 题解: ...

  2. Mybatis异常_03_Invalid bound statement (not found)

    一.异常信息 Caused by: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): c ...

  3. babel-runtime 和 babel-polyfill

    Babel 默认只转换新的 JavaScript 语法 https://excaliburhan.com/post/babel-preset-and-plugins.html babel-plugin ...

  4. android自定义控件(三) 增加内容 自定义属性 format详解

    转自 http://www.gisall.com/html/35/160435-5369.html 1. reference:参考某一资源ID. (1)属性定义: <declare-stylea ...

  5. bzoj1177&p3625 [APIO2009]采油区域p[大力讨论]

    我好菜菜啊. 给定矩形,从中选出三个边长K的正方形互不重叠,使得覆盖到的数总和最大. 想的时候往dp上钻去了..结果一开始想了一个错的dp,像这样 /************************* ...

  6. 洛谷P1220关路灯——区间DP

    题目:https://www.luogu.org/problemnew/show/P1220 区间DP. 代码如下: #include<iostream> #include<cstd ...

  7. 普通项目转为maven项目及相关操作说明

    普通项目转为maven项目及相关操作说明 1 原项目简述 如图,一般的项目大致包括三类路径:src,源码路径:test,单元测试路径:lib第三方类包路径. 示例项目中,BaseDao类依赖于mysq ...

  8. Python3解leetcode Best Time to Buy and Sell Stock II

    问题描述: Say you have an array for which the ith element is the price of a given stock on day i. Design ...

  9. sql基础内容2

    -- day16课程内容 --CREATE DATABASE day16;USE day16; -- *************一.数据约束********************------ 1.1 ...

  10. css 中visibility:hidden和display:none有什么区别呢

    <div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...