1. javaScript能做什么?
(1)写入HTML输出
document.write("<h1>This is a heading</h1>");
注意:只能在HTML输出中使用document.write。如果在文档加载后使用该方法,会覆盖整个文档。
(2)对事件作出反应
<button type="button" οnclick="alert('welcome!')">点击这里</button>
(3)改变HTML内容
x=document.getElementById("demo");
x.innerHTML="Hello JavaScript";
(4)改变HTML元素的属性(HTML图像)
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
(5)改变HTML样式
x=document.getElementById("demo");
x.style.color="#ff0000"
(6)验证输入
2. javaScript脚本加载的位置
(1)HTML页面的<body>和<head>部分中
注意,HTML中的脚本必须位于<script>与</script>之间
(2)将脚本保存到外部文件中
如需使用外部文件,请在<script>标签的“src”属性中设置该.js文件
外部脚本不能包含<script>标签。
3. javaScript语句的注意点
(1)对大小写敏感
(2)自动忽略多余的空格
(3)在文本字符串中使用反斜杠对代码行进行换行
(4)单行注释(//)多行注释(/* */)
4. javaScript变量的注意点
(1)对大小写敏感
(2)必须以字母开头,但是也可以以$和_开头
(3)通过“var”来申明变量
5. javaScript数据类型
(1)javaScript拥有动态类型
(2)字符串:单引号或者双引号
(3)数字:带小数点和不带小数点,科学计数法
(4)布尔类型:ture false
(5)数组:var cars=new Array();
(6)对象:由花括号分隔,。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
6. javaScript对象
属性是与对象相关的值。
方法是能够在对象上执行的动作。
(1)创建 javaScript对象
JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
你也可以创建自己的对象。
person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";
(2)访问对象的属性
objectNamepropertyName
var message="Hello World!"; var x=message.length;
(3)访问对象的方法
objectNamemethodNamevar message="Hello world!"; var x=message.toUpperCase();
7. javaScript函数
(1)函数语法
function functionname(){ 这里是要执行的代码}(2)带参数的函数function myFunction(var1,var2){ 这里是要执行的代码}(3)带有返回值的函数function myFunction(){ var x=5;return x;}若仅仅希望退出函数时 ,也可使用 return 语句function myFunction(a,b){ if (a>b) { return; }x=a+b} 8. javaScript运算符
(1)算术运算符:+ - * / % ++ --
(2)赋值运算符:= += -= *= /= %=
(3)比较运算符:
(4)逻辑运算符
(5)条件运算符:
9. javaScript判断语句
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
for/in - 循环遍历对象的属性
var person={fname:"John",lname:"Doe",age:25};
for (x in person) { txt=txt + person[x]; }运行结果:JohnDoe2510. javaScript错误-Throw、Try和Catch
try 语句测试代码块的错误。
catch 语句处理错误。throw 语句创建自定义错误。(1)JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。JavaScript 语句 try 和 catch 是成对出现的。(2)Throw 语句throw 语句允许我们创建自定义错误。正确的技术术语是:创建或抛出异常(exception)。如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。<script>function myFunction(){ try { var x=document.getElementById("demo").value; if(x=="") throw "empty"; if(isNaN(x)) throw "not a number"; if(x>10) throw "too high"; if(x<5) throw "too low"; }catch(err) { var y=document.getElementById("mess"); y.innerHTML="Error: " + err + "."; }}</script>11. javaScript表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。JavaScript 表单验证JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有: ● 用户是否已填写表单中的必填项目? ● 用户输入的邮件地址是否合法? ● 用户是否已输入合法的日期? ● 用户是否在数据域 (numeric field) 中输入了文本?(1)必填(或必选)项目
<html><head><script type="text/javascript">function validate_required(field,alerttxt){ with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} }}function validate_form(thisform)
{ with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} }}</script></head><body><form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>(2)E-mail验证
意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点<html><head><script type="text/javascript">function validate_email(field,alerttxt){ with (field){ apos=value.indexOf("@")dotpos=value.lastIndexOf(".")if (apos<1||dotpos-apos<2) {alert(alerttxt);return false}else {return true}}}function validate_form(thisform){ with (thisform){ if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false}}}</script></head><body><form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>说明:
with(field){};设定作用域focus() 方法用于给予该元素焦点。这样用户不必点击它,就能编辑显示的文本了。【学习网站】W3school