首页 / JAVASCRIPT / JavaScript入门之语言基础第1/2页

JavaScript入门之语言基础第1/2页

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript入门之语言基础第1/2页，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6974字，纯文字阅读大概需要10分钟。

内容图文

JavaScript 语言正越来越受欢迎，可以说是是互联网上最突出的语言之一。你可以跨平台和浏览器使用它，其并不排斥后端语言。现在有许多不同的开发库——有些非常棒—— 这些库对开发很有帮助，比如说加快了开发的时间等等。问题是，有时候这些库与原始语言之间很是有一些距离，这使得刚入门的开发者缺乏一种对语言的基础了解。

本文通过全面列举基础的JavaScript概念这一方式来阐述该语言的基本原理，以此来为初学者提供一个对语言的基本了解，随处可见的代码例子则是用来说明所有的这些概念是如何在语言中体现出来的。

了解JavaScript语言

JavaScript语言是一种免费的客户端脚本语言，其能够让你往超文本标记语言(Hypertext Markup Language，HTML)页面中加入交互行为。客户端(client-side)意味着JavaScript运行在浏览器中，而不是用在服务器端。在网页被服务器送达并被浏览器加载后，客户端脚本就允许用户与网页进行交互。例如，Google Maps就是使用JavaScript语言来支持用户与地图之间的交互的，交互的方式有移动地图、放大和缩小等。没有JavaScript语言的话，网页需要为每次和每个用户的交互行为进行刷新，当然，除非页面用到了诸如Adobe Flash或是Microsoft® Silverlight一类的插件。JavaScript语言不需要插件。

因为JavaScript语言为加载后的网页提供用户交互行为，因此开发者通常会用它来实现下面的一些功能：

1. 动态添加、编辑和删除HTML元素及它们的值。

2. 在提交之前校验表单。

3. 在用户的计算机上创建cookies以用于在将来的访问中保存和检索数据。

在开始之前，只要知道语言的几个基本原则就行了：

1. 要在HTML文件中把JavaScript代码包含进来的话，你必须要把代码放在脚本标签(script)的内部，并加入text/javascript这一类型(type)属性(清单1)。

2. 所有的JavaScript语句以分号结束。

3. 语言是大小写敏感的。

4. 所有的变量名都必须以字母或是下划线作为开始。

5. 你可以使用注释来说明脚本中的某些行，注释的编写方式是，以一个双斜线(//)为开始，后面跟着注释。

6. 你还可以使用注释来把脚本注释掉。要注释脚本的多行的话，一种好的做法是使用/* 你的脚本在这里 */。任何位于星号之内的脚本在执行过程中都不会运行。

清单1.需要使用script标签和type属性来把JavaScript代码包含到HTML文件中来

<script type="text/javascript"></script>
要隐藏浏览器不支持的JavaScript的代码，或是用户想把代码关掉的话，只要在JavaScrip语句的前后使用注释标签就可以了(清单2)。

清单2. 使用注释来隐藏浏览器不支持的JavaScript代码
代码如下:


<script type="text/javascript"> 
<!-- 
Example statement here 
//--> 
</script> 
 
最常用的把JavaScript代码包含到网页中的方式是，使用脚本(script)标签中的src属性来把代码从一个外部的JavaScript文件中加载进来(清单3)。 

清单3. 在HTML文件中包含外部的JavaScript文件 
<script type="text/javascript" src="path/to/javascript.js" kesrc="path/to/javascript.js"></script> 
外部JavaScript文件是最常见的包含JavaScript代码的方式，这是有一些很实在的原因的： 

1. 如果你的HTML页面中有着更少的代码的话，搜索引擎就能够以更快的速度来抓取和索引你的网站。 

2. 保持JavaScript代码和HTML的分离，这样代码显得更清晰，且最终更易于管理。 

3. 因为可以在HTML代码中包含进多个JavaScript文件，因此你可以把JavaScript文件分开放在web服务器上不同的文件目录结构中，这类似于图像的存放方式，这是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变得容易起来的关键。 

变量 

变量存储数据，这些数据稍后要被检索的或是要使用新的数据来更新。存储在变量中的数据可以是一个值或表达式，JavaScript语言有三种类型的表达式，表1对此做了描述。 

表1. JavaScript表达式 

表达式描述 

算术　计算的

结果为一个数值

字符串计算的结果为一个字符串

逻辑　计算的结果为一个布尔值(true或者false)

变量有两种类型：局部的和全局的。局部变量使用var这一关键字来声明，声明全局变量则不需要使用var关键字。使用了var关键字的变量被看成是局部的，因为除了你声明它的地方所处的范围之外，它不能在其他任何地方被访问。例如，如果你在一个函数(在将近文章的结尾部分我会谈论到)的内部声明了一个局部变量的话，该变量就不能在该函数之外被访问，这就使得它是这一函数局部的。如果你没有使用var关键字声明这同一变量的话，它在整个脚本中就都是可被访问到的，而不仅限定于只能在那个函数中被访问。

清单4给出了一个局部变量的例子，其被命名为num，并被赋值为10。

清单4. 声明一个局部变量

var num = 10;
要在脚本中的另一个位置访问num变量的值的话，你只需要通过名称来引用该变量就可以了，如清单5所示。

清单5. 访问变量的值
代码如下:


document.write("The value of num is: "+ num); 
 
这一语句的结果是“The value of num is: 10”。这一document.write函数把数据写到网页中，在本文余下的部分中你都是使用这一函数来把例子写到网页中。 

要把算术表达式存储到变量中的话，你只要把变量指配给计算的值就可以了，如清单6所示。计算的结果而非算式本身被存储在变量中。因此，我们又一次得到这一结果“The value of num is: 10”。 

清单6. 存储算术表达式 
 代码如下:
var num = (5 + 5); 
document.write("The value of num is: "+ num); 
 
要改变变量的值的话，通过你为变量所分配的名称来引用变量，并使用等号来为其赋一个新的值(清单7)。这次的不同之处在于你不需要使用var关键字，因为变量已经声明过了。 

清单7. 改变现有变量的值 
 代码如下:
var num = 10; 
document.write("The value of num is: "+ num); 

// 把num的值更新成15 
num = 15; 
document.write("The new value of num is: "+ num); 
 
这一脚本的结果先是一句“The value of num is: 10”，后面跟着“The new value of num is: 15”。除了讲解变量之外，这一节内容还引入了下一个主题，也就是运算符。你用来把值赋给变量的等号(=)就是一个赋值运算符，以及你用在5+5中的加号(+)是一个算术运算符。下一节内容谈论JavaScript语言中的所有变量运算符及其用法。 

运算符 

在执行JavaScript语言中的任何运算时，你都需要运算符。运算包括了加法、减法、比较等。JavaScript语言中有四种运算符。 

1. 算术 

2. 赋值 

3. 比较 

4. 逻辑 

算术运算符 

算术运算符执行基本的数学运算，比如说加减乘除等。表2列出并描述了JavaScript语言中的所有可用的算术运算。 

表2. 算术运算符 

运算符描述 

+ 加法 

- 减法 

* 乘法 

/ 除法 

% 取模(找出余数) 

++　 递增 

--递减 
赋值运算符 

算术运算符执行基本的数学运算，而赋值运算符则是把值赋给JavaScript变量。当你在前面一节中把值赋给变量时，你已经见到了最常用的赋值运算符。表3列出并描述了JavaScript语言中所有可用的赋值运算符。 

表3. 赋值运算符 

运算符描述 

=等于 

+=把加法值(变量加上值的结果值)赋给变量 

-=把减法值(变量减去值的结果值)赋给变量 

*=把乘法值(变量乘上值的结果值)赋给变量 

/=把除法值(变量除以值的结果值)赋给变量 

%=把取模值(变量对值取模的结果)赋给变量 

你已经看到了如何使用等号来把值或是表达式赋给变量，但现在我会给展示如何使用一个令人稍加困惑的赋值运算符。把一个加法值赋给一个变量可能是一个很奇怪的概念，但实际上很简单(清单8)。 

清单8. 把一个加法值赋给一个变量 
 代码如下:
var num = 10; 
document.write("The value of num is: "+ num); 

// 把num的值更新为15 
num += 5; 
document.write("The new value of num is: "+ num); 
 
这一脚本的结果是“The value of num is: 10”后面跟着“"The new value of num is: 15”。你可以看到，这一脚本中的运算符把加法值赋给了变量。这也可以当作是清单9中所编写的脚本的一种简短写法。 

清单9. 把加法值赋给变量的一种更长的写法。 
 代码如下:
var num = 10; 
document.write("The value of num is: "+ num); 

// 把num的值更新为15 
num = (num + 5); 
document.write("The new value of num is: "+ num); 
 
比较运算符 

比较运算符确定变量或是它们的值之间的关系。你在条件语句中使用比较运算符，通过比较变量或是它们的值来计算出语句为true还是为false，以此创建逻辑。表4列出并描述了JavaScrpit语言中所有可用的比较运算符。 

表4. 比较运算符 

运算符描述 

==等于 

===　全等，用于值和对象类型 

!=不等于 

>大于 

<小于 

>=　大于或等于 

<=　小于或等于 

在编写任何类型的逻辑时，变量和值的比较都是最基本的。清单10中的例子展示了如何使用等于这一比较运算符(==)来确定10是否等于1。 


            12下一页阅读全文

内容总结

以上是互联网集市为您收集整理的JavaScript入门之语言基础第1/2页全部内容，希望文章能够帮你解决JavaScript入门之语言基础第1/2页所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/368875.html

来源：【匿名】

【上一篇】JavaScript内核之基本概念【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript入门之语言基础第1/2页】教程文章相关的互联网学习教程文章

javascript --学习基础总结【代码】

闭包　　下面是百度百科的解释:　　　　闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。　　也就是说一个代码块中使用了自由变量var d=10;function df(){console.log(d);//这个时候d就是自由变量了 } 　　那下面来看一个简单的闭包的例子:let t1=(function d(){var dd=1;returnfunction(){return dd++;}; })();//立即执...

javaScript基础【代码】

目录javascript :引入方式:javaScript 语言基础：-- javaScript 中的所有事物都是对象数据类型:运算符流程控制函数函数作用域:词法分析:自定义对象:date对象JSON对象REGExp 对象（re正则）math对象javascript :--脚本语言，插入 HTML 页面后，可由所有的现代浏览器执行。引入方式:#引入方式： 1.script标签内部直接书写 <script> alert(123) </script> zgu 2.通过script标签src书写引入外部js文件 <script src="js.js"></scrip...

JavaScript基础篇最全【代码】【图】

本章内容：简介定义注释引入文件变量运算符算术运算符比较运算符逻辑运算符数据类型数字字符串布尔类型数组Math语句条件语句（if、switch）循环语句（for、for in、while、do-while）label语句异常处理函数定义函数3种方式函数参数（arguments）作用域与作用链闭包面向对象（特性，构造模式，原型模式prototype）prototype 验证方法（isPrototypeOf、hasOwnProperty、in）其它序列化转义eval正则表达式时间处理简介定义　　javasc...

JavaScript之基础-10 JavaScript 正则表达式(概述、定义正则、RegExp对象、用于模式匹配的String方法)【图】

一、JavaScript 正则表达式概述正则表达式概述 - 正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式 - 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如:词语出现频率统计、验证字符串是否符合邮件格式、屏蔽一篇帖子中的限制性词语等650) this.width=650;" src="/upload/getfiles/default/2022/11/11/20221111052258654.jpg" title="web.png" />正则表达式...

网易前端微专业，JavaScript程序设计基础篇:数组【代码】

任何一种语言数组都是比较重要的，其作为一种基础对象应用很多，如Java你肯定少不了集合（List，Map)这些。因此本篇主要记录JS的数组使用和常用方法。要点如下：1，数组创建两种方式：var stu = new Array();var stu1 = [];这就和定义对象一样：var cat = new Object(); var cat1 = {};推荐用后者，比较简洁。如：var score = [1, 2, 3];数组里的东西可以是不同类型的，数组里面可以是基础类型也可以是对象或数组：var array = [16...

javascript基础（Array）【代码】

1，join()Array.join()，不改变原数组，将数组中所有元素转换为字符串并连接在一起，返回最后生成的字符串let a=[1,2,3]; a.join(); // =>"1,2,3" a.join(" "); // =>"1 2 3" a.join("-"); // =>"1-2-3" let b=new Array(5); b.join("-"); // => "----" 4个连字号 2，reverse()Array.reverse()，改变原数组，将数组中的元素颠倒顺序，返回逆序后的数组let a=[1,2,3]; a.reverse(); // =>[3,2,1]3，sort()Array.sort()，改变原...

Leetcode刷题预备基础知识（JavaScript版）【图】

参考：https://www.bilibili.com/video/BV14f4y1C7hg 宝藏up主！1.时间复杂度O(1)O(n)复杂度看最高的O(n2) 如果只是两个并列的for循环，时间复杂度还是O（n），100个并列的for循环，也是O(n)这里有继承，两个循环分摊一个任务O(logn)二分搜索O(nlogn)排序优化的方法:从低-级的复杂度寻找灵感O(n)->O(logn)使用二分搜索O(nlogn) -> O(n)遇到需要排序的题，想想能否通过数组,set, map,heap解O(n2)-> O(nlogn)遇到嵌套循环，想想能不能...

JavaScript语言基础14【图】

JavaScript循环语句------------------while循环语句。while在循环条件为true时，一直保持循环状态，直到循环条件为false时退出循环。模板如下：<HTML> <HEAD><TITLE>Hello World</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> <SCRIPT Language="JavaScript" TYPE="text/javascript">var value=10;while(value>1){document.write(value+"<br>");value--;} </SCRIPT> </BODY> </HTML> while循环语句包含一个循环条件和循环体，上述当va...

JavascriptDom的基础知识回顾【代码】

1. 节点及其类型: 1). 元素节点2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的什么位置编写 js 代码? 0). 直接在 html 页面中书写代码. <button id="button" onclick="alert(‘hello world‘);">Click Me!</button> 　　缺点: ①. js 和 html 强耦合, 不利用代码的维护 ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然...

