JavaScript总结-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

JavaScript总结

简介: JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。

JavaScript 是世界上最流行的脚本语言。
JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript 被设计为向 HTML 页面增加交互性。
许多 HTML 开发者都不是程序员,但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
1.JavaScript:写入 HTML 输出
实例
document.write(“h1 This is a heading /h1”);
document.write(“p This is a paragraph /p”);
2.HTML 中的脚本必须位于 script 与 /script 标签之间。
脚本可被放置在 HTML 页面的 body 和 head 部分中。
script 标签
如需在 HTML 页面中插入 JavaScript,请使用 script 标签。
script 和 script 会告诉 JavaScript 在何处开始和结束。
script 和 script之间的代码行包含了 JavaScript:
script
alert(“My First JavaScript”);
script
bod 中的 JavaScript
在本例中,JavaScript 会在页面加载时向 HTML 的 body 写文本:
实例
!DOCTYPE html
html
body

script
document.write(“h1 This is a heading /h1”);
document.write(“p This is a paragraph /p”);
/script
body
html
3.JavaScript 通常用于操作 HTML 元素。
通过指定的 id 来访问 HTML 元素,并改变其内容:
!DOCTYPE html
html
body
h1我的第一张网页/h1
p id=”demo”我的第一个段落/p
script
document.getElementById(“demo”).innerHTML=”我的第一段 JavaScript”;
/script
/body
/html
4.JavaScript 注释
body

h1 id=”myH1”/h1

p id=”myP” /p

script
// 输出标题:
document.getElementById(“myH1”).innerHTML=”Welcome to my Homepage”;
// 输出段落:
document.getElementById(“myP”).innerHTML=”This is my first paragraph.”;

p b注释:/b注释不会被执行。/p

/body
/html
5.JavaScript 变量
var x=2;
var y=3;
var z=x+y;
var值是什么就是什么数据类型
var pi=3.14;
var name=”Bill Gates”;
var answer=’Yes I am!’;
6.一条语句,多个变量
var name=”Gates”, age=56, job=”CEO”;
声明也可横跨多行:
var name=”Gates”,
age=56,
job=”CEO”;
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 carname 的值依然是 “Volvo”:
var carname=”Volvo”;
var carname;
例如
body
p假设 y=5,计算 x=y+2,并显示结果。/p
button onclick=”myFunction()”点击这里/button
p id=”demo”/p
script
function myFunction()
{
var y=5;
var x=y+2;
var demoP=document.getElementById(“demo”)
demoP.innerHTML=”x=” + x;
}
/script
/body
7.JavaScript 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
实例
var x // x 为 undefined
var x = 6; // x 为数字
var x = “Bill”; // x 为字符串
JavaScript 字符串
字符串是存储字符(比如 “Bill Gates”)的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
实例
var carname=”Bill Gates”;
var carname=’Bill Gates’;
8.JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。
汽车的属性:
car.name=Fiat
car.model=500
car.weight=850kg
car.color=white
汽车的方法:
car.start()
car.drive()
car.brake()
访问对象的属性
访问对象属性的语法是:
objectName.propertyName
本例使用 String 对象的 length 属性来查找字符串的长度:
var message=”Hello World!”;
var x=message.length;
9.script
$(function(){
{
alert(“Hello World!”);
}
})
/script
/head
body
button onclick=”myFunction()”点击这里/button
/body
/html
10JavaScript 运算符
运算符 = 用于赋值。
运算符 + 用于加值。
运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
y=5;
z=2;
x=y+z;
+ 加 x=y+2 x=7
- 减 x=y-2 x=3
* 乘 x=y*2 x=10
/ 除 x=y/2 x=2.5
% 求余数 (保留整数) x=y%2 x=1
++ 累加 x=++y x=6
– 递减 x=–y x=4
8.JavaScript 比较和逻辑运算符
比较和逻辑运算符用于测试 true 或 false。
运算符 描述 例子
== 等于 x==8 为 false
=== 全等(值和类型) x===5 为 true;x===”5” 为 false
!= 不等于 x!=8 为 true

大于 x>8 为 false
< 小于 x<8 为 true
= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true
9.JavaScript If…Else 语句
if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
if…else if….else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
实例
当时间小于 20:00 时,生成一个“Good day”问候:
if (time<20)
{
x=”Good day”;
}
实例
当时间小于 20:00 时,将得到问候 “Good day”,否则将得到问候 “Good evening”。
if (time<20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}
实例
如果时间小于 10:00,则将发送问候 “Good morning”,否则如果时间小于 20:00,则发送问候 “Good day”,否则发送问候 “Good evening”:
if (time<10)
{
x=”Good morning”;
}
else if (time<20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}
实例
如果时间小于 10:00,则将发送问候 “Good morning”,否则如果时间小于 20:00,则发送问候 “Good day”,否则发送问候 “Good evening”:
if (time<10)
{
x=”Good morning”;
}
else if (time<20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}
10 JavaScript For 循环
document.write(cars[0] + “br”);
document.write(cars[1] + “br”);
document.write(cars[2] + “br”);
document.write(cars[3] + “br”);
document.write(cars[4] + “br”);
document.write(cars[5] + “br”);
不过通常我们这样写:
for (var i=0;i《cars .length;i++)
{
document.write(cars[i] + “br”);
}
For/In 循环
JavaScript for/in 语句循环遍历对象的属性:
实例
var person={fname:”John”,lname:”Doe”,age:25};
for (x in person)
{
txt=txt + person[x];
}
11.JavaScript While 循环
只要指定条件为 true,循环就可以一直执行代码。
实例
本例中的循环将继续运行,只要变量 i 小于 5:
while (i<5)
{
x=x + “The number is ” + i + “
”;
i++;
}
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
由于这个 if 语句只有一行代码,所以可以省略花括号:
for (i=0;i<10;i++)
{
if (i==3) break;
x=x + “The number is ” + i + “
”;
}
12.
JavaScript 错误 - Throw、Try 和 Catch
JS Break
JS 验证
try 语句测试代码块的错误。
catch 语句处理错误。
13.JavaScript 表单验证
下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==”“)
{alert(alerttxt);return false}
else {return true}
}
}
下面是连同 HTML 表单的代码:
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” onsubmit=”return validate_form(this)” method=”post”
Email: input type=”text” name=”email” size=”30”
input type=”submit” value=”Submit”
/form
/body
/html
14.JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
15.HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
document.getElementById(id).innerHTML=new HTML
实例
本例改变了 p 元素的内容:
html
body

p id=”p1”>Hello World! /p

script
document.getElementById(“p1”).innerHTML=”New text!”;
/script

/body
/html
16改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法:
document.getElementById(id).attribute=new value
实例
本例改变了 img 元素的 src 属性:
!DOCTYPE html
html
body

img id=”image” src=”smiley.gif”

script
document.getElementById(“image”).src=”landscape.jpg”;
/script

/body
/html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: