了解JavaScrip

最新推荐文章于 2022-09-07 14:55:17 发布
最新推荐文章于 2022-09-07 14:55:17 发布
阅读量234 收藏
点赞数
分类专栏： HTML+CSS+JS 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42588990/article/details/107595024
版权

1.Javascript简介

JavaScript是一种轻量级的脚本语言，可以部署在多种环境，最常见的部署环境就是浏览器。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的操作方法。

JavaScript的核心部分相当精简，只包括两个部分：
基本的语法构造（比如操作符、控制结构、语句）
标准库（就是一系列具有各种功能的对象比如Array、Date、Math等）。

除此之外，还有提供的额外API可以分成三大类：浏览器控制类、DOM类、Web类。
Javascript还拥有非常广泛的使用领域
（1）浏览器的平台化
（2）Node.js
（3）数据库操作
（4）跨移动平台
在这里插入图片描述
在这里插入图片描述

javascript简单易学的特点也是另一个让人着迷的地方。
（1）学习环境无处不在
（2）简单性
（3）与主流语言的相似性
在这里插入图片描述

Javascript的调试工具也是极其简单。只要安装了Chrome浏览器，那么在其自带的“开发者工具“中唤醒”控制台” ，就能够随时运行和调试javascript代码。
控制台(console)：代码运行和调试的一个工具，因为开发者可以在这个工具中对整个代码的运行过程进行调控，故形象的被成为控制台。
控制台唤醒：
Mac环境下：Option+Command+J
Windows/Linux环境下：Ctrl+Shift+J
ps:在检查代码的界面中按下esc也能唤醒控制台，只不过这个时候页面样式也存在，会对js的调试产生影响。
Javascript发展历史
1995年12月4日 Netscape公司与Sun公司联合发布了JavaScript语言。
1996年03月 Navigator 2.0浏览器正式内置了JavaScript脚本语言。
1997年07月 ECMAScript 1.0发布。
1998年06月 ECMAScript 2.0版发布。
1999年12月 ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月 ECMAScript 4.0版草案发布
2009年12月 ECMAScript 5.0版正式发布
2015年06月 ECMAScript 6正式发布
JavaScript与ECMAScript的关系
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
在这里插入图片描述

2.Javascript名词解释

语句：JavaScript程序的执行单位为行（line），语句以分号结尾。一般情况下，每一行代码就是一个语句。

 var a = 1 + 3;

ps：多个语句可以写在一行内。但是一般情况下一行只写一条语句。

 var a = 1 + 3 ; var b = 'abc';

变量：其表示的值可以发生改变的量，叫做变量。

  var a;//在这个例子中a表示一个变量，a是变量的变量名。

ps：创建一个变量的过程叫做变量的声明。
pss：给变量一个具体的值的过程叫做变量的赋值。(变量在赋值之前必须被声明)

a = 10;

psss：将变量的声明和赋值写在一起的方式叫做变量的初始化。

  var a = 10;

名称解释

script标签表示脚本，可以在script标签中编写js代码。
另外可以通过script得src属性可以引入外部的脚本文件。
注意：script可以写在html文件的任意位置，到那时一般写在body的最后

1.语句
描述：以分号结尾的表达式
注意：一般情况一行就是一个语句（多个语句可以写在一行，但不建议）
2.变量
描述：其表示的值可以发生改变的量
语法：变量一般采用var申明
例子：var num=10;

3.Javascript变量命名规则

（1）JavaScript语言的标识符对大小写敏感，所以a和A是两个不同的标识符。
（2）首字母可以是任意字母以及美元符号和下划线。剩余可以是任意字母，美元符号，下划线和数字

aNum   FrankenStein  _My_Id  $name4 $user_address

ps:不能使用数字来当做命名的首位。

（3）不能使用javascript中的关键字(保留字)来命名变量
eg： arguments、break、case、catch、class、const、continue ……
（4）常用命名方式：驼峰命名法(首字母大写，其余字母小写)
eg： var userName = 15;

ps:给变量命名一定要给有意义的名字，不要使用类似a、b、c之类的无意义名字。

4.Javascript变量类型

