一.JavaScript简介

1.JavaScript背景

JavaScript是一种具有函数优先的轻量级解释型的编程语言，作为开发Web页面的脚本语言而出名。
JavaScript最初由Netscape设计，最初将其脚本语言命名为LiveScript，后来Netscape在与Sun（java就是这个公司开发的）合作之后将其改名为JavaScript。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。

2.组成

ECMAScript（一种脚本语言的标准化规范）

1996年11月，javascript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。
因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。在日常场合，这两个词是可以互换的。

文档对象模型（DOM）
浏览器对象模型（BOM）

3.引入方式

行内引用：

<input type="button" value="按钮" onclick="console.log('这是行内引用')">

内嵌：

<script>console.log('内嵌js');
</script>

外部引用：

<script src="文件路径.js"></script>

console.log('外部引用js')

注意：js代码要放到底部，因为浏览器渲染网页是从上往下，如果js代码放在前面，浏览器就会优先加载js，导致html页面加载不完全，出现bug。
如果想放在前面，可以在js中使用window.onload方法。
window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload=function(){.....
}

4.语法规范

//单行注释
/*多行注释*/

使用;表示结束。但只有一行内写了多个语句，才必须写分号。js有分号自动补全功能，当一行只有一条语句的时候，可以不加分号
大小写敏感

二、JS基本语法

1、变量

1.变量声明

var a
var b=1
var c,d,e

2.命名规则

//驼峰命名法
var backToTop

由字母、数字、下划线以及$组成，不能以数字开头
不允许使用JS的关键字和保留关键字：break、case、catch、default、false、new、this、undefined……
可以采用驼峰命名法：第一个单词全小写，此后单词首字母大写
尽量见名知意

3.数据类型
JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

值类型(基本类型)：数字(Number)、字符串(String)、布尔(Boolean)、未定义(Undefined)、空(Null)
引用数据类型：对象(Object)、数组(Array)、函数(Function)

//数字
var a = 5;
//字符串
var name = "John"; //字符串的值必须用引号（单双均可，必须成对）扩起来
//布尔
var login = true;  // 布尔，true/false 是 js里的特殊关键字，不需要引号，加了引号就变成字符串了
//undefined
var x;
console.log(x)
// null
console.log(value)
// 对象
var page = {  pageSize: 5,currentPage: 2,title:"蓝旭工作室",
}
//  数组
var arr = [5, '蓝旭工作室', undefined]
// 函数
var console1 = function () {  console.log('这是一个函数')
}

4.数据类型转换
typeof()可以返回变量的6种数据类型：number、string、boolean、undefined、object、function

显式类型转换

Number()转换为数字类型
parseInt()转换为int类型
parseFloat()转换为浮点型
String()转换为字符串类型
变量.toString()将变量转换为字符串类型（toString()无法转换null和undefined）
Boolean()转换为布尔类型

隐式类型转换

isNaN()判断括号内是否为NaN
运算过程中的隐式类型转换

2、运算符

算数运算符 +、-、*、/、%、++、- -
比较运算符和C语言相比，多了=== 和 !==
逻辑运算符 &&、||、!

3、条件循环语句

if( ){ }else if( ){ }else{ }、switch case
for、while、do while
break、continue

4.数组

var arr = [5, '蓝旭工作室', undefined]
var arr2 = new Array()
arr2[3]="蓝旭工作室"

由于JS的弱检查性，可以在一维数组中放不同类型的变量。
获取数组元素个数：数组名.length()

console.log(arr2.length)

数组方法

pop() 方法从数组中删除最后一个元素；
push() 方法（在数组结尾处）向数组添加一个新的元素；
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素。
数组的元素就可以使用 delete 运算符来删除，使用 delete 会在数组留下未定义的空洞。
sort() 方法对数组进行排序
reverse() 方法反转数组中的元素。

不改变原数组的操作

join() 方法也可将所有数组元素结合为一个字符串，还可以规定分隔符；
concat() 方法通过合并（连接）现有数组来创建一个新数组
splice() 方法可用于向数组添加新项或删除元素
第一个参数（0）定义新元素应该被添加（接入）的位置。
第二个参数（1）定义应该删除多个元素。
slice() 方法用数组的某个片段切出新数组。
slice() 可接受两个参数，比如 (1, 3)。
该方法会从开始参数选取元素，直到结束参数（不包括）为止。

5、对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成，属性由逗号分隔。

1. 对象的创建

var obj = {}
var obj = new Object()

2. 获取对象属性值

对象属性有两种寻址方式：

对象.属性名
对象[“属性名”]

3. 属性的增删

增加新属性直接写新键值对obj.key = value
删除属性 delete obj.key

5.函数

1.函数的定义和调用

function name(参数 1, 参数 2, 参数 3) {//函数命名要符合驼峰命名法要执行的代码
}
name()//调用

2.函数表达式

命名函数表达式
这种写法会导致函数名失效

var add = function fun() {console.log('命名函数')
}

匿名函数表达式

var add = function () {console.log('匿名函数')
}
add()

3.参数和返回值

函数的形参不用指定参数的类型。
形参可以比实参多，实参也可以比形参多。
arguments是JS的一个内置的类数组对象。只能在函数体中使用，arguments 代表正在执行的函数和调用它的函数的参数。

