热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javaScript语法及制作特效

JavaScript语法JavaScript主要有两个功能:1、实现客户端表单验证。2、实现页面交互特效。javascript主要由三部分组成:1、ECMAScript,是javascript的核心。2、DOM-DocumentObjectModel(文档对象模型)。3、BOM-BrowserObjectMode
Javascript语法
Javascript主要有两个功能:1、实现客户端表单验证。2、实现页面交互特效。
Javascript主要由三部分组成:1、ECMAScript,是Javascript的核心。2、DOM-Document Object Model(文档对象模型)。3、BOM-BrowserObject Model(浏览器对象模型)。
Javascript的特点:
Javascript被设计用来向HTML页面添加交互行为。
Javascript是一种脚本语言。
javasrcipt一般用于编写客户端脚本。
Javascript是一种解释行语言。
Javascript的基本结构:

例如:










引入Javascript方式三种:1、直接使用

作为标签事件:













Javascript是一种弱类型语言,可以不声明变量就直接使用。
声明变量的语法var 变量名。
Javascript中的数据类型:undefined,未定义。null,空。string,字符串类型。boolean,布尔类型。number,数值类型。
Javascript注释:
单行注释//
多行注释/*……*/
Javascript支持选择结构和循环结构
// Javascript Document
var today = new Date();
var weekday = today.getDay();
document.write("今天星期" + weekday);
switch(weekday) {
 case 5:
  document.write(" finally Day!");
  break;
 case 6:
  document.write(" super Day!");
  break;
 case 0:
  document.write(" sleepy Day!");
  break;
 default:
  document.write(" I'm looking forward to this weeked.");
  break;
}


使用方法











循环结构
// Javascript Document