Javascript中有六大基本数据类型，这六种数据类型也就是我们声明变量的类型。
（1）number 数字类型
（2）string 字符(串)类型
（3）boolean 布尔类型
（4）*Array 数组类型（不是基本数据类型）
（5）undefined&null 未定义类型&空类型
（6）object 对象类型

ps：JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着变量可以根据其保存的值的类型不同，显示为不同的类型。

var x 			// x 为 undefined类型
var x = 6; 		// x 为数字类型 
var x = “Bill";	// x 为字符串类型

（1）number 数字类型

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00; //使用小数点来写 
var x2=34; //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5; // 12300000 
var z=123e-5; // 0.00123

（2）string字符(串)类型
字符串是存储字符（比如 “Frankenstein"）的变量。字符串可以是引号中的任意文本。可以使用单引号或双引号：

var userName ="Frankenstein";
var userName ='Ma Yun';

可以在字符串中使用引号，只要不与包围字符串的引号冲突即可：

var answer = "Nice to meet you!";
var answer ="He is called 'Frank'";//外层是双引号，内层是单引号
var answer = 'He is called "Frank"';

（3）boolean布尔类型

布尔（逻辑）只能有两个值：true 或 false。

var x=true； 
var y=false；

布尔常用在条件测试中，表示真假值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>字符串类型_布尔类型</title>
    <script>
        /*
        3.字符(串)类型
            描述：在js中字符串类型是用来存储字符的类型，可以使用单双引号定义。
            注意:字符串在定义时只要写在引号内部即可
                 但是唯一不能写在内部的时外部定义时用的引号。
             例子：
                 var str1='';
                 var str2='a';
                 var str3='hello world';
                 var str4="good sxt";
                 var str5='my name is "sxt"';
                 console.log( str5);
           4.布尔类型
            描述：可以用来判断真假的数据类型
            类型值：true  false
         */
        var flag=true;
        var flag2=false;
        console.log( typeof flag);
        console.log( typeof flag2);
    </script>

</head>
<body>

</body>
</html>

（4）Array数组类型
数组是一组连续有序的变量的集合，数组中的变量根据数组中的下标来进行访问，数组中的变量被称为数组元素。

语法：var 数组名 = new Array(数组元素,数组元素,数组元素);
或者
var 数组名 = [数组元素,数组元素,数组元素];

var cars=new Array();
cars[0]="Audi"; 
cars[1]="BMW"; 
cars[2]="BeiDouXing"; 

var cars=new Array("Audi","BMW",“BeiDouXing");
var cars=["Audi","BMW",“BeiDouXing"];

ps:数组类型是一种特殊的对象类型。

（5）undefined&null 未定义类型&空类型
Undefined类型表示数据类型未知或者存在类型错误。如果变量的值为undefined，并不代表变量没有类型！

var name;
	console.log(name);  //此时变量name的类型就是undefined类型

null类型表示数据类型存在，但是并没有给变量(对象)赋值。一般null类型用于对象类型的初始化。如果变量(对象)的值为null，并不代表变量(对象)没有类型

var name;
	name = null；
	console.log(name);  //此时name就不再是变量，而是一个对象。类型就是null类型。

总结：undefined类型和null类型在页面中表现的效果是相同的，但是undefined用于变量类型，而null用于对象类型。两者必须不能混用！！！！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>未定义类型_空类型</title>
    <script>
        /*
        5.未定义类型undefined
        描述：是用来描述当变量的值不确定时，变量所表示的类型
        注意：未定义类型中有一个值就是undefined
        例子：
         var item;
         console.log(typeof   item);
         6.空类型null
         描述：表示对象为空。
         */
        var item ;
        item=null;
        console.log(typeof   item);
    </script>
</head>
<body>

</body>
</html>

（6）object对象类型
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象person有三个属性：firstname、lastname 以及 id。

ps:空格和折行无关紧要。声明可横跨多行：

var person={ 
		firstname : "Bill", 
		lastname : "Gates", 
		id : 5566 
};

对象属性有两种寻址方式（获取对象属性所对应的值的方式）：

name=person.lastname; 
name=person["lastname"];

js中的六种数据类型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js中六种数据类型</title>
    <script>
        /*
        1.数据类型
        描述：js中有六种数据类型，其中有五种是基本数据类型和一种对象(object)类型
        类型：
            (1)number          数字类型
            (2)string       字符(串)类型
            (3)boolean      布尔类型
            (4)undefined    未定义
            (5)null         空类型
         注意：js中拥有动态类型，变量可以根据【保存的值的类型】不同，而表现位不同的类型
            [typeof 运算符能够查看变量的类型]
            例子：
                 var item;
                 console.log(typeof item);
                 item=10;
                 console.log(typeof item);
                 item=true;
                 console.log(typeof item)
            2.number类型
         */
        var num1=3;
        var num2=3.14;
        var num3=314e2;
        console.log(num3);
    </script>
</head>
<body>
</body>
</html>

5.JavaScript用法

(1)HTML中的脚本必须位于标签之间。

(2)脚本可被放置在HTML页面的和部分中。

常用的两种引入js的方法：

1)在head标签里面引入外部的.js文件

2)在body结束标签之前引入内部脚本

