四、JavaScript 语句
1.JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
2.分号 ;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
提示:您也可能看到不带分号的案例。
在 JavaScript 中,用分号来结束语句是可选的。
3.JavaScript 对大小写是敏感的
4.空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:
var name="Hello";
var name = "Hello";
4.对代码进行折行
document.write("Hello <br> World!");
注意:
JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。
而对于传统编程来说,会在执行前对所有代码进行编译。
5.java注释
/**/
和
//
五、JavaScript 变量
1.重新声明 JavaScript 变量
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 carname 的值依然是 "Volvo":
var carname="Volvo";
var carname;
代码案例:
<html> <head></head> <body> <script type="text/javascript"> var comment = "waxun"; var comment; document.write(comment); </script> </body> </html>
页面展示:
waxun
JavaScript 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
1.JavaScript 拥有动态类型
这意味着相同的变量可用作不同的类型:
var x // x 为 undefined
v
var x = 6; // x 为数字
v
var x = "Bill"; // x 为字符串
1.1JavaScript 数字
var x1=34.00; //使用小数点来写
v
var x2=34; //不使用小数点来写
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
1.2JavaScript 布尔
布尔常用在条件测试中。
1.3JavaScript 数组
代码案例:
<html> <head> <title>js数组</title> </head> <body> <script> var i; var ast = new Array(); ast = ["waxun","kaguo","yuzhou"]; for(i=0 ;i<ast.length;i++) { document.write(ast[i]+"<br>"); } </script> </body> </html> 运行结果: waxun kaguo yuzhou 1.4JavaScript 对象 对象由花括号分隔。 在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。 属性由逗号分隔: <html> <head> <title>js数组</title> </head> <body> <script> //对象的属性以名称和值对的形式(name : value) 来定义 var person={ firstname:"waxun", lastname:"kaguo", id:22 }; name1 = person.firstname; name2 = person["lastname"]; document.write(name1+"<br>"); document.write(name2); </script> </body> </html> 运行结果: waxun kaguo
1.5Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
<html> <body> <script> var person; var car="Volvo"; document.write(person + "<br />"); document.write(car + "<br />"); var car=null document.write(car + "<br />"); </script> </body> </html>
运行结果:
undefined
Volvo
null
1.6声明变量类型
当您声明新变量时,可以使用关键词 "new" 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
六、JavaScript 对象
1.JavaScript 中的对象
在 JavaScript 中,对象是数据(变量),拥有属性和方法。
当您像这样声明一个 JavaScript 变量时:
2.Throw 语句
<!DOCTYPE html> <html> <body> <script> function myFunction() { try { var x=document.getElementById("demo").value; if(x=="") throw "值为空"; if(isNaN(x)) throw "不是数字"; if(x>10) throw "太大"; if(x<5) throw "太小"; } catch(err) { var y=document.getElementById("mess"); y.innerHTML="错误:" + err + "。"; } } </script> <h1>我的第一个 JavaScript 程序</h1> <p>请输入 5 到 10 之间的数字:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">测试输入值</button> <p id="mess"></p> </body> </html>
3.JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证
七、JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
八、JavaScript HTML DOM 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
代码案例:
<!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> <script> function mOver(obj) { obj.innerHTML="谢谢" } function mOut(obj) { obj.innerHTML="把鼠标移到上面" } </script> </body> </html>
相关推荐
网页设计与制作教程第4章 网页特效——JavaScript.ppt网页设计与制作教程第4章 网页特效——JavaScript.ppt
```javascript downloadZip(record) { // ... const downUrl = _ctxPath + '/rest/XXXX/downloadIssueAttAchmentZip?issueFormRecordId=' + issueFormRecordId; this.$http({ method: 'get', url: downUrl, ...
综上所述,榆落微时光v1——1.0.39.rar 包含了该小程序的相关文件,通过解压和分析这些文件,开发者或用户可以获取到程序的详细信息,进一步了解和使用这个小程序。对于想要学习小程序开发的人来说,这个压缩包可能...
这个名为"IOS应用源码——UIWebViewBrowse.rar"的压缩包文件很可能包含了一个简单的iOS应用示例,该示例展示了如何使用UIWebView来浏览网页。让我们深入探讨一下UIWebView及其相关知识点。 **UIWebView介绍** ...
【南瓜脚本包——自用.zip】是一个包含个人使用的脚本集合的压缩文件。脚本包通常是由一系列编程脚本组成的,这些脚本可能用于自动化任务、数据处理、系统管理或者其他的IT工作流程。在本案例中,“南瓜脚本包”可能...
JSP(Java Server Pages)是一种基于Java的动态网页开发技术,它允许开发者将HTML、CSS、JavaScript等静态内容与Java代码结合在一起,以创建交互式的Web应用。在本"JSP开发技术原理与实践教程——代码.rar"压缩包中...
Vue.js是一款流行的前端JavaScript框架,它以其组件化、轻量级以及易于学习的特性,被广泛应用于构建用户界面,尤其适合单页应用程序(SPA)的开发。 【描述】:“网页模板——vue.js实现的销售数据柱状图表统计...
- **文件格式**:了解并掌握不同格式(如PNG、JPG、SVG等)的特点,选择最合适的导入方式。 - **尺寸调整**:根据幻灯片大小和需求,适当调整3D小人的尺寸和比例,保持视觉一致性。 4. **软件支持** - Microsoft...
本资源"安卓Android源码——Browser.rar"提供的是Android系统自带浏览器——Browser应用的相关源代码,这对于开发者来说是一份宝贵的参考资料。通过分析这份源码,我们可以深入了解Android系统的WebView组件、网络...
本项目“安卓Andriod源码——WebViewDemo.zip”提供了一个完整的示例,帮助我们深入理解并掌握WebView的使用。 一、WebView基本概念 1. WebView是Android SDK中的一个类,它继承自View,可以显示HTML、CSS、...
本"Python学习导航(CSDN)——程序"教程将指导你深入理解Python编程,无论你是从其他编程语言转行,如JavaScript、Java或C++,还是初次接触编程,都能从中受益。 首先,让我们从基础开始。Python的基础包括: 1. ...
TypeScript是一个由微软公司开发的开源编程语言,它是JavaScript的一个超集,增加了类型系统和对ES6+新特性的支持。TypeScript的设计者是安德斯·海尔斯伯格,同时也是C#语言的创始人。TypeScript与Flow不同,Flow...
在这个“网页模板——Vue.js圆形CSS3颜色渐变色拾取器”项目中,我们可以深入探讨Vue.js如何与CSS3技术结合,创建一个动态的颜色选择工具。 首先,Vue.js的核心在于其响应式数据绑定系统。通过使用`v-model`指令,...
3. **JavaScript与AJAX**:为了实现动态效果,你需要了解基本的JavaScript语言和AJAX(异步JavaScript和XML)。Dreamweaver支持在页面中插入和编辑脚本,使得动态功能如表单验证、数据交互等变得简单。 4. **服务器...
【iOS应用源码——WebiPadTest】是一款专为iPad设备设计的iOS应用程序源代码,它主要展示了如何在iOS平台上开发一个基于Web的交互式应用。这个项目可能包含了使用WebKit框架来构建用户界面,通过加载HTML、CSS和...
本资源“网页模板——vue.js实现的智能搜索框功能源码.zip”提供了一个使用Vue.js实现的智能搜索框功能的示例代码,这对于开发者来说是一个很好的学习和参考资源。 在Vue.js中,实现智能搜索框功能通常涉及到以下几...
在决定使用哪种语言之前,需要深入了解它们的特点。 Python 以其简洁的语法和强大的库支持受到青睐,尤其在科学计算、数据分析、机器学习和人工智能领域表现出色。Python 的动态类型和面向对象特性使得开发速度快,...
在给定的压缩包文件中,“网页模板——vue.js实现的冒泡数字阶梯顺序排列可视化动画特效源码”是一个使用Vue.js技术实现的示例项目,它展示了如何通过Vue来创建一个动态的、可视化的冒泡排序算法过程。 冒泡排序是...
"Vue后台管理——路由"这个压缩包文件很可能是包含了一个关于Vue.js后台管理系统中的路由实现的实例教程或代码库。 1. **路由注册**:Vue.js 使用 `vue-router` 插件来管理应用的路由。在初始化Vue实例时,我们需要...
4. **动画原理**:了解帧动画的概念,通过改变图形的位置、大小、颜色等属性,随着时间推移创造动态效果。 5. **随机化**:星球的生成可能涉及到随机数,以确保每次点击都能产生不同的星球样式,这可能需要用到`...