2013210518 实验四 编写简单JavaScript脚本
地理信息与旅游学院
地理信息科学专业实验报告
（2015—2016学年第二学期）
课程名称： web程序设计
班级：地信13综
姓名：
学号： 2013210518 指导老师：孙勇
Javascript综合应用小案例
按需求弄了一个取词以及标红的小应用。 先上demo ：/ 很多平时常用的东西，都用上了，所以拿出来说说。 一、代码 View Code 以上是所有js代码，比较长，下面将列举一些比较突出的点（望高人多多指点）。 二、代码分析 1.获取文本 getSelectionText: function(){ if(window.getSelection) { return window.getSelection().toString(); } else if(document.selection && { return; } return ''; } 这个在以前（JavaScript操控光标，你会么？）的文章里也说过，就不赘述了。 2.创建控制框 createBtn: function(evt){ var button = document.createElement("div"), //...csses= { "height" : "30px", "line-height" : "30px", "position": "absolute", "top": y + 10 + "px", "left": x + 10 + "px", "cursor": "pointer", "border": "1px solid #000", "background": "#EEE", "padding": "2px 8px", "border-radius": "3px" }; for(i in csses){
if(csses.hasOwnProperty(i)){ cssList += i + ":" + csses[i] + ";"; } } =cssList; button.innerHTML = "添加到关键词列表"; button.setAttribute("id", "btn"); //...} 这里有一点我想说说，在写js的时候，会经常涉及到对DOM对象style的处理，如果不想额外加入一个plugins.css之类的文件，可以像上面一样，将样式放置在一个对象中，然后利用for in将其写入，本来开始我用的是 obj.style[i] = csses[i]; 不知道为什么，在IE下报错了，后来便用cssText代替。 效果： 3.标红 //关键词标红 setRed: function(str){ var content = this._("article"), temp = '(' + str + ')'; reg = new RegExp(temp,'g'); content.innerHTML = , "$1"); } 这里主要就是正则表达式的事情了，正则的话，推荐两篇文章 ?一篇是司徒正美的，讲的比较全面，比较系统。点我链接过去→ ?一篇是30分钟搞定正则，这个讲说是对所有语言，JS的话正则这一块还不是特别完善和强大。点我链接过去→ 哈哈，相信用过正则的人不需要我来解释这个$1了吧，他的意思就是匹配到的第一个。 当然，删除标红和这个原理是差不多的。 //删除标红 rmRed: function(str){ var content = this._("article"), temp = "(
《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式
《HTML+CSS+JavaScript网页制作案例教程》课程教学
传智播客 《HTML+CSS+JavaScript网页制作案例教程》 教学设计 课程名称：HTML+CSS+JavaScript网页制作案例教程 授课年级：2015年级 授课学期：2015学年第二学期 教师姓名：某某老师
201 年月日 课题名称第5章列表与超链接 计划 课时 6课时 内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。 教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块； ●掌握超链接标记的使用，能够使用超链接定义网页元素； ●掌握CSS伪类，会使用CSS伪类实现超链接特效； 重点及措施 教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：有序列表、定义列表、链接伪类。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。 教学过程 第一课时 （制作“精美电商悬浮框”，讲解无序列表、有序列表） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。 1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px， 同时盒子有3px的边框，请问这个盒子的总宽度是多少？（） A、333px B、366px C、336px D、363px
JavaScript图形实例：蝴蝶结图案
JavaScript图形实例：蝴蝶结图案 1．长短瓣相间的蝴蝶结 设定曲线的坐标方程为： b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ)); x1=b*cos(θ); x2=b*cos(θ+π/8); y1=b*Math.sin(θ); y2=b*Math.sin(θ+π/8); （0≤θ≤2π，2≤n≤5） 在0~2π区间中从θ=0开始，每隔π/360按曲线方程求得两个点的坐标值(x1,y1)和(x2,y2)，并将求得的两点连成一条线段，这样，可以得到一个长短瓣相间的蝴蝶结图案。 编写如下的HTML代码。