从JS的hello world代码开始了解JS,在线编辑运行

不仅是javascript,每一门计算机的编程语言,好像有一个约定俗成的惯例,就是从输出“hello world”来开始编程语言的文档或教程,连html超链接文本也有。那么,这里也不必免俗,来看一看javascript的hello world的代码是怎么样的,有兴趣的朋友也可以点击代码下方的“试一试”按钮在线编辑、运行试一试,如下:

JS的hello world代码

<html>
<body>
  <p>欢迎进入javascript和编程的世界!点击下方的按钮,
  来跟世界说声hello!
  </p>
  <button class='btn btn-default' onclick="say()">say</button>
  <p id='say'></p>
  
  <script>
  function say(){
  	document.getElementById("say").innerHTML = "hello world";
  	//alert("hello world")
    //试一试将上面的注释符号(双斜杠)去除掉,然后再点击运行试一试
  }
  </script>
</body>
</html>

代码解析

如上代码,让我们来看一看上面的代码,html部分的就不多说了,这里直接说说js的代码部分:

  • 在html文档之中,js的代码通常情况下是包含在<script>和<</script>之间的,在学习javascript期间和一些实战过程中可以这样使用,但在大多数的实战当中都是将js的代码单独存放在一个后缀名为.js的文件当中,然后再引入到html文档中,当然,这是后话;
  • function是用来声明函数的关键词;
  • say()是函数名,与上面button元素中的onclick点击事件所触发的函数一致;
  • “{}”中包裹的是函数say()的代码块,或称为js的运行逻辑;
  • document.getElementById()是通过元素ID用来获取dom中的元素节点,如上实例中是p元素的id——say(现在这些不理解没关系,后面会详细讲解,这里只需要粗略了解一下个大概即可);
  • innerHTML,用来改变元素中的值,这里是写入“hello world”;
  • “//”是注释符号,当浏览器遇到js的注释符号后是不会执行该代码的;
  • alert()函数用来弹出一个对话框,通常用来提示用户的操作;

如果觉得有趣,就接着往下看吧(左侧的语法导航栏,如果是手机的话,则在文章下方)。



全栈前端 / JavaScript语法 :





















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.