码迷,mamicode.com
首页 > Web开发 > 详细

1、JS的HelloWord

时间:2019-10-29 13:15:49      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:mic   OLE   height   pen   event   show   splay   rip   第一步   

JS中的HelloWord

第一步还是先建一个.html的文件↓

技术图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
View Code

然后像css要在style里写一样,js代码要写在script标签里

alert的作用:浏览器弹出警告框↓

技术图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <!-- 所有的JS代码要写在script标签内 -->
    <script>
        /*控制浏览器弹出警告框*/
        alert("我的第一行JS代码")
    </script>
</head>
<body>
    
</body>
</html>
View Code

效果图↓

技术图片

document.write()的作用:让计算机在页面中输出一个内容↓

技术图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <!-- 所有的JS代码要写在script标签内 -->
    <script>
        //让计算机在页面中输出一个内容 
        document.write("看看我在不在页面里")
    </script>
</head>
<body>
    
</body>
</html>
View Code

效果图↓

技术图片

从代码中可以看到我的body中没有写任何内容,但是这段话也出现在页面,而且查看时这段话在body里,所以说document.write()可以向body中写入一个内容。

console.log()的作用:向控制台输出一个内容↓

技术图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <!-- 所有的JS代码要写在script标签内 -->
    <script>
        //向控制台输出一个内容
        console.log("猜猜我在哪?")
    </script>
</head>
<body>
    
</body>
</html>
View Code

效果图↓

技术图片 只在控制台中显示,页面不会显示。

将这三条指令一起写出来看看会不会执行↓

技术图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <!-- 所有的JS代码要写在script标签内 -->
    <script>
        /*控制浏览器弹出警告框*/
        alert("我的第一行JS代码")
        //让计算机在页面中输出一个内容 
        document.write("看看我在不在页面里")
        //向控制台输出一个内容
        console.log("猜猜我在哪?")
    </script>
</head>
<body>
    
</body>
</html>
View Code

会执行,只不过js语言执行顺序是从上向下一行一行执行,所以执行顺序为alert、document、console,可以复制代码试一下 :)

 

1、JS的HelloWord

标签:mic   OLE   height   pen   event   show   splay   rip   第一步   

原文地址:https://www.cnblogs.com/StevenSunYiwen/p/11758044.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!