<script>
		alert(“我的第一个JavaScript”);
</script>

6.JavaScript 输出

JavaScript可以通过不同的方式来输出数据：

  1. window.alert() 弹出警告框
<script>
		window.alert(5+6);
</script>

  1. document.write() 方法将内容写到 HTML 文档中

  2. console.log() 写入到浏览器的控制台

<script>
		console.log(“hello  world”) ;
</script>

7.Javascript基本运算符简介

（1）typeof 获取当前变量类型运算符（特殊）
描述：获取变量的类型
例子：

 var item=10;
console.log(typeof  item);

（2）= 赋值运算符
描述：在js中，=代表的是把等号右边的值赋予左边的变量
例子：

var item;
 item=15;

（3）== 简要比较运算符（忽略变量类型）
（4）=== 标准比较运算符（计算变量类型）
描述： == 表示判断两个变量的值是否相等(忽略变量的类型) 相等返回true
=== 表示判断两个变量的值是否相等（包括变量的类型）
例子：

 var item1=10;
 var item2='10';
 console.log(item1==item2);
 console.log(item1===item2);

(1) typeof 获取当前变量类型运算符

  var num=1;
    console.log(typeof num);
    var str = "1";
    console.log(typeof str);
    var obj={};
    console.log(typeof obj);
    var bool = false;
    console.log(typeof bool);
    bool = null;
    console.log(typeof bool);//返回为object
    console.log(bool);//null 已被清空false，变为null
    var x;
    console.log(typeof x);
    var arr = [1,2,3];
    console.log(typeof arr);//返回为object
    console.log(Array.isArray(arr));//返回true为数组，返回false不是数组

（2）= 赋值运算符
赋值运算符用来给变量赋值。

var age = 14;

ps：千万不要认为【赋值运算符】是【数学中的等号】。两者表达的是不同的内容。

（3）== 简要比较运算符（忽略变量类型）

var age = 14;
console.log(age==12);//false

比较运算符的计算结果是一个布尔值。两个变量的比较结果要么是true，要么是false。
至于说忽略变量类型的原因，请看下面的例子：

var number1 = 10;
var string1 = “10”;
console.log(number1==string1);//true

（4）=== 标准比较运算符（计算变量类型）

var age = 14;
console.log(age===14);//true

var number1 = 10;
var string1 = “10”;
console.log(number1===string1);//false

标准比较运算符在比较两个变量的值的时候，既考虑变量的类型是否相等，又考虑变量的值是否相等。但是本质上说标准比较运算符也是比较运算符的一种，只不过比较的标准较严格一些。

算数运算符

1.算术运算符
基本类型 + - * / %
（1）基本功能

 var num1=3;
             var num2=5;
             var result=num1+num2;
             var result=num1-num2;
             var result=num1*num2;
             var result=num1/num2;
             var result=num1%num2;
             console.log(result);

（2）特殊功能
+：（隐式转换）
a.如果加号两端有一端不是数字，那么先将数字转换为字符串，然后两个字符串拼接
b.如果出现多个加号，按照从左到右的计算规则计算
剩余的算术运算符
a.如果符号两端有一端不是数字，那么先将不是数字的内容转换称数字，在进行计算
b.如果不是数字的内容无法转换成数字，那么结果是NAN (no a number)

