JavaScript学习

最新推荐文章于 2024-03-27 09:00:46 发布
最新推荐文章于 2024-03-27 09:00:46 发布
阅读量306 收藏
点赞数
分类专栏： 前端 文章标签： js JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/max_like/article/details/82871714
版权

JavaScript的发展史

JavaScript是有Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。最初Netscape将其命名为LiveScript，后来因为Netscape公司与Sun合作，Netscape管理层希望它外观上看起来像Java，因此改名为JavaScript。JavaScript最初受java的启发而开始设计的，因此语法上有类似之处，一些名称与命名规范也是借自java。但JavaScript的主要设计原则源自self和scheme。为了取得“技术优势“，微软推出了Jscript来迎战JavaScript的脚本语言。除了二者以外，当时的脚本语言还有CEnvi的ScriptEase。1997年，在ECMA(欧洲计算机制造商协会)的调解下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262，即ECMAScript。

JavaScript的特性

JavaScript脚本语言具有以下特点:

 

  1. 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
  2. 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
  3. 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
  4. 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
  5. 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

 

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

 

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

 

JavaScript的基础语法

使用场景与安装配置

JS（JavaScript的缩写）的使用场景（web网络开发）

  1. 客户端编程：编写在HTML中/js脚本文件中，运行在浏览器中【脚本】

主要实现：网页特效，数据验证，数据交互，读写HTML元素

  1. 服务端编程：编写在服务器中的js脚本文件中，运行在Node平台上

主要实现：检测访客的浏览器信息，以及服务端软件的功能流程处理

             

              安装与配置

  1. 安装：客户端编程，不需要安装【服务端开发，需要安装Node.js环境】
  2. 配置：客户端编程无需配置【服务端开发需要配置开发环境】
  3. 开发环境：客户端编程的环境就是浏览器，前提是浏览器支持js【大多数的浏览器引擎对象中包含了js解释器】

服务端就需要在Node.js中运行

JS代码的位置（客户端）

参考CSS的代码位置，可以把JS代码位置分为三种

  1. 外部脚本：把js代码写在一个后缀名为.js的文件中，通过script标签引入HTML中

例如：<script src=”index.js”></script>

  1. 网页内嵌：就是把JS代码写在script标签中
  2. 标签内嵌：一般是事件属。例如：onclick 鼠标单击

<div οnclick=’javascript:alert(“信息”)’></div>

<div οnclick=’alert(“信息”)’></div>

JS中的三种对话框

  1. 警告信息对话框：alert（）

代码

<!DOCTYPE html>
<html lang="en">
<head><title>alert</title></head>
<body>
    <button οnclick="t1()">按钮</button>
    <script>
        function t1() {
            alert("这个是警告提示框")
        }</script>

</body>

</html>

效果截图

  1. 信息确认对话框:confirm()

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
</head>
<body>
    <button οnclick="t1()">按钮</button>
    <script>
        function t1() {
            confirm("这个是确认对话框")
        }
    </script>
</body>
</html>

 

效果截图

  1. 交互对话框：prompt（）

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>alert</title>
</head>
<body>
    <button οnclick="t1()">按钮</button>
    <script>
        function t1() {
            res=prompt("这个是确认对话框");
            console.log(res);
        }
    </script>
</body>
</html>

 

效果截图

 

 

数据类型，变量，运算符

变量

变量是储存信息的容器

JS在声明变量是通过使用var关键词声明变量。变量声明后是空的，如需赋值可以使用赋值符进行赋值。

 

可以在一条语句中声明多个变量，每个变量之间用逗号隔开即可。例如：

       Var name=“tom”，age=“18”；

（JS中每一个语句后面加分号）

当然，声明也可以跨行

 

 

数据类型

  1. 字符串类型（String）：字符串可以是引号中的任意文本，可以使用单引号或双引号
  2. 数字（Number）：数字类型可以带小数点，也可以不带。极大或极小的数可以使用科学计数法表示
  3. 布尔类型（Boolean）：布尔（逻辑）只能有两个值：false或true
  4. 数组：在声明数组的时候可以使用Array（）函数，也可以直接使用“[ ]”声明一个空的数组
  5. Undefined和Null：Undefined字面解释为没有定义，缺少。Null是引用数据类型，表示空对象。目前二者大体同义

