JavaScript是一种属于网络的高级脚本语言（解释性脚本语言），已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

一、如何插入JS代码？

使用<script>标签在HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。

<script type="text/javascript">表示在<script></script>之间的是文本类型(text)，javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb18030">

        <title>插入js代码</title>
　　　　 <!--插入JS代码-->

        <script type="text/javascript">

        document.write("开启JS之旅!");

        </script>

    </head>

    <body>

    </body>

</html>

运行效果：

开启JS之旅!

二、引用JS外部文件

我们可以把HTML文件和JS代码分开，并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

# .html文件

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>引用JS文件</title>

<script src="script.js"></script>

</head>

<body>

</body>

</html>
# .js文件

//JS代码

document.write("引用JS文件");

运行效果：

引用JS文件

三、JS插入的位置

可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
（1）放在<head>部分：
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
（2）放在<body>部分：
JavaScript代码在网页读取到该语句的时候就会执行。

注意: 

javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。

比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；

而如果是通过事件调用执行的function那么对位置没什么要求的。

四、JS注释

单行注释，在注释内容前加符号 “//”。

多行注释以"/*"开始，以"*/"结束。

五、变量

定义变量使用关键字var,语法如下：

var 变量名

变量名命名规则:

1.变量必须使用字母、下划线(_)或者美元符($)开始。

2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

3.不能使用JavaScript关键词与JavaScript保留字。

（在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。）

变量声明和赋值：

var mychar;

mychar="javascript";

mychar="hello";
六、判断语句（if...else）

语法:

if(条件)

{ 条件成立时执行的代码 }

else

{ 条件不成立时执行的代码 }
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>判断语句</title>

  <script type="text/javascript">

    var age =25; //声明并初始化变量

    if(age<=18)

    {

     document.write("小年轻真好。");

    }

    else

    {

     document.write("到了奋斗的年龄了。");

    }

  </script>

</head>

<body>

</body>

</html>

运行效果：

到了奋斗的年龄了。

七、函数function

如何定义一个函数呢？基本语法如下:

function 函数名()

{

     函数代码;

}
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>函数调用</title>

   <script type="text/javascript">

      function writeInfo() //定义函数1

      {

          document.write("hello world");

      }

      writeInfo();  //调用函数1

      function add()        //定义函数2

      {

          var sum;

          sum = 2 + 3;

          alert(sum)

      }

   </script>

</head>

<body>

   <form>

       <!--调用函数2-->

      <input type="button"  value="点击我" onclick="add()" />

   </form>

</body>

</html>

运行效果：

参考：https://www.imooc.com

JS -- JavaScript简介的更多相关文章

  1. JS/JavaScript简介及基本常识

    JavaScript (JS)以客户端事件为驱动的弱类型脚本语言 JS脚本一般写在<head>内部 流:文本流.html流 回避关键字的基本策略:单词合并(v_function) null ...

  2. JavaScript简介及示例

    JavaScript简介及使用 一.简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛 ...

  3. HTML JavaScript简介

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  4. Node.js的简介和安装

    一.Node.js的简介和安装 a)       什么是Node.js? Node.js是一个开发平台 让JavaScript运行在服务器端的开发平台 ---简单点说就是用JavaScript写服务器 ...

  5. Node.js 原理简介

    Node.js 的官方文档中有一段对 Node.js 的简介,如下. Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript ...

  6. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  7. JavaScript简介与使用方法

    1.JavaScript简介 1.1.JavaScript简史 最初:网络通信很慢,网页上的数据要传送到数据库验证,然后再返回错误结果,找客观过程要等很久,于是,网景公司开发出一门新语言,当时Java ...

  8. 为什么我要放弃javaScript数据结构与算法（第一章）—— JavaScript简介

    数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...

  9. 3.25课·········JavaScript简介与语法

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

随机推荐

  1. 使用 JSON 协议的 gRPC

    JSON payload 实现简易的请求和响应的内省. 介绍 大家经常说 gRPC 是基于 Google Protocol Buffers payload 格式的,然而这不完全正确.gRPC payl ...

  2. CentOS7（Linux）源码安装MySQL5.7.X

    介绍 软件应用最重要的就是数据库了,可是还有小伙伴不会在Linux上安装MySQL数据库,今天就来讲讲如何在CentOS7环境使用源码进行安装MySQL5.7.X. MySQL官网下载链接:https ...

  3. 涨见识！Java String转int还有这种写法

    先看再点赞,给自己一点思考的时间,微信搜索[沉默王二]关注这个有颜值却假装靠才华苟且的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题 ...

  4. Jmeter系列（50）- 详解 If 控制器

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 简单介绍 可以通过条件来控制是否运行其 ...

  5. Unix I/O

    Unix I/O 打开文件 一个应用程序通过要求内核打开相应的文件,来宣告它想要访问一个I/O设备.内核返回一个小的非负整数,叫做描述符,它在后续对此文件的所有操作中标识这个文件.内核记录有关这个打开 ...

  6. Jmeter逻辑控制器之If Controller的使用解析

    一.If Controller概述 类似于编程语言中if语句,根据给定表达式的值决定是否执行该节点下的子节点,表达式的值 为true则执行,为false则不执行,默认使用javascript语法进行判 ...

  7. SpringCloud简记_part2

    Zookeeper服务注册与发现 1)Eureka停止更新了,你怎么办? https://github.com/Netflix/eureka/wiki 2)SpringCloud整合Zookeeper ...

  8. Antd cracoTs Js 配置流程

    JS:文档:0.1.4 配置 js 环境.note链接:http://note.youdao.com/noteshare?id=e32fa75c1baa014b5819fa5e22887dbc& ...

  9. python基础 Day11

    python Day11 函数中默认参数的陷阱 只针对默认参数是可变的数据类型(如果你的默认参数指向的是可变的数据类型,那么你无论调用多少次默认参数,都是同一个) def test(name,list ...

  10. CentOS7上lvm分区调整（resize2fs: Bad magic number in super-block while trying to open ...）

    问题描述:根目录空间占用率100% 首先用传统resize2fs方式调整分区: resize2fs -p /dev/mapper/centos-home 50Gresize2fs 1.42.9 (28 ...