javascript基本语法

来源：互联网发布：知乎中国古代大型建筑编辑：程序博客网时间：2024/04/29 03:43

声明有助于浏览器正确显示网页。不区分大小写。不同的版本有一些通用声明。
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

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

定义不同数据类型：

<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对大小写是敏感的。

0 0