Null的用法是：

  1. 作为函数的参数，表示该函数不是对象
  2. 作为对象原型链的终点

Undefined的用法是：

  1. 变量声明了，但是没有赋值
  2. 调用函数时，应提供参数没有提供，该参数为undefined
  3. 对象没有赋值属性，该属性的值为undefined
  4. 函数没有返回值，默认为Undefined

 运算符

  1. 赋值运算符：=  +=  -=  …
  2. 算数运算符：+  -  *  /  %  …
  3. 比较运算符：>  <  >=  <=  ==（值相等）   ===（值、类型相等）
  4. 逻辑运算符：&&（与）  || （或）  ！（非）

选择结构

JS中提供了两种选择结构

  1. 判断结构：if-else结构
  2. 选择结构：switch-case结构

 

判断结构：

语法

if (条件 1){

  当条件 1 为 true 时执行的代码

  }

else if (条件 2){

  当条件 2 为 true 时执行的代码

  }

else{

  当条件 1 和 条件 2 都不为 true 时执行的代码

  }

示例

if (time<10){

  x="Good morning";

  }

else if (time<20){

  x="Good day";

  }

else{

  x="Good evening";

  }

 

选择结构：

语法

switch(n){

case 1:

  执行代码块 1

  break;

case 2:

  执行代码块 2

  break;

default:

  n 与 case 1 和 case 2 不同时执行的代码

}

 

示例

var day=new Date().getDay();

switch (day)

{

case 0:

  x="Today it's Sunday";

  break;

case 1:

  x="Today it's Monday";

  break;

case 2:

  x="Today it's Tuesday";

  break;

case 3:

  x="Today it's Wednesday";

  break;

case 4:

  x="Today it's Thursday";

  break;

case 5:

  x="Today it's Friday";

  break;

case 6:

  x="Today it's Saturday";

  break;

}

 

default 关键词来规定匹配不存在时做的事情

循环结构

for循环结构

  1. while循环结构
  2. do-while循环结构

 

for循环结构：

语法

for (语句 1; 语句 2; 语句 3)

  {

  被执行的代码块

  }

示例

for (var i=0; i<5; i++)

  {

  x=x + "The number is " + i + "<br>";

  }

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。语句 1 是可选的，也就是说不使用语句 1 也可以。也可以在语句 1 中初始化任意（或者多个）值

 

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

提示：如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

 

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。-

语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。

语句 3 也可以省略（比如当循环内部有相应的代码时）

 

While循环：

 

语法

while (条件)

  {

  需要执行的代码

  }

 

示例

while (i<5)

  {

  x=x + "The number is " + i + "<br>";

  i++;

  }

 

do-while循环

 

语法

do

  {

  需要执行的代码

  }

while (条件);

示例

do

  {

  x=x + "The number is " + i + "<br>";

  i++;

  }

while (i<5);

数组操作

