javascript基本语法

最新推荐文章于 2024-09-11 16:48:34 发布

micro_hz

最新推荐文章于 2024-09-11 16:48:34 发布

阅读量417

点赞数

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/micro_hz/article/details/49507093

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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