JavaScript-JavaScript概述及简单使用_用自己的话介绍js-程序员宅基地

技术标签: 脚本语言  【前端开发-JavaScript基础篇】  html  javascript  

什么是

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象事件驱动并具有相对安全性的客户端脚本语言。

因为它不需要在一个语言环境下运 行,而只需要支持它的浏览器即可。它的主要目的是,验证发往服务器端的数据、增加 Web 互动、加强用户体验度等.


JavaScript 的特点

  • 松散性

JavaScript 语言核心与 C、C++、Java 相似,比如条件判断、循环、运算符等。但它 却是一种松散类型的语言,也就是说,它的变量不必具有一个明确的类型。

  • 对象属性

JavaScript 中的对象把属性名映射为任意的属性值。它的这种方式很像哈希表或关联数组,而不像 C 中的结构体或者 C++、Java 中的对象。

  • 继承机制

JavaScript 中的面向对象继承机制是基于原型的,这和另外一种不太为人所知的 Self语言很像,而和 C++以及 Java 中的继承大不相同。


JavaScript 的核心

虽然 JavaScript 和 ECMAScript 通常被人们用来表达相同的含义,但 JavaScript 的含义却比ECMA-262中规定的要多得多。一个完整的JavaScript应该由下列三个不同的部分组成。

  • 1.核心(ECMAScript)

  • 2.文档对象模型(DOM)

  • 3.浏览器对象模型(BOM)

文档对象模型 (DOM)

文档对象模型(DOM,Document Object Model)是针对 XML 但经过扩展用于 HTML的应用程序编程接口(API,Application Programming Interface)

浏览器对象模型 (BOM)

访问和操作浏览器窗口的浏览器对象模型(BOM,Browser Object Model)。开发人员使用 BOM可以控制浏览器显示页面以外的部分。而 BOM 真正与众不同的地方(也是经常会导致问题的地方),还是它作为 JavaScript实现的一部分,至今仍没有相关的标准。


使用

1.创建一张 HTML 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
</body>
</html>

2.<Script>标签解析

<script>xxx</script>这组标签,是用于在 html 页面中插入 js 的主要方法。

它主要有以下几个属性:

  • 1.charset:可选。表示通过 src 属性指定的字符集。由于大多数浏览器忽略它,所以很少有人用它。

  • 2.defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。由于大多数浏览器不支持,故很少用。

  • 3.language:已废弃。原来用于代码使用的脚本语言。由于大多数浏览器忽略它,所以不要用了。

  • 4.src:可选。表示包含要执行代码的外部文件。

  • 5.type:必需。可以看作是 language 的替代品。表示代码使用的脚本语言的内容类型。

<script type="text/javascript">
    alert('欢迎来到 JavaScript 世界!');
</script>

3.JS 代码嵌入的一些问题

如果你想弹出一个</script>标签的字符串,那么浏览器会误解成 JS 代码已经结束了。 解决的方法,就是把字符串分成两个部分,通过连接符‘+’来连接

<script type="text/javascript">
    alert('</scr'+'ipt>');
</script>

经验证,不拆分开也能识别。


一般来说,JS 代码越来越庞大的时候,我们最好把它另存为一个.js 文件,通过 src 引入即可。它还具有维护性高、可缓存(加载一次,无需加载)、方便未来扩展的特点。

<script type="text/javascript" src="demo1.js"></script>

这样标签内就没有任何 JS 代码了。但要注意的是,虽然没有任何代码,也不能用单标签:

错误的写法
<script type="text/javascript" src="demo1.js" />;

也不能在里面添加任何代码:

错误的写法
<script type="text/javascript" src="demo1.js">alert('我很可怜,执行不到!')</script>

按照常规,我们会把<script>标签存放到<head>...</head>之间。但有时也会放在 body 之间。


不再需要提供注释,以前为了让不支持 JavaScript 浏览器能够屏蔽掉<script>内部的代码,我们习惯在代码的前后用 html 注释掉,现在已经不需要了。

<script type="text/javascript">
    <!--
    alert('欢迎!');
    -->
</script>

平稳退化不支持 JavaScript 处理:<nosciprt>

<noscript>
    您没有启用 JavaScript
</noscript>

完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用JavaScript</title>

</head>
<body>

<noscript>
    本站必须启用JavaScript
</noscript>



<script type="text/javascript">
    alert('欢迎来到JavaScript世界!');
</script>



欢迎来到JavaScript世界!


</body>
</html>

另外如果通过src引用另外的文件的话 (在同一个目录下)

修改

<script type="text/javascript" src=demo.js><script>

demo.js

alert('Hello');
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yangshangwei/article/details/78061993

智能推荐

获取YARN上执行时间最长的JOB列表,并查看是否存在数据倾斜_yarn怎么查看数据倾斜-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏11次。处理思路1、通过 HistoryServerRestApi 获取YARN JOB的基本信息 (包括JOB的 ID和名称,开始时间和结束时间)http://<history server http address:port>/ws/v1/history/mapreduce/jobs?startedTimeBegin=%s&startedTimeEnd=%s2、对 执行时间..._yarn怎么查看数据倾斜

c语言简单人机交互程序,C语言学习笔记之 第三讲:人机交互-程序员宅基地

