热门标签 | 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;


推荐阅读
  • 前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法:一:跳转到新页面,并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]
  • JavaScript在常人看来都是门出不了厅堂的小语言,仅管它没有明星语言的闪耀,但至少网页的闪耀还是需要它的,同时它是一门很实用的语言,本人平时就喜欢拿它来写点实用工具或应用,本文演示用JavaSc ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤,包括安装必要的工具和驱动,测试mssql的连接,配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值,实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • 本文介绍了Android中的assets目录和raw目录的共同点和区别,包括获取资源的方法、目录结构的限制以及列出资源的能力。同时,还解释了raw目录中资源文件生成的ID,并说明了这些目录的使用方法。 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • 用JavaScript实现的太空人手表
    用JavaScript实现的太空人手表-JS写的太空人手表,没有用canvas、svg。主要用几个大的函数来动态显示时间、天气这些。天气的获取用到了AJAX请求。代码中有详细的注释 ... [详细]
  • Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]
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社区 版权所有