【JavaScript基础笔记】Ajax，同源策略【图】

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。GET 还是 POST？与 POST 相比，GET...

JavaScript基础【代码】【图】

1、JavaScript是个脚本语言，需要有宿主文件，它的宿主文件是HTML文件。2、用法：在HTML中位置有三块：（1）head里面（2）body里面（3）</html>之后为了保险起见，一般写在</html>之后。　　<script language="javascript">代码必须放在这里面</script>3、三个常用对话框 alert("")警告对话框，作用是弹出一个警告对话框。 confirm("")确定对话框，作用是弹出一个可供选择的确定对话框，点击确定之后，它返...

【JavaScript基础】------有待完善

最近开始学习JavaScript，整理了一些相关的基础知识，日后继续完善~~~ JS注释方式：// 单行注释（Ctrl+/ ）/* 段落注释(Ctrl+shift+/ )*/JavaScript基础JavaScript：基于浏览器、基于（面向）对象、事件驱动、脚本语言JavaScript的作用：表单验证,减轻服务的压力，添加页面动画效果，动态更改页面内容，Ajax网络请求（Ajax：可以实现页面局部刷新）JavaScript组成部分；ECMAScript（5.1/6）、DOM、BOMECMAScript脚本程序语言：语法...

JavaScript 基础一