function fun(){console.log(arguments)
}
fun(2, "11",true);

arguments 是一个类数组对象，不是一个数组，除了length属性和索引元素之外没有任何数组属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的数组。

var args = [].slice.call(arguments);  // 方式一
var args = Array.prototype.slice.call(arguments); // 方式二
// 下面是 es6 提供的语法
let args = Array.from(arguments)   // 方式一
let args = [...arguments]; // 方式二

当 JavaScript 到达 return 语句，函数将停止执行。

函数通常会计算出返回值。

var x = multiply(7, 8); function multiply(a, b) {return a * b;
}
//x=56

不加括号返回的是函数本身。

4. 构造函数

所谓”构造函数”，就是专门用来生成实例对象的函数。

构造函数首字母一般大写。
构造函数返回的是一个对象。
函数体内部使用了this关键字，代表了所要生成的对象实例。
生成对象的时候，必须使用new命令

为什么要使用构造函数？

在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };

function Person(name, gender, hobby) {this.name = name;this.gender = gender;this.hobby = hobby;this.age = 6;
}
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');

new命令的作用，就是执行构造函数，返回一个实例对象。
new 就是创造对象的过程
new 也叫做实例化对象的过程
new 创造出来的对象叫做构造函数的实例对象

三、js深入概览

1、作用域

变量和函数生效（能被访问）的区域。

函数作用域 函数作用域中的变量只在当前函数内可以访问（局部变量），离开此范围就无法访问了。

function add () {var sum = 1 + 2;console.log(sum);  //正确
}
console.log(sum);  //错误

全局作用域 全局作用域中的变量在代码的任何位置都能访问。

var sum = 0;
function add () {sum = 1 + 2;console.log(sum);  //正确
}
console.log(sum)  //正确

function add () {sum = 1 + 2;  //不加var，全局变量
}
add();
console.log(sum)

2、预编译

函数声明整体提升 无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面。
变量声明提升 无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined。

console.log(a)
var a = 100;

// 上面这段代码相当于
var a;
console.log(a)
a = 100;

3、闭包、立即执行函数、原型、原型链、this、typescript……

扩展：
Typescript（ts）： TypeScript 起源于使用JavaScript开发的大型项目
。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。
是JavaScript的一个超集，而且本质上向js添加了可选的静态类型和基于类的面向对象编程。
TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。

作业

1.将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组

var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0];

2.将’I Love You’转换成’You Love I’

var str='I Love You'

3.封装⼀个输⼊半径求圆的⾯积的函数

蓝旭工作室2022第五次讨论班Javascript基础相关推荐

2021蓝旭工作室暑期第五次培训课-数据库设计文档
数据库设计文档 1. 需求分析设计目标是设计一款用于餐饮外卖的系统. 如今,外卖市场已经成为O2O模式下的热点.本项目设计了一个外卖点餐系统,为餐厅提供资源配置的解决方案,满足O2O理念的要求. ...
在蓝旭工作室学习的总结
在蓝旭工作室学习的总结为什么来蓝旭学习方面待在工作室一个月以来的感受怎么学习的为什么来蓝旭来蓝旭的真是一段因缘际会, 由于去年的时候,有些自身的原因,错过了加入工作室的机会, 然后这个一直 ...
2023蓝旭工作室前端暑期培训（一）
前情回顾博客链接: (1) 进入前端.VScode&插件安装.浏览器 (2) HTML常用标签.CSS基础 (3) CSS进阶 (4) JavaScript基础 (6) BOM 本节内容:H ...
五、前端开发-JavaScript基础
五.前端开发语言体系-JavaScript基础文章目录五.前端开发语言体系-JavaScript基础 JavaScript基础变量.值和类型运算符和表达式语句数组函数和对象严格模式类 ...
蓝旭工作室2023春季培训预习博客（三）
目录前言一. CSS进阶 1. 盒模型 1. border部分 2. padding部分 3. margin部分 4. overflow属性二. 浮动float 三. 定位 1. 静态定位 2. ...
2020年蓝旭工作室暑期前端培训班Day1——HTML5 CSS3
HTML5新特性前言:H5 == HTML5? HTML5是一个标准. H5: 解决方案?看起来炫酷的移动端网页解决方案技术合集?基于html5, css3, js 基于HTML5的交互网页应用? ...
蓝旭工作室2021JavaScript基础
一.JavaScript简介 1.JavaScript到底是什么? JavaScript(缩写:JS)是一门完备的动态编程语言.当应用于 HTML 文档时,可为网站提供动态交互特性. JavaScr ...
蓝旭工作室2020后端第三次培训
JSP以及JAVAweb项目新建 JSP简介 JSP全称为Java Server Pages,其根本是一个简化的Servlet设计,它实现了在Java当中使用HTML标签.JSP是一种动态网页技术标准 ...
蓝旭前端开发：GITtomcat+nginx原理移动端web 开发
蓝旭前端开发:GIT+移动端 web 开发目录一.==GIT== 1.1 ==Git与GitHub== 1.2 ==GitHub注册和Git的下载安装== 二.==Git的使用== 2.1 ==本 ...

蓝旭工作室2022第五次讨论班Javascript基础