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. C#LeetCode刷题之#21-合并两个有序链表(Merge Two Sorted Lists)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3818 访问. 将两个有序链表合并为一个新的有序链表并返回.新链表 ...

  2. 01 Arduino-点亮一盏LED灯

    01 硬件连接  图片比较丑 特别说明:一般默认为二极管灯的压降是 2V 均值电流为15ma,所以如果接在5V的电源上面,串联接的电阻值为200欧姆左右,可做适当调整 切记不允许把LED灯直接并联在5 ...

  3. 初始JAVA第十五章String的总结

    字符串的概述 1.什么是字符串:零个或多个字符组成的有限序列 2.如何使用字符串:(使用字符串分为两步) 1)定义并初始化字符串 2)使用字符,对字符串进行一些处理 // 穿件一个字符串 // 语法 ...

  4. moonlight不显示鼠标指针

    多显示屏导致moonlight不显示鼠标指针, 使用的时候关闭其他显示屏,只使用一个显示屏,就可以正常显示了.

  5. jQuery - AJAX笔记

    @ 目录 什么是AJAX 关于 jQuery 与 AJAX jQuery AJAX 参考手册 jQuery ajax - ajax() 方法 定义和用法 语法 参数 options async bef ...

  6. 第6篇scrum冲刺(5.26)

    一.站立会议 1.照片 2.工作安排 成员 昨天已完成的工作 今天的工作安排 困难 陈芝敏   研究云开发,更新了登录模块,把用户的信息传入数据库了  学习云开发,云函数调用以及数据的前后端传递  遇 ...

  7. python的各种包安装地址

    http://www.lfd.uci.edu/~gohlke/pythonlibs/#scipy-stack 这个网页里有python的所有包,whl的后缀是python压缩包的意思.在windows ...

  8. 精讲响应式WebClient第5篇-请求超时设置与异常处理

    本文是精讲响应式WebClient第5篇,前篇的blog访问地址如下: 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法 精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方 ...

  9. 学习一下 JVM (二) -- 学习一下 JVM 中对象、String 相关知识

    一.JDK 8 版本下 JVM 对象的分配.布局.访问(简单了解下) 1.对象的创建过程 (1)前言 Java 是一门面向对象的编程语言,程序运行过程中在任意时刻都可能有对象被创建.开发中常用 new ...

  10. 史上!最最最简洁明了的 Java JDK 安装目录及其子目录含义 10分钟详解 - 精简归纳

    Java JDK 安装目录及其子目录含义 10分钟详解 - 精简归纳 JERRY_Z. ~ 2020 / 8 / 30 转载请注明出处!️ 目录 Java JDK 安装目录及其子目录含义 10分钟详解 ...