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. Vue Elementui 表单必填项和非必填项label文字对齐的简单方式

    1. 不好的方式 很长时间以来都是用改写form-item样式来使得必填项和非必填项保证label对齐,这样需要改写系统样式,还要在相应的item上引用,代码量增多,示例如下(不推荐) <tem ...

  2. 利用Unity3D制作简易2D计算器

    利用Unity3D制作简易2D计算器 标签(空格分隔): uiniy3D 1. 操作流程 在unity3DD中创建一个新项目 注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本 在新建 ...

  3. 用python爬取B站在线用户人数

    最近在自学Python爬虫,所以想练一下手,用python来爬取B站在线人数,应该可以拿来小小分析一下 设计思路 首先查看网页源代码,找到相应的html,然后利用各种工具(BeautifulSoup或 ...

  4. 同事不太懂负载均衡，我直接把阿里架构师的这份Nginx笔记甩给他

    Nginx功能强大,架构复杂,学习.维护和开发的门槛较高. 本份笔记深入最新的Nginx源码,详细剖析了模块体系.动态插件.功能框架.进程模型.事件驱动.线程池.TCP/UDP/HTTP 处理等Ngi ...

  5. SpringBoot --- 自定义 Starter

    SpringBoot --- 自定义 Starter 创建 1.需要创建一个新的空工程 2.新的工程需要引入两个模块 一个Maven 模块 作为启动器 一个SpringBoot 模块 作为自动配置模块 ...

  6. python 03 常用操作符

    1. e记法,科学计数法. AeB   A,B为整数,A*10的B次方. 2. 逻辑运算,真为1,假为0,最好不使用这个计算 true(1)    false(0) true+true=2 3.类型转 ...

  7. linux zip压缩文件忽略指定的文件夹

    zip -r productImages.zip ./* -x "cache**" 压缩时,会忽略cache下的所有文件及文件夹

  8. badger 一个高性能的LSM K/V store

    原文:https://colobu.com/2017/10/11/badger-a-performant-k-v-store/ github地址:https://github.com/dgraph-i ...

  9. 算法-搜索（6）B树

    B树是平衡的m路搜索树. 根结点至少两个子女,根结点以外的非失败结点至少⌈m/2⌉个子女,所有失败结点都在h+1层. 第h层至少2⌈m/2⌉h-1个结点,因此失败结点数n+1≥2⌈m/2⌉h-1个. ...

  10. Camera学习--光源

    进入CV 领域,视频图像的成像,最前端的camera,camera的sensor 以及影响成像质量的光源,噪声等因素是绕不开的问题. 那么今天就从成像的光源说起. 标准光源(Standard Ligh ...