您的位置：首页 > Web前端 > JavaScript

javascript基本语法

2015-10-30 10:06 671 查看

声明有助于浏览器正确显示网页。不区分大小写。不同的版本有一些通用声明。

javascript的函数定义:

<html>
<head>
<title>this is a js page</title>
//此处定义一个函数名为"myFunction"的函数，功能为打印一句话
//在head标签里这样在页面加载的时候就不会执行
<script type="text/javascript">
function myFunction(){
document.write("this is myFunction")
}
</script>
</head>
<body>
<p>
this is my javascript function test!
</p>
//这里为按钮触发该函数执行
<button type="button" onclick="myFunction()">click me</button>
</body>
</html>

第二种定义方式放在body标签里：

<html>
<head>
<title>this is a js page</title>

</head>
<body>
<p>
this is my javascript function test!
</p>
<script type="text/javascript">
function myFunction(){
document.write("this is myFunction")
}
</script>
<button type="button" onclick="myFunction()">click me</button>
</body>
</html>

这里两种功能一样，主要是加载顺序不同。

还可以外部单独定义个.js文件存放复用函数。

javascript可以通过标签的id来访问元素：

<!DOCTYPE html>
<html>
<head>
<title>this is a js page</title>

</head>
<body>
//这里定义这句话的id为"test"
<p id = "test">this is s a test</p>
<script type="text/javascript">
//这里通过getElementById获取到标签，更新为"update p"
document.getElementById("test").innerHTML="update p";
</script>
</body>
</html>

如果使用document.write()会将整个页面都覆盖：

<body>
<p>
this is my javascript function test!
</p>
<p id = "test">this is s a test</p>
//这里定义一个函数名字为myClick()，功能为打印日期
<script type="text/javascript">
function myClick(){
document.write(Date());
}
</script>
//这里设置一个按钮，会触发myClick()方法。这里触发了之后会完全覆盖掉原//上面的两句话都会被覆盖
<button type = "button" onclick="myClick()">click me</button>
</body>

在控制台打印信息：

<html>
<head>
<title>this is a js page</title>
</head>
<body>
<script type="text/javascript">
a = 1;
b = 2;
c = a + b;
//按f12调试即可在控制台看到结果
console.log(c);
</script>
</body>
</html>

javascript语法:

特点：轻量级，高级。

数字：整数，小数，科学计数：

<html>
<head>
<title>this is a js page</title>
</head>
<p>12</p>
<p>3.14</p>
<p id = "test"></p>
<body>
<script type="text/javascript">
document.getElementById("test").innerHTML = 10e3;
</script>
</body>
</html>

显示为：

12

3.14

10000

字符串，单引号双引号都可：

<html>
<head>
<title>this is a js page</title>
</head>
//id标识标签
<p id = "test1"></p>
<p id = "test2"></p>
<body>
<script type="text/javascript">
//单引号和双引号赋值
a = 'micro_hz';
b = "micro_hz";
document.getElementById("test1").innerHTML = a;
document.getElementById("test2").innerHTML = b;
</script>
</body>
</html>

显示结果:

micro_hz

micro_hz

表达式字面量计算：

<html>
<head>
<title>this is a js page</title>
</head>
<p id = "test"></p>
<p id = "test2"></p>
<p id = "test3"></p>
<p id = "test4"></p>
<body>
<script type="text/javascript">
a = 3;
b = 7;
document.getElementById("test").innerHTML = a + b;
document.getElementById("test2").innerHTML = a - b;
document.getElementById("test3").innerHTML = a * b;
document.getElementById("test4").innerHTML = a / b;
</script>
</body>
</html>

结果：

10

-4

21

0.42857142857142855

定义变量：

<html>
<head>
<title>this is a js page</title>
</head>
<p id = "test"></p>
<p id = "test2"></p>
<body>
<script type="text/javascript">
//定义变量
var a = 1;
var b = 2;
var c = 3;
//输出变量到页面
document.getElementById("test").innerHTML = a;
document.getElementById("test2").innerHTML = (a + 1) * 3;
document.getElementById("test3").innerHTML = (a + b) * 2;
</script>
</body>
</html>

结果：

1

6

8

定义不同数据类型：

<script type="text/javascript">
//数字
var lenght = 1;
var area = lenght * 2;
//字符串
var name = "micro";
//数组
var company = ["apple","IBM","Alibaba"];
//对象
var person = {name:"micro",age:20};
</script>

javascript对大小写是敏感的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航