内部： <Script Language="JavaScript" type="text/javascript"> JavaScript代码 </Script>外部引用： <Script Language="JavaScript" src="文件名.js"> JavaScript代码 </Script> 编写规则：JavaScript区分大小写JavaScript脚本程序必须嵌入在HTML文件中JavaScript脚本程序中不能包含HTML标记代码（但是，包含在双引号中就可以用了）四种基本的数据类型：数值（整数和实数）字符串型（用“”号或‘’括起来的字符或数值）布尔...

11-23网页基础--JavaScript基础知识【图】

第一课 JavaScript简介一、定义：JavaScript是脚本语言，需要宿主文件，它的宿主文件是html文件。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。二、用法：在html中的位置有三块：1）head里面；2）body里面；3）</html>之后，为了保险起见一般写在</html>之后。<script language="javascript">代...

JavaScript基础三【代码】

一、BOM1、windows对象所有浏览器都支持 window 对象。它表示浏览器窗口。一些常用的Window方法：window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度window.open() - 打开新窗口window.close() - 关闭当前窗口 2.windows子对象navigator对象//web浏览器全程navigator.appCodeName; "Mozilla"// Web浏览器厂商和版本的详细字符串navigator.appVersion; "5.0 (Windows NT 10.0; Win64; x64) AppleW...

首页 / JAVASCRIPT / JavaScript入门之语言基础第1/2页

JavaScript入门之语言基础第1/2页

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript入门之语言基础第1/2页】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程