一、JavaScript

1.Java、JavaScript、html

①JavaScript与Java的区别类型：

（1）JavaScript----解释性编程语言

（2）Java----编译型的编程语言

html----超文本标记语言

② JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用（做什么？）

网页特效 (监听用户的一些行为让网页作出对应的反馈)

表单验证 (针对表单数据的合法性进行判断)

数据交互 (获取后台的数据, 渲染到前端)

服务端编程 (node.js）

③JavaScript的组成

ECMAScript:

规定了js基础语法核心知识。 比如：变量、分支语句、循环语句、对象等等。

Web APIs :

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作。

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等 。

注意 DOM属于BOM。

2.JavaScript的引用方式

①方式一：js内部式————功能调试

②方式二：js外部式————实际项目推荐使用

③方式三：js内联式————通过事件方法写在标签内部(不推荐使用)

3.常见的输入输出语法

输出方式1：document.write();————将内容显示在浏览器页面中

输出方式2： alert();————方法----逻辑调试中，或者警告语句

输出方式3： console.log();————方法----逻辑调试中

输入方式1： prompt()；----交互式弹窗

二、变量和数据类型

1.变量

内存：计算机中存储数据的地方，相当于一个空间。

变量：是程序在内存中申请的一块用来存放数据的小空间。

变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

        // 变量的定义方式----let 变量名称;let age;  //年龄---定义声明console.log(age);//undefined   未定义---当前变量未赋值
​//变量赋值age = 20;console.log(age);//20————数字型
​// 变量初始化————变量声明和赋值同时写// 注意：let不允许多次声明一个变量(即同一个变量名称不能重复声明)let userName = "张三"console.log(userName);
​// 多变量同时声明let userName1 = "魈", userAge = 18;

2.变量命名规则和规范

（1）规则：

Ø 不能用关键字

Ø 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

Ø 只能用下划线、字母、数字、$组成，且数字不能开头

Ø 字母严格区分大小写，如 Age 和 age 是不同的变量

（2）规范：

Ø 起名要有意义

Ø 遵守小驼峰命名法

Ø 第一个单词首字母小写，后面每个单词首字母大写。例：userName

3.数据类型

1.JS 数据类型整体分为两大类：

①基本数据类型

②引用数据类型----内存中开辟空间存储数据---变量（数据存放地址）

检查基本数据类型的方法 typeof

2.基本数据类型

数字类型(number)————整数、小数

字符串(string)————被单引号、双引号、反引号包括的数据都是字符串类型

布尔类型(boolean)————真假值————true/false————条件判断

未定义型(undefined)————变量未赋值，数据类型为undefined

空类型(null)

null 和 undefined 区别：

1.undefined 表示没有赋值

2.null 表示赋值了，但是内容为空

3.补充：模板字符串

反引号,ES6中新增的模板字符串

  let uname = "魈";let age = 18;console.log("我的姓名为" + uname + "，年龄为" + age + "岁");console.log(`我的姓名为${uname}，年龄为${age}岁`);

3.数据类型转换

类型转换：

(1)隐式(自动)转换----凭借经验判定

 //除了+以外，其他的和字符串里的数字数据都是做运算console.log(11 + 11);//22       +号====加法作用console.log("11" + 11);//1111   +号====拼接作用console.log(11 - 11);//0         -号====减法作用console.log('11' - 11);//       -号====减法作用

(2)显式(手动)转换

 // 转换为数字型let str = "124"console.log(Number(str) + 10);//字符串转换为数字类型
​let str2 = "12.345元";console.log(parseInt(str2));//转换成整数类型
​let str3 = '12元';console.log(parseFloat(str3).toFixed(2));//转换成小数类型
​let flag = false;let under = undefined;let nul = null;console.log(Number(flag));//false---0,true---1console.log(Number(under), typeof Number(under)); //NAN-----非数字，但是number型console.log(Number(nul));//为空的0
​// 转换为字符型//prompt()中出来的是String型！！！！let num1 = 20;console.log(String(num1));console.log(typeof String(num1));
​var num = 15;var a = num.toString();//转换为十进制//  var a = num.toString(2);----转换为二进制


三、运算符和流程控制


1.算数运算符


数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。


  • + 求和
    • 

  • -求差
    • 

  • *求积
    • 

  • / 求商
    • 

  • % 取模（取余数）------ 开发中经常作为某个数字是否被整除
    

    // +加:有些小数相加得出结果为无限小数，如0.3+0.6let num1 = 10;let num2 = 20;// let num1 = "0.1" - 0;//通过-0，num1从字符串变为数字型// let num2 = "0.7" - 0;console.log(num1 + num2);//30
​
​// /除let num3 = 4;let num4 = 5;console.log(num3 / num4);//被除数是0，结果是Infinity：无限大console.log(1 / 0);
​
​//  %取余（求模）let num5 = 4;let num6 = 5;console.log(num5 % num6);//4
​let a = 12 % 5;//2console.log(a);
​let b = 100 % 2;console.log(b);//0let d = 1 % 1;console.log(d);//0
​let c = 1 % 10;console.log(c);//1
​let e = 0 % 1;console.log(e);//0let f = 10 % 0;console.log(f);//NaN


2.赋值运算符


  • +=
    • 

  • -=
    • 

  • *=
    • 

  • /=
    • 

  • %=


        let num = 10;num = num + 5;console.log(num);   //15
​let num2 = 20;num2 += 20; //num2=num2+20console.log(num2);//40
​let num3 = 10;num3 %= 3;    //num3=num3%3;console.log(num3);//1
​


3.一元运算符


（1）自增：


符号：++


作用：让变量的值 +1


（2）自减：


符号：--


作用：让变量的值 -1


         //参与运算时// 2.1 ++在后，先参与运算，再自增1let num3 = 10;let sum1 = num3++ + 10;console.log(sum1, num3);//20  11
​// 2.2 ++在前，先自增1，再参与运算，let num4 = 20;let sum2 = ++num4 + 10;console.log(sum2, num4);//31  21
​
​//只要num++进行过一次运算它就自增一，那个算数式子不需要要算完let num5 = 10;console.log(num5++ + 1 + ++num5);//  23// let sum3 = num5++ + 1 + ++num5;//num5++参与运算时为10，加完1后，自增1，num5为11//++num5此时先自增1，即为12//所以num5++ + 1 + ++num5=10+1+12=23


4.比较运算符


  • > 左边是否大于右边
    • 

  • < 左边是否小于右边
    • 

  • 小于= 左边是否大于或等于右边
    • 

  • <= 左边是否小于或等于右边
    • 

  • == 左右两边是否相等,将两边的数据进行转换为数值
    • 

  • === 左右两边是否类型和值都相等
    • 

  • !== 左右两边是否不全等


比较结果为boolean类型，即只会得到true或false


字符串比较，是比较的字符对应的ASCII码


 // == 左右两边是否相等,将两边的数据进行转换为数值console.log(5 == "5");//trueconsole.log(5 == 5);//true// === 左右两边是否类型和值都相等console.log(5 === "5");//falseconsole.log(5 === 5); //true// !== 左右两边是否不全等console.log(5 !== "5");//trueconsole.log(5 !== 5); //false
​//这里为ASCII表比较console.log("a" > "b");//falseconsole.log("a" < "b");//false//一位一位的比，第一位可以比出大小就不需要比后面的了console.log("ab" > "ac");//falseconsole.log("ab" < "bc");//true
​//NaN不等于任何值，包括它本身// console.log(NaN == NaN);//false
​//小数最好不要比较很有可能出现精度问题，0.3+0.6=0.899999....console.log(0.3 + 0.6 == 0.9)//false


5.逻辑运算符




  //  &&逻辑短路-----左边为假，则输出左边的数据；左边为真，则输出右边的数据console.log(0 && 10);//0console.log(10 && 20);//20
​//  || 逻辑短路-----左边为假，则输出右边的数据；左边为真，则输出左边的数据console.log(0 || 10);//10console.log(10 || 20);//10


6.运算符优先级




7.分支语句


程序三大流程控制语句


（1）以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构


（2）有的时候要根据条件选择执行代码，这种就叫分支结构


（3）某段代码被重复执行，就叫循环结


① if语句


if语句有三种使用：单分支、双分支、多分支


if (条件) {
满足条件后执行的逻辑代码;
}
​
​
if (条件) {
满足条件后执行的逻辑代码;
} else {
不满足条件后执行的逻辑代码;
}
​
​
if (条件1) {
满足条件1后执行的逻辑代码;
} else if (条件2) {
满足条件2后执行的逻辑代码;
} else if (条件3) {
满足条件3后执行的逻辑代码;
} else {
上述条件都不满足后执行的逻辑代码;
}


②三元运算符


其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式


语法：条件 ? 满足条件执行的代码 : 不满足条件执行的代码;


 // 三元运算符//  条件?   条件成立则返回数据1:条件不成立返回数据2;/*  let age = 20;if (age >= 18) {console.log("成年");} else {console.log("未成年");} */
​// age >= 18 ? console.log("成年") : console.log("未成年");/*  let str = age >= 18 ? "成年" : "未成年";console.log(str); */
​let num1 = 40;let num2 = 44;/* if (num1 > num2) {console.log("num1-" + num1 + "最大");} else {if (num1 < num2) {console.log("num2-" + num2 + "最大");} else {console.log("num2和num2相等");}} *///多个条件let max = num1 > num2 ? num1 : (num1 < num2 ? num2 : "相等");console.log(max);


③ switch 语句


switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特 定值的选项时，就可以使用 switch。


switch( 表达式 ){case value1:// 表达式 等于 value1 时要执行的代码break;case value2:// 表达式 等于 value2 时要执行的代码break;default:// 表达式 不等于任何一个 value 时要执行的代码}




四、循环


1.while循环


        while (循环条件) {要重复执行的代码（循环体）;}// 输出1-10的数字到控制台
​// 循环三要素：// 1.初始化值----计数器let i = 1;// 2.循环条件while (i <= 10) {console.log(i);//3.控制变量i++;}




2.do-while循环


do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);


执行思路：


1 先执行一次循环体代码


2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码 注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码


  let i = 0;do {console.log(i);i++;} while (i >= 10);


3.for循环


for (初始化变量; 循环条件; 控制变量) {循环体}// 求1到10的和let sum = 0;for (let i = 1; i <= 10; i++) {sum += i;}console.log("1到10的和：" + sum);


4.退出循环


continue：结束本次循环，继续下次循环


break：跳出所在的循环


   // 退出循环/*   for (let i = 0; i < 10; i++) {if (i == 6) {break;//终止循环体}console.log(i);}*/
​for (let i = 1; i < 100; i++) { // 10,20,30,40,50,60,70,80,90if (i % 5 != 0) {continue; //跳过本次循环，继续下一次循环}console.log(i);}


五、数组


1.数组


①数组(Array)是一种可以按顺序保存数据的数据类型


(1)数组的创建与查询


②数组创建方式：


方式1：字面量创建


语法： let 数组变量名称=[数组元素1，数组元素2，数组元素4，数组元素n];


方式2：构造函数创建数组


        let arr1 = new Array();  //空数组let arr11 = [];          //空数组
​let arr2 = new Array(3);     //数组的长度为3let arr22 = [3];             //数组的具体元素为3
​let arr3 = new Array(3, 4);  //数组的具体元素3,4let arr33 = [3, 4];          //数组的具体元素3,4


  


③ 数组查询： 数组变量名称[下标]


    let names = ['Osborn', 'Sariel', 'Jesse', 'Evan', 'Charlie'];console.log(names);console.log(names[3]);console.log(names[5]);//undefinedconsole.log(names.length);//5


(2)数组的遍历


for (let i = 0; i < arr.length; i++) {console.log(arr[i]);}


2.数组增删改查


   let arr = [1, 2, 3, 4, 5];//增arr.push(10, 11, 12)//末尾添加数据---数组名称.push(元素1,元素2,……元素n);arr.unshift(-15, -11);//头部添加数据
​//删let obj = arr.pop();//只是删除数组最后的一个数 //let obj1=arr.splice(删除的位置，删除的个数)----任意位置删除let obj1 = arr.splice(arr.length - 1, 1);//删除最后一个
​//改-----数组名称[下标]=值arr[4] = 6;
​//查----数组名称[下标]console.log(arr[2]);
​
​//1.删除指定元素  数组名称.splice(起始位置, 删除的个数)let obj2 = arr.splice(arr.length - 1, 1);console.log(arr);console.log(obj2);
​
​//2.添加指定元素  数组名称.splice(起始位置, 0,新元素1，新元素2)let arr2 = [1, 2, 3];arr2.splice(1, 0, "张三", "lis");console.log(arr2);
​
​//3.修改指定元素  数组名称.splice(起始位置, 修改的数目,新元素1，新元素2)let arr3 = [1, 2, 3, 4];arr3.splice(1, 2, "5", "6");console.log(arr3);


​


六、函数


1.函数


(1)函数----代码功能块


作用----有利于精简代码,方便复用。


(2) 函数的声明语法


function 函数名称() {
函数体;
}


(3)函数调用语法


函数名称(); // 调用方法


//求两个数的和---自己输入数let num1 = +prompt("第一个数")let num2 = +prompt("第二个数")// 1.创建函数function getSum() {let sum = num1 + num2;console.log(sum);}// 2.调用函数getSum();
​
​//求两个数的和---定死调用实参// 1.创建函数-----形参---局部变量function getSum1(num1, num2) {console.log(num1 + num2);}// 2.调用函数----实参---实际的数据getSum1(45, 55);getSum1(65, 55);
​//学生的分数是一个数组，计算每个学生的总分function getSum(str) {let sum = 0;for (let i = 0; i < str.length; i++) {sum += str[i];}console.log("总成绩为" + sum);}getSum([10, 20, 30, 40]);getSum([10, 203, 30, 40, 77]);getSum([10, 20, 30, 40, 67, 11]);


2.函数返回值


在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用


函数内部只能运行到 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写


return会立即结束当前函数


函数可以没有 return，这种情况函数默认返回值为 undefined


  // 1.创建函数-----形参---局部变量function getSum(num2, num1) {let sum = num1 + num2;console.log("rwererwe");return sum;  //返回计算结果/*return 作用：（1）返回数据（2）结束函数体运算*/
​console.log("sum的和：" + sum);console.log("232432432");}


3.作用域




4.匿名函数


具名函数：在声明函数的时候为函数命名


匿名函数：将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式


匿名函数语法：


lef 函数变量名称=function(){函数体
}
​//调用
函数变量名称（）


​
												


											

JavaScript基础知识总结(一)相关推荐
	

    
						
  1. JavaScript 基础知识 - BOM篇
		
    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
    
		
    2. 
						
  2. js java用var_Java基础———JavaScript基础知识
		
    原标题:Java基础---JavaScript基础知识 JavaScript基础知识(1) Javascript的历史,Javascript是什么? JavaScript 诞生于 1995 年. 它当 ...
    
		
    3. 
						
  3. JavaScript 基础知识 - DOM篇(二)
		
    7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...
    
		
    4. 
						
  4. javaweb(02) JavaScript基础知识
		
    javaweb(02): JavaScript基础知识 JavaScript简介 为什么出现JavaScript Javascript是什么 JavaScript和Java的关系? 就像卡巴斯基和巴基 ...
    
		
    5. 
						
  5. Javascript基础知识之四（常用数组方法）
		
    一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...
    
		
    6. 
						
  6. JavaScript基础知识与脚本语言总结
		
    1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...
    
		
    7. 
						
  7. JavaScript 基础知识 - 入门篇(二)
		
    11. 函数 11.1 函数的基础知识 为什么会有函数? 在写代码的时候,有一些常用的代码需要书写很多次,如果直接复制粘贴的话,会造成大量的代码冗余: 函数可以封装一段重复的javascript代码, ...
    
		
    8. 
						
  8. JavaScript 基础知识
		
    JavaScript 基础知识 文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...
    
		
    9. 
						
  9. JavaScript 基础知识查漏补缺
		
    JavaScript 基础知识查漏补缺(持续更新) 数据类型 var bool = '4.3' > '11' console.log(bool) // 结果为true,二者都为字符串,字符串之间 ...
    
		
    10. 
						
  10. 网页游戏开发基础——JavaScript基础知识
		
    对于初学编程的朋友来说,这篇文章有点长,而且会有点难懂.但是请不要放弃,我尽量以通俗的语言解释相关的编程概念,这里只讲解编写一个游戏需要的相关编程概念(如需要会在后面的文章中随时补充相关概念),对其余 ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. proxmoxve打造云桌面_AIO攻略 | 桌面云是如何解决外设问题的？
		
    2. 
						
  2. javascrip 常用属性
		
    3. 
						
  3. 如何基于MySQL及Redis搭建统一的kv存储服务 | 秦波
		
    4. 
						
  4. pytorch CrossEntropyLoss用法
		
    5. 
						
  5. 数学理论—— 蒙特卡洛近似
		
    6. 
						
  6. 可用于在 Microsoft.NET Framework 4.0 中的 ASP.NET 浏览器定义文件的修补程序
		
    7. 
						
  7. eigen库安装_OpenCV+Eigen上位机程序移植（七十一）
		
    8. 
						
  8. stm32 SysTick
		
    9. 
						
  9. java http 包_java http请求
		
    10. 
						
  10. python中beautifulsoup是什么_Python中的BeautifulSoup – 获取类型的第n个标记
		
    11. 
						
  11. 重启小狼毫输入法，rime输入法重启
		
    12. 
						
  12. CodeIgniter session过期时间问题
		
    13. 
						
  13. 传智播客风清扬视频------异常简述
		
    14. 
						
  14. 【icem】非结构体网格的质量+混合网格的合并问题
		
    15. 
						
  15. 用python实现阴阳师简单挂机脚本
		
    16. 
						
  16. sudo apt update时 E: 仓库 “http://mirrors.ustc.edu.cn/ros/ubuntu jammy Release” 没有 Release
		
    17. 
						
  17. 赶紧收藏，都在用的四种标题写法
		
    18. 
						
  18. css 延时几秒代码,CSS3 会聚展开文字动画实例及animation-delay属性规则
		
    19. 
						
  19. 常见的邮箱的pop和imap以及smtp地址整理
		
    20. 
						
  20. 01前端入门HTML5 +Css3+电商网页制作：HTML5
		
    21. 
		

	


热门文章
	

    
									
  1. hdu2389（HK算法）
			
    2. 
						
  2. 2019年北京画室排名前十位有哪些？北京画室口碑版本
			
    3. 
						
  3. 通配符*和?有什么区别
			
    4. 
						
  4. [BZOJ3677/UOJ#105][APIO2014]Beads and wires 连珠线（树形dp+换根）
			
    5. 
						
  5. idata界面_iData
			
    6. 
						
  6. 运行Matplotlib代码，却没有任何图像窗口跳出
			
    7. 
						
  7. kwant搭建六角晶格矩形区域散射计算LDOS和透射率
			
    8. 
						
  8. 强制换行与强制不换行
			
    9. 
						
  9. 清明培训 清北学堂  DAY1
			
    10. 
						
  10. webstorm(二)：拼写warning
			
    11.