2、 算术运算符
类型：++ –
语法：++num num++ --num num–
功能：+1 -1
总结：
a.如果运算符在变量的前边，那么先自增或自减，再使用
b.如果运算符在变量的后边，那么先使用，后自增或自减

赋值运算符

赋值运算符
类型：+= -= *= /= %=
功能：累加
例子：var num=5; num+=3;相当于 num=num+3;

比较运算符
类型:== 、 === 、 !=
总结：
a.如果数字和其他内容比较，那么先将其他内容转换成数字，然后再进行运算
b.布尔转成数字(false是0，true是1)，再和数字进行运算
c.布尔和字符串进行比较时，都先转换成数字，再进行运算
例子：

 var num1='20';
         var num2=10;
         var num3=false;
         // var  result=num1+num3;
         console.log(num1<num3);

逻辑运算符

类型：&& || ！
语法：
a. && (表达式1)&&(表达式2);
一假即假
b.|| (表达式1)||(表达式2);
一真即真
c.! !(表达式)

三目运算符

语法： 表达式1?表达式2：表达式3；

运算符优先级

初等单目一二级
乘除取余加减移
关系等于不等于

扩展：注释

（1）单行注释：// 一般写在代码的后边
（2）多行注释：/ * … * / (注意多行注释不能嵌套)
（3）文档注释：/ ** … * / 一般写在代码块的前面

ps：不要在使用html中的注释方式来注释js的代码了，两者是不同的。
pss：虽然快速注释的快捷键是一样的，但是需要引起注意。

