【JavaScript】JavaScript基本使用方法

简介: 本文讲解:JavaScript基本使用方法


image.gif编辑

如何回复程序员发来的短信:Hello world

—hello nerd.


前言:

大家好,我是程序猿爱打拳。今天我给大家讲解的是初识JavaScript中基本组成成分、引入方法、输入输出语句,并用源码与效果图的方式展示给大家。


目录

1.JavaScript组成

2.JavaScript代码初体验

3.JavaScript代码引入方式

3.1行内式

3.2.嵌入式

3.3.外链式

4.输入输出语句

4.1prompt()语句

4.2alert()语句

4.3document.write()语句

4.4console.log()语句

5.JavaScript注释

5.1单行注释

5.2多行注释


1.JavaScript组成

JavaScript由ECMAScript、DOM、BOM这三部分组成。

image.gif编辑

    • ECMAScript:规定了JavaScript的编程语法与基础核心内容,是所有浏览器都遵循的语法标准。
    • DOM:是万维网制定的用于处理HTML文档和XML文档的编程接口。
    • BOM:浏览器对象模型,也是一套编程接口,一般进行刷新页面、弹出警告框、跳转页面等。

    2.JavaScript代码初体验

    在浏览器中输出Hello World。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <script >
          document.write('Hello World');
        </script>
      </body>
    </html>

    image.gif

    显示结果:

    image.gif编辑

    如何实现的,下面我就来一一讲解。


    3.JavaScript代码引入方式

    首先在编写JavaScript代码时,我们需要先引入JavaScript代码。有三种引入方式分别为行内式嵌入式外链式


    3.1行内式

    行内式我们理解为直接在一行内进行编写,例如我点击一个名为"网站"的链接打印出一个警告框提示"本站为私人网站请自行离开"。

    <a href="javascript:alert('此网站为私人网站请自行离开');">网站</a>

    image.gif

    显示结果:

    image.gif编辑

    注意:

    1.<a></a>标签是定义超链接,用于从一张页面链接到另一张页面。

    2.href 属性是 <a></a>标签的重要属性,它指向的是链接的目标。


    3.2.嵌入式

    嵌入式我们理解为,使用<script></script>标签包裹的JavaScript代码。例如我要编写一个提示框询问"今天你过的开心吗?"

    <script>
      prompt('今天你过的开心吗?','yes');
    </script>

    image.gif

    窗口显示为:

    image.gif编辑

    注意:

    1.<script></script>标签为JavaScript主要标签,<script> 标签用于定义客户端脚本,也可以使用src属性实现外部链接。

    2.prompt()语句为输入语句,在浏览器中弹出输入框,用户也可以输入内容。


    3.3.外链式

    将JavaScript代码单独写在一个后缀为.js的文件中,然后在HTML页面中使用src属性来引入这个.js文件。就能实现外链式的用法,一般当代码足够多时我们会用到该引入方式。

    例如我在.js文件里面写入一句"Hello World",并使用外链式在浏览器中显示出来:

    //.html文件下
    <script src="teset.js"></script>
    //.js文件下
    document.write('Hello World');

    image.gif

    输出结果:

    image.gif编辑

    注意:

    1.document.write()语句为输出语句,用于在网页中输出内容。


    4.输入输出语句

    JS中的输入语句不同于C中的scanf和Java中Sout,JS基本的输入输出语句对应下表:

    类型 语句 说明
    输入 prompt() 用于在浏览器中弹出输入框,用户可以输入内容
    输出 alert() 用于浏览器中弹出警告框
    输出 document.write() 用于网页中输出内容
    输出 console.log() 用于在控制台中输出信息

    4.1prompt()语句

    prompt语句使用效果就是在网页打开时弹出一个带有提示信息的输入框,如提示"今天你学习了吗?"

    <script >
      prompt('今天你学习了吗?');
    </script>

    image.gif

    显示效果:

    image.gif编辑

    如果你想让输入框有一个默认的值,你可以在()里再用,号分割出另一段话,如输入框默认显示"学习了"。当然这个默认的文字可以进行修改

    <script >
      prompt('今天你学习了吗?','学习了');
    </script>

    image.gif

    显示效果:

    image.gif编辑


    4.2alert()语句

    alert语句我们在上面的行内式介绍中已经讲解到了,使用alert与编写代码实现的效果是弹出一个警告框,例如弹出一个"不好好学习就找不到好offer"的警告。

    <script >
      alert('不好好学习就找不到好offer');
    </script>

    image.gif

    显示效果:

    image.gif编辑


    4.3document.write()语句

    document.write语句会直接将你打出的内容显示在浏览器页面中,默认为左上角显示。例如在页面显示"我是帅哥"。

    <script >
      document.write('我是帅哥');
    </script>

    image.gif

    显示效果:

    image.gif编辑


    4.4console.log()语句

    console.log语句就与上述几个语句有些许不同了,它是在控制台中输出内容的。首先我们要先打开控制台,查看控制台我们直接按F12即可。

    不知有没有小伙伴,在浏览网页时有没有不小心按到那个按键然后页面显示了一大堆看不懂的代码,这就是你误按F12造成的结果。

    image.gif编辑

    言归正传,例如我要使用console.log()语句在控制台中显示"我今天好好学习了,我真棒!"

    <script >
      console.log('我今天好好学习了,我真棒!');
    </script>

    image.gif

    显示效果:

    image.gif编辑


    5.JavaScript注释

    JS分为两种注释方法,分为单行注释多行注释


    5.1单行注释

    单行注释,与C、Java中一样使用'//'来进行注释,用法如下程序所示。

    <script >
      console.log('我今天好好学习了,我真棒!');//在控制台输入文本信息
    </script>

    image.gif


    5.2多行注释

    多行注释,我们以/*开头,*/结尾。例如我写了一大串代码突然我不想用了,我可以使用这种方式进行屏蔽。

    <script >
      /*console.log('我今天好好学习了,我真棒!');
      alert('Hello World');
      document.write('输出内容');*/
    </script>

    image.gif

    我们可以看到/**/内的内容都变成了灰色。当然你也可以使用Ctrl+/来实现快速的屏蔽效果。


    重点总结:

    1.JavaScript是由ECMAScript、DOM、BOM这三部分组成。

    2.JavaScript代码引入方式有行内式、嵌入式、外链式三种引入方式。

    3.输入语句为prompt(),输出语句为alert()、document.write()、console.log()。

    4.JavaScript区分大小写,并且每一段程序结束时要加上;号这点和C语言、Java是一样的。

    5.JavaScript输出内容时可以用英文双引号""也可用英文单引号''。


    以上就是本次博文的全部内容,感谢您的耐心阅读。

    image.gif编辑

    Never Give Up

    相关文章
    |
    6月前
    three.js的Gui面板使用方法
    three.js的Gui面板使用方法
    308 0
    |
    6月前
    |
    JavaScript 前端开发
    Node.js中的EventEmitter模块:基本概念、使用方法和常见应用场景
    Node.js中的EventEmitter模块:基本概念、使用方法和常见应用场景
    125 0
    |
    18天前
    |
    存储 JavaScript 前端开发
    decimal.js库的安装和使用方法
    【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
    |
    1月前
    |
    缓存 JavaScript 前端开发
    Node.js模块化的基本概念和分类及使用方法
    Node.js模块化的基本概念和分类及使用方法
    32 0
    |
    1月前
    |
    JavaScript 前端开发 容器
    js之弹性布局使用方法
    js之弹性布局使用方法
    27 0
    |
    3月前
    |
    JavaScript 前端开发
    JavaScript 中 this 的使用方法详解
    JavaScript 中 this 的使用方法详解
    45 1
    |
    3月前
    |
    JavaScript 前端开发 容器
    js之弹性布局使用方法
    js之弹性布局使用方法
    48 0
    |
    4月前
    |
    前端开发 JavaScript 定位技术
    JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
    JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
    55 1
    |
    5月前
    |
    移动开发 JavaScript 前端开发
    rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
    rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
    |
    JavaScript 前端开发
    js正则表达式的作用及使用方法
    js正则表达式的作用及使用方法
    105 1