var i=0;
document.write("0-20之间的整数(除去3的倍数)有:
"); for(i=0;i<=20;i++) { if(i%3==0) //i是3的倍数 { continue; } else { document.write(i+"
"); } }
使用方法













Javascript中的函数:1、转换函数:parseInt(),转换为整数。parseFloat(),转换为浮点型。2、isNaN()判断非数字(is not a number)。3、计算表达式的&#20540;。3、接受用户输入内容:prompt();
类型转换函数










系统函数
var number1 = prompt("请输入第一个数字");
var op = prompt("请输入操作运算符");
var number2 = prompt("请输入第二个数字");
if(isNaN(number1) || isNaN(number2)) {
 document.write("输入有误!有个数不是数字。");
} else {
 if(op != "+" && op != "-" && op != "*" && op != "/") {
  document.write("输入有误!操作运算符输入不正确。");
 } else {
  document.write("运算结果:" + eval(number1 + op + number2));
 }
}
自定义函数语法:
function 函数名(参数1,参数2,……){           调用函数的方法:
       ……//语句                                                             1、事件名=”函数名(传递的参数&#20540;)”;
       return返回&#20540;;                                                       2、函数名(传递的参数&#20540;);
}
自定义无参函数
function showHello(){
   for(var i=0;i<5;i++){
         document.write("

Hello World

"); } }
自定义有参函数
function showHello(count){
 for(var i=0;iHello World");   
      }
}
使用方法










匿名函数定义方法:
var sumFun = function(num1,num2){
       //代码
       Return(num1&#43;num2)                                        调用匿名函数的方法:

};                                                                          直接调用变量名。


Javascript制作页面特效
BOM模型中window对象常用的属性包括:1、history,有关客户访问过的URL的信息。2、location,有关当前URL的信息。3、screen,有关客户端的屏幕和显示性能的信息。注意:1、属性的使用方法是,window.属性名="某个属性&#20540;"。2、因为window是根对象,所以window可以省略,直接写出属性名="某个属性&#20540;"。3、window对象的这些属性也是一些对象,这些对象也包括一套属性和方法。
window对象常用的方法:1、prompt()方法,用于接收用户输入的信息。2、alert()方法,他表示弹出一个警告对话框。3、confirm()方法,他表示弹出确认消息框。4、close()方法,他表示关闭某个浏览器的窗口。4、open()方法,他表示打开一个新的窗口。5、setTimeout()方法,表示隔一段时间调用某个函数。6、setInterval()方法,表示设置某个时间间隔,反复调用某个执行函数。
window对象的open方法语法:window.open("弹出窗口的url","窗口名称","窗口特征")

这些参数中窗口名称一般省略为空,窗口特征包括:1、窗口的大小尺寸height和width。2、打开窗口时的初始位置坐标这里由left和top表示。3、是否带有工具栏地址栏等,包括工具栏toolbar、滚动条scrollbar、地址栏location、菜单栏menubar和标题栏titlebar,如果希望现实则设置对应项的&#20540;为1或yes、不显示则设置为0或no。4、是否允许改变大小resizable。









  
















history对象的常用功能:1、back()方法,表示返回上一页。2、forward()方法,表示前进一页。3、go()方法,表示跳转到制定页(go后面的参数,传入一个数字表示前进的相对位置,这个位置可以是负数。)。
location对象的常用方法和属性:1、href(),设置或返回url。2、reload()方法,表示重新加载,即类&#20284;浏览器中的刷新按钮。3、replace()方法,用新的url地址替代原来的url地址。

Document对象的常用属性:1、referrer:返回载入当前文档的URL。2、URL:返回当前文档的URL。

常用的方法:1、getElementById(),返回对拥有指定id的第一个对象的引用。2、getElementsByName(),返回带有指定名称的对象的集合。3、getElementsByTagName(),返回带有指定标签名的对象的集合。4、write(),向文档写文本,HTML表达式或Javascript代码。





        



 
我的购物车
商品名称 数量(个) 价格(元) 操作
&#160;&#160;&#160;&#160;


Javascript中创建数组的语法:var 数组名 = new Array(size);
使用for…in循环读取数组中的元素,例如:
Var fruit = new Array(“apple”,”orange”,”peach”,”banana”);
for(var x in fruit){
       document.write(fruit[x]&#43;”

}
Array对象的常用属性:length,设置或返回数组中元素的长度。常用的方法:1、join("参数"),将数组拼接成字符串,参数是我们用了连接成字符串的一个分隔符。2、sort(),将数组排序。
Select对象常用属性:options[],返回一个数组,表示select对象它里面的所有option选项。selectedIndex:被选中选项的索引号。length:选项的总数。Select对象常用的方法:add(Option对象,添加位置):增加选项。事件:onchange :当改变选项是触发。
onmouseout:表示鼠标不在上面时。
设置元素的隐藏和显示的方法有:style对象的display属性,&#20540;为block表示显示,&#20540;为none表示隐藏。style对象的visibility属性,&#20540;为visible是表示显示,&#20540;为hidden是表示隐藏。两者的区别:使用display后,元素的位置为空,反之位置保留。
制作对联广告:对广告单独设置一个div,设置它的style对象的position对象为absolute,要对其位置进行修改则使用style属性的left和top属性修改。如果进行修改必须要在行内样式进行修改。如果使用外部样式,对于IE浏览器使用currentStyle对象获取或设置元素的坐标。对于其他浏览器则使用getComputedStyle()方法(document.defaultView.getComputedStyle(div对象,null))。
获取鼠标滚动的距离:scrollTop,表示纵向距离。scrollLeft,表示横向距离。

鼠标滚动事件,onscroll,表示滚动鼠标时触发的一个事件。var obj = document.documentElement;


推荐阅读
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • XNA 3.0 游戏编程:从 XML 文件加载数据
    本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件,并通过内容管道加载到游戏中。此外,还会涉及自定义类型读取器和写入器的实现。 ... [详细]
  • JavaScript中属性节点的类型及应用
    本文深入探讨了JavaScript中属性节点的不同类型及其在实际开发中的应用,帮助开发者更好地理解和处理HTML元素的属性。通过具体的案例和代码示例,我们将详细解析如何操作这些属性节点。 ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 本文探讨了在通过 API 端点调用时,使用猫鼬(Mongoose)的 findOne 方法总是返回 null 的问题,并提供了详细的解决方案和建议。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 本文详细介绍超文本标记语言(HTML)的基本概念与语法结构。HTML是构建网页的核心语言,通过标记标签描述页面内容,帮助开发者创建结构化、语义化的Web页面。 ... [详细]
  • 本文详细介绍如何利用已搭建的LAMP(Linux、Apache、MySQL、PHP)环境,快速创建一个基于WordPress的内容管理系统(CMS)。WordPress是一款流行的开源博客平台,适用于个人或小型团队使用。 ... [详细]
  • 本文深入探讨了JavaScript中循环结构的使用方法,特别是While循环,用于重复执行一段代码直到特定条件不再满足。同时,文章还介绍了Switch语句在多条件分支选择中的应用。 ... [详细]
  • 本文详细探讨了JavaScript中的闭包与柯里化技术,这两者是函数式编程的重要组成部分,对提升代码的灵活性和可维护性具有重要作用。 ... [详细]
  • 本文探讨如何在VueJS项目中通过配置vue.config.js文件实现多页面应用(MPA),特别是针对管理端和客户端的不同需求。 ... [详细]
  • 本文介绍如何使用 Bootstrap-table 插件实现表格中某一列数据的求和,并在表脚显示总计值。 ... [详细]
author-avatar
mobiledu2502879793
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有