声明数组

       var _name=Array（）；

       var _name=New Array(（）

       var _users=[ ]；

数组数据操作

       开头增加数据：unshift（args）

              开头删除数据：shift（）

 

              末尾增加数据：push（args）

              末尾删除数据：pop（）

             

              修改数据：通过下标修改。例如_name[0]=”tom”

删除数据：数组一旦创建就是固定长度，如果要实现删除一个数据：创建一个新数组

 

Array的属性

constructor

返回对创建此对象的数组函数的引用。

length

设置或返回数组中元素的数目。

portotype

使您有能力向对象添加属性和方法。

             

       Array对象方法

             

concat（）

连接两个或更多的数组，并返回结果。

join（）

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔

pop（）

删除并返回数组的最后一个元素

push（）

向数组的末尾添加一个或更多元素，并返回新的长度。

reverse（）

颠倒数组中元素的顺序。

Shift（）

删除并返回数组的第一个元素

slice（）

从某个已有的数组返回选定的元素

sort（）

对数组的元素进行排序

splice（）

删除元素，并向数组添加新元素。

toSource（）

返回该对象的源代码。

toString()

把数组转换为字符串，并返回结果。

toLocaleString（）

把数组转换为本地数组，并返回结果。

unshift（）

向数组的开头添加一个或更多元素，并返回新的长度。

valueOf()

返回数组对象的原始值

      

可帅的leeking
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
补充----JS生成随机数
跛鳖千里，丘山崇成
05-15 582
JS生成随机数： 关于 生成 min~max的随机整数的公式： parseInt(Math.random()*(max-min))+min Math.round(Math.random()*(max-min))+min 代码解释如下： // 关于 生成 min~max的随机整数的公式：parseInt(Math.random()*(max-min))+min // ...
js如何生成随机数
weixin_30415113的博客
06-02 520
js生成随机数有以下几种方式 1、JavaScript Math.random()内置函数 random函数返回值 返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1) random函数示例 //返回随机数 document.write(Math.random()); //返回10-20的随机数 document.write(Math.random()*(20...
如何用js生成随机数
weixin_33769125的博客
01-16 138
我们先理清几个概念：1.Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) 2.Math.floor(num); 参数num为一个数值，函数结果为num的整数部分（去掉小数部分只取整数）。 3.Math.round(num); 参数num为一个数值，函数结果为num四舍五入后的整数（会根据后面的小数四舍五入取整数）。 Math：数学对象，提供对...
JS中生成随机数
大佛拈花的博客
04-18 355
1 Math 对象方法： Math.ceil(); //向上取整。 Math.floor(); //向下取整。 Math.round(); //四舍五入。 Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494 1.1 实例说明： Math.ceil(Math.random()*10); // ...
Javascript获取不重复的随机数值
weixin_30399821的博客
02-02 257
/** * 获取不重复随机数 * @param integer start 随机数最小值 * @param integer end 随机数最大值 * @param integer size 随机数获取数量 最小为1，默认1 * @return integer|array 如 1或者[2,4,7,9] */ function randUnique(start, end,...
javascript 学习
05-16
js知识积累
JavaScript学习指南
03-20
JavaScript学习指南 JavaScript，一种广泛应用于网页和网络应用的脚本语言，是互联网上最流行的编程语言之一。它主要用于客户端的交互式网页开发，也可以在服务器端通过Node.js平台进行后端开发。JavaScript与Java...
JavaScript学习指南 高清 PDF
10-20
这份"JavaScript学习指南"高清PDF，无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面，我们将深入探讨JavaScript的一些关键知识点。 1. **基础语法**：JavaScript的基础包括变量、...
Javascript学习指南
10-25
本文结合自己学习javascript的经验，向大家推荐了循序渐进的学习javascript的自学的轨迹，非常的合理，给有需要的小伙伴们参考下吧。
JS中产生20位随机数以0-9为例也可以是a-z A-Z
10-25
本节主要介绍了JS如何产生随机数，本例产生20位随机数以0-9为例也可以是a-z A-Z,需要的朋友可以参考下
javascript获取不重复的随机数的方法比较
12-09
不重复的随机数方案1：1531 毫秒 一般的思路是先创建一个1-3000的数组，每一次取出一个，然后让这个数组减少一个， 取一个，减少一个，这样就可以做到永不重复了。 随机不重复_www.jb51.net 软件开发网 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 不重复的随机数方案2：297毫秒 但是方案1采用了slice方法，此方法重新生成数组，会大量占用内存和cpu运算， 效率很低，所以改良一下，从原始数组取出一个数， 然后让原始数组的这个位置赋值为null 。这样下一次取数的时候判断如果为null就不取，直到不为null为止。 经过测试，可以显著提高
JavaScript学习笔记
最新发布
07-11
js学习笔记
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
javascript学习手册合集
05-31
javascript学习 JavaScript 是一种属于网络的解释型的脚本语言，已经被广泛用于 Web 应用开发。最早是在HTML 网页上使用，用来给 HTML 网页增加各式各样的动态功能。在过去，JavaScript 只是被用来做一些简单的网页...
JavaScript中获取随机数的方法
ggq53219的博客
03-27 1478
random的用法
js生成随机数的方法
Lon_wang的博客
08-22 151
export const getUUID = (len = 16) => { const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('') const uuid = [] for (let i = 0; i < len; i++) { const r = 0 | Math.random() * chars.length uuid[i] = chars[r
js生成随机数
WinstonLau的博客
04-18 255
介绍几个函数 Math.ceil()：向上取整 console.log(Math.ceil(1.3)); // 2 console.log(Math.ceil(-1.3)); // -1 console.log(Math.ceil(0)); // 0 Math.floor()：向下取整 console.log(Math.floor(1.3)); // 1 console.log(Math...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值