脑袋不灵光的小白羊
关注
专栏目录
一文了解javascript语言，适合小白想了解什么是JavaScript语言的同学
09-07
一文了解javascript语言，适合小白想了解什么是JavaScript语言的同学 本文讲述javascript语言的基础，详细的学习需要系统化学习，文章最后推荐了系列书籍名称
JavaScript的怪异部分：了解JavaScript中的怪异部分
02-10
这个标题“JavaScript的怪异部分：了解JavaScript中的怪异部分”暗示了我们将深入探讨JavaScript的一些独特特性和不寻常的行为，这些特性在其他编程语言中可能并不常见。 首先，JavaScript是弱类型的语言，这意味着...
jQuery内部对<script>标签的处理
weixin_34115824的博客
03-31 617
前言： 本文只分析 jQuery 调用 append(‘<script>alert("xxx")’) 后，jQuery 对 <script> 的处理， 关于 append()、domManip()、buildFragment() 等处理 待插入元素的函数， 请看：当我调用了$().append()后，jQuery内部发生了什么？ 1、有这样一段代码： <body&...
关于<script>元素（js两种引用方法：内部嵌入，外部引入）
iuukai
07-12 5946
文章目录一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。二、在同一个HTML文档中，调用多个JavaScript脚本。三、<script>元素定义的6个属性。 一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。 关于<script>标签的位置问题，虽然<script></script>可以放在...
JavaScript基础
qq_52159101的博客
03-17 246
JavaScript基础 如何引入js 页面内嵌<script></script>标签 外部引入<script src="location"></script> 为符合web标准 (w3c标准中的一项) 结构(html) / 样式(css) / 行为(js) 相分离, 通常会采用外部引入. 外部引入优先级高于页面内嵌标签. js基本语法 变量 变量声明: 声明: var a; 赋值: var a = 100; 命名规则 变量名必须以 英文字母
【JavaScript 基础】
Jade_Heng_Star的博客
07-16 507
JavaScript 基础
前端面试题
xiaoxiannvh的博客
09-30 2306
记录一下前端面试题2021 一、单项选择题(每题2分，共30分) 1.C5S样式的几种链接方式，哪种优先级最高( ) A. @import样式导入 B、<style>页面内联 C、<link>页面外链 D、style结构内嵌 2.下列说法不正确的是要项( ) A.Vue中的数组变更通知，通过拦截数组操作方法而实现 B.若指定了组件的template选项，render 函数不会执行 C.使用 vm.$nextTick 可以确保获得 DOM 异步更新的结果 D.若子组件使用 $emi
全面了解JavaScript对象进阶
01-19
要了解JavaScript对象，我们可以从对象创建、属性操作、对象方法这几个方面入手。概括起来，包括以下几模块：  1.创建对象 1.1 对象直接量 对象直接量是创建对象最简单的方式，由若干名/值对组成映射表: var point...
javascript-cheatsheet:了解JavaScript的基本术语，概念和语法
05-04
:fire: JavaScript备忘单 :world_map: 这是JavaScript基本概念的备忘单。 开始学习JavaScript的基本概念，语法，术语和不同的构造。 奖励：第14节的单页DOM API速查表 想正确学习JavaScript吗？ iLoveCoding Pro...
了解JavaScript中的内置对象
01-30
作者:KrisHadlock,发布于2013-4-11：JavaScript是一种灵活的语言，这有时使它名声较差，但是往好的一面看，它也向您提供了快速、创造性地编写代码的能力。它提供的属性和方法仅仅是可以实现功能的开始是您的想象力...
网易笔试题总结
u013455430的专栏
04-02 1096
var string = 'string'; var number = 0; var bool = true; console.log(number || string); console.log(number && string); console.log(bool || number); console.log(bool && number); 输出结果 ...
|| 和 && 基础笔试题
m0_59006402的博客
09-07 211
|： 如果第一个操作数执行条件判断结果为 true 就返回第一个操作数的值，如果为 false 就返回第二个操作数的值；&&：如果第一个操作数执行条件判断结果为 true 就返回第二个操作数的值，如果为 false 就返回第一个操作数的值。：0，空字符串，undefined，null，NaN, false。
引用jQuery和使用内部script代码块
学点的CSDN博客
01-19 987
开发工具与关键技术：Adobe Dreamweaver CC 作者：黄灿 撰写时间：2019.1.18 我在使用jQuery插件和script代码块的时候，把jQuery引入放到了script代码块的下面导致script代码块无法调用jQuery使页面无效果（图1） 图1 Window加载是按顺序加载事件的，当加载到script代码块并没有加载有jQuery插件，所以无法调用jQuery插件里面...
js的三种使用方式（行内js、内部js、外部js）
热门推荐
xuehyunyu的博客
06-11 4万+
1、行内js：js不单独写出 js使用方式1：行内js 2、内部js：script里的程序整个页面都可以用 js使用方式2：内部js //声明一个函数(整个文档都可以使用) function surprise() { alert('恭喜你中了一百万')/*弹出框*/
JS的内部引入和外部引入
zhai314341197的博客
03-11 2483
1.内部JS 1.1语法 在html里增加<script>标签，把js代码写在标签体里 <script> //在这里写js代码 </script> ex： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit...
笔试-网易
Alex_xlin的博客
09-06 565
网易 二分查找算法不能在下面哪个数据结构中使用？（） sorted linked list 二分查找不能在链表中使用   对算法估计空间复杂度，关注的是 程序使用的辅助空间   某单链表中最常用的操作是在最后一个元素之后插入一个元素和删除链表中给定的元素，则下列选项中正确的是________。 若仅有头指针，则插入操作及删除操作均是O(n)的   已知一棵高度为4的完全二叉树的...
2019.05.06 拼多多前端实习笔试
qq_36282931的博客
05-11 492
好像拼多多的笔试在4月初就结束了，这个应该是补录的？ 第一次碰到有填空题的笔试，有非常多问js运行结果的题目 单选 TCP/IP三次握手属于哪层 闭包 let用法 在<h2>后插入图像 &&和|| 闭包 let 多选 js 什么方法可以实例化对象 js严格模式 numbers.reduce()方法 填空 元素之后插入内容使用哪个伪类 js基本数据类型 二叉树遍...
前端选择题
半盏清茶，一杯浊酒
08-11 4051
网易： 1、已知a为不为空的数组，且变量b===a. 以下哪些方式可以清空数组, 使得a.length 与 b.length 都为 0; b.len(0) a = [] a.splice(0, a.length) a = a.slice(a.length) 2、 二分法查找算法不能在下列哪个数据结构中用：（二分查找算法是在有序数组中...
"深入了解JavaScript：基本技术解析
在JavaScript教学资源中，学习者将能够了解JavaScript的概述和基本特性。JavaScript是一种在客户端运行的脚本语言，它与HTML和CSS一起构成了现代网页的核心技术。JavaScript的解释性使得它可以直接嵌入到HTML文件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值