文章浏览阅读1.5k次。1、 人机交互的进化:命令行方式 à 图形界面方式 à 自然交互界面2、 CMD-DOS指令:dir:列出当前目录的文件及文件夹md:创建目录rd:删除目录cd:进入指定目录cd..:退回到上一级目录cd/:退回到根目录del:删除文件exit:退出dos命令行echo 信息:在屏幕上显示出信息ipconfig:获取电脑IPtasklist:查看系统进程pause:暂停notepad:打开记事本c..._c语言命令行交互式

wangeditor富文本编辑器的使用(超详细)-程序员宅基地

文章浏览阅读8.4w次,点赞46次,收藏381次。wangeditor是一款轻便的富文本编辑器,本文主要帮助大家快速学习使用wangeditor编辑器。_wangeditor

各类机器学习方法的应用场景是什么?_方法的适用场景-程序员宅基地

文章浏览阅读1.5k次,点赞2次,收藏8次。作者:xyzh链接:https://www.zhihu.com/question/26726794/answer/151282052来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者:xyzh链接:https://www.zhihu.com/question/26726794/answer/151282052来源:知乎著作权归作者所有。商业转载请..._方法的适用场景

关于前端组件化、状态管理规范化的思考-程序员宅基地

文章浏览阅读597次。苏格团队作者:Tomey一、开篇说起前端组件化是这几年老生常谈的话题,笔者就不在这里对前端组件化思想的发展史、优劣做详细的介绍。今天主要与大家分享一下,笔者在开发中从初期的小项目,到后期的项目功能迭代,功能模块越来越多,项目越来越大,组件化规范制定不够完善,多人团队协作开发导致的一些问题,与笔主自己处理的方案的思考。二、发现、提出问题1、三张图说明一个业务模块功能迭代图。第1版..._前端 组件 状态

随便推点

Github上标星30K+的SpringBoot实战电商项目,简直不要太牛!_springboot商品管理系统 github-程序员宅基地

文章浏览阅读2.3k次,点赞4次,收藏13次。前言mall项目致力于打造一个完整的电商系统,采用现阶段流行技术实现。项目介绍mall项目是一套电商系统,包括前台商城系统及后台管理系统,基于SpringBoot+MyBatis实现,采用Docker容器化部署。前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。SpringBoot实战电商项目mall地址文末获取_springboot商品管理系统 github

caffe中的Solver、SGDSolver、 solver.prototxt 学习笔记_caffe中的sgdsolver-程序员宅基地

文章浏览阅读3.1k次。1.Solver、SGDSolver (Solver、SGDSolver类写自于文件:solver.h(c)pp、sgd_solvers.h(c)pp)class SGDSolver : public SolverDtype>SGDsolver类继承自Solver2.solver.prototxt caffe训练命令:两个例子:./build/tool_caffe中的sgdsolver

java虚拟机_c 语言,java虚拟机-程序员宅基地

文章浏览阅读84次。java虚拟机运行时数据区域程序计数器java虚拟机栈本地方法栈堆方法区运行时常量池直接内存垃圾收集判断一个对象是否可被回收引用类型垃圾收集算法垃圾收集器内存分配和回收策略Minor GC 和 Full GC内存分配策略Full GC 的触发条件类加载机制类的生命周期类加载过程类初始化时机类与类加载器类加载器分类双亲委派模型自定义类加载器参考资料运行时数据区域程序计数器记录正在执行的虚拟机字节码指令的地址(如果正在执行的是本地方法则为空)。java虚拟机栈每个 Java 方法在执行的同时会创建一_c 语言,java虚拟机

汇编语言程序设计的实验环境及上机步骤_windows 98 se汇编实验-程序员宅基地

文章浏览阅读3.9k次,点赞5次,收藏45次。汇编语言源程序编制完成后,在计算机上的操作过程分为四个阶段:编辑、汇编、连接、运行调试(如图1)。一、实验环境汇编语言程序设计的实验环境如下:硬件环境微型计算机(Intel x86系列CPU)一台。软件环境Windows98/2000/XP操作系统任意一种文本编辑器(EDIT、NOTEPAD(记事本)、UltraEDIT等)。汇编程序(MASM.EXE或TASM.EXE)。调试程序(DEBUG.EXE或TD.EXE)。文本编辑器建议使用EDIT或NOTEPAD,汇编程序建议使用MAS_windows 98 se汇编实验

SpringBoot2.0 配置mongodb双数据源两种连接方式_springboot2.0 多mongo-程序员宅基地

文章浏览阅读2.5k次,点赞2次,收藏6次。一、使用database、host、port、username、password 连接方式1、自定义连接相关信息 application.ymlspring: data: mongodb: mcdr: database: mcdr host: 10.188.188.100 port: 27017 us..._springboot2.0 多mongo

【校内模拟】Slay(容斥原理)_slaynoip模拟-程序员宅基地

文章浏览阅读272次。题解:令f(p,k)f(p,k)f(p,k)表示从[0,n−1][0,n-1][0,n−1]中选择kkk个数,使得和为ppp的倍数的方案数。接下来用一种很诡异的姿势容斥。直接算并不好算,考虑枚举最后有iii个数固定且相同,前面选择k−ik-ik−i个不同的数和为sumsumsum,这两部分分开计算,互不影响。发现会出现i+1i+1i+1个数重复的情况,需要减掉,然后又多减掉了i+2i+2i..._slaynoip模拟

推荐文章

热门文章

相关标签