文章目录
JavaScript一、JavsScript概念1.JavaScript的开发方向2.JavaScript和CSS、HTML的关系3.JavaScript运行过程4.JavaScript的组成 二、JavaScript的语法1.JS的书写形式1.行内式2.内嵌式3.外部式4.注释5.输入输出1.prompt和alert2.输出: console.log 2.变量的使用1.创建变量2.动态类型1.强类型和弱类型2.动态类型与静态类型 3.基本数据类型1.number数值类型进制表示特殊数字值 2.string字符串类型1.求长度2.字符串拼接 3.boolean类型4.undefined类型5.null空值类型 4.运算符比较运算符 5.语句for三元运算符switchwhilefor 6.数组1.创建数组2.获取数组元素3.新增数组元素1.通过修改length新增2.通过下标新增3.用push进行新增 4.删除数组中的元素 7.函数1.函数类型2.参数个数3.表达式4.作用域1.全局作用域2.局部作用域 5.作用域链 8.对象1.使用字面量创建对象使用对象的属性和方法 2.使用new Object创建对象3.使用构造函数创建对象4.在JS中的class关键字继承 5.Java对象和JavaScript对象的区别
JavaScript
一、JavsScript概念
JavaScript简称js是一个脚本语言，通过解释器运行主要在客户端（浏览器）上运行，现在也可以基于node.js在服务器端运行最早只是完成表单验证（验证数据的合法性）1.JavaScript的开发方向
1.网页开发（复杂的特效和用户交互）
2.网页游戏开发
3.服务器开发（node.js）
4.桌面程序开发（Electron,VSCode）
5.手机APP开发
JavaScript之父：布兰登.艾奇
Javascript语言实际上是两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程
（1）借鉴C语言的基本语法；
（2）借鉴Java语言的数据类型和内存管理；
（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
（4）借鉴Self语言，使用基于原型（prototype）的继承机制
the part that is good is not original, and the part that is original is not good.2.JavaScript和CSS、HTML的关系
HTML:网页的结构（骨架）
CSS:网页的表现（皮肤）
JavaScript:网页的行为（灵魂）
3.JavaScript运行过程
通常运行在浏览器上浏览器分为渲染引擎+JS引擎
渲染引擎：内核（解析html+CSS）
JS引擎：JS解释器（例如chrome内置的V8）
JS引擎逐行读取JS代码的内容，然后解析成二进制指令，再进行执行
1.编写的JS代码保存在本地的硬盘（外存）上
2.双击.html文件后，浏览器读取文件，把文件的内容加载到内存中
3.浏览器会解析编写的代码，翻译成二进制指令（解释器）
4.cpu加载执行二进制指令
4.JavaScript的组成
1.ES (ECMAScript):JS的语法
2.DOM:页面文档对象模型，对页面当中的元素进行操作
3.BOM:浏览器对象模型，对浏览器窗口进行操作
要完成更复杂的交互，在浏览器端运行JS，除了语法，还需要DOM和BOM的API
在服务器端，则需要node.js的API
二、JavaScript的语法
1.JS的书写形式
1.行内式
直接嵌入到html内部 <input type="button" value="这是一个按钮" onclick="alert('hello')"> <!-- 点击按钮->触发点击事件->执行代码->出现弹窗 -->js中字符串常量可以用单引号，也可以用双引号
通常在html中用双引号，js中用单引号
2.内嵌式
写到script标签中<script> alert('hello world')</script>3.外部式
写到单独的.js文件中alert('我在学习js的外部引入')<script src="./jscode02.js"></script>4.注释
单行注释：//多行注释：/* */5.输入输出
1.prompt和alert
prompt('请输入你的学号：');//弹出一个输入框alert('我在学习js的外部引入');//弹出一个警示对话框, 输出结果var a = prompt('请输入你的学号：');alert(a);2.输出: console.log
console.log('这是一条日日志志')//使用控制台对象的log方法2.变量的使用
1.创建变量
var name = 'xiaoming'; console.log(name); let age = 18; console.log(age);在js中定义一个变量，不需要对它的类型进行说明
let避免了var定义变量的一些缺陷
推荐适应使用let来定义变量，这样变量的生命周期，作用域基本和Java一样
在js中，对于数字只有一种类型：数值类型（可以是小数、整数等等）2.动态类型
在js中，所有的变量都是动态类型变量，且都属于弱类型1.强类型和弱类型
强类型变量：不同类型变量进行赋值时，需要进行强制类型转换
弱类型变量：在不同类型变量赋值时，可以直接赋值
a = 1; b = 'b'; b = a; console.log(b);//12.动态类型与静态类型
动态类型：代码在执行中，变量的类型可以随时发生变化
静态类型：变量的类型在定义时是什么类型，在运行时就是什么类型
C, C++, Java, Go 等语言是静态类型语言
一个变量在创建的时候类型就确定了, 不能在运行时发生改变
a = 1; console.log(typeof(a));//number b = 'b'; a = b; console.log(typeof(a));//string3.基本数据类型
JS中内置的几种类型：
number类型（不区分整数小数）、boolean类型（true,false）、string类型（字符串类型）、undefined类型（只有唯一的值undefined,表示未定义的值）、null类型（只有唯一的值null,表示空值）1.number数值类型
不区分整数和浮点数 let a = 10; console.log(typeof (a));//number a = a / 3; console.log(a);//3.3333333333333335 console.log(typeof(a));//number进制表示
var a = 07; // 八进制整数, 以 0 开头var b = 0xa; // 十六进制整数, 以 0x 开头var c = 0b10; //二进制整数，以0b开头特殊数字值
console.log(10 / 0);//Infinity console.log(10 / -0);//-Infinity console.log(-10 / 0);//-Infinity console.log('hello'-10);//NaN console.log(isNaN('hello'-10));//true //isNaN()判断是否是一个非数字 console.log('hello'+10);//hello10 进行了字符串拼接 console.log(isNaN('hello'+10));//true console.log(isNaN(10));//false2.string字符串类型
字面值需要引起，单双都可 b = 'JavaScript+"HTML"'//嵌套，单双引号组合 c = "JavaScript+'CSS'" // d = "JavaScript+“HTML+CSS”" e = "JavaScript+\“HTML+CSS\”"//转义字符来转义“ ”1.求长度
let a = "hello world"alert(a.length);//112.字符串拼接
let a = "hello world"alert(a.length);//11console.log(a+"!!!!!"+a.length)//hello world!!!!!11 console.log(10+10);//20 console.log('10'+10);//1010 console.log(10+'10');//1010 console.log('10'+'10');//10103.boolean类型
表示真假boolean参与运算时，true当做1，false当做0 ，来进行运算 let bool = true; console.log(typeof (bool));//boolean bool += 1; console.log(bool);//2 console.log(typeof (bool));//number4.undefined类型
一个变量如果没有被初始化过，结果为undefind let un ; console.log(un);//undefined console.log(un+'2222');//undefined2222 console.log(un+3333);//NaN console.log(un+true);//NaN和字符串相加，直接进行拼贴
和数字相加，结果为NaN（非数字）
5.null空值类型
let b = null; console.log(b+2002);//2002 console.log(b+'2002');//null2002 console.log(b+true);//14.运算符
跟Java类似不同点：
比较运算符
==：比较的是变量的内容（会进行隐式类型转换）
===：比较的是内容+数据的类型
let c = 10; let d = '10'; console.log(c==d);//true console.log(c===d);//false快捷键：shift+ctrl+R == 强制刷新
5.语句
for
let num = prompt('请输入一个数字'); if(num%2==0){ alert('这个数字是偶数'); }else if(num%2==1){ alert('这个数字是奇数'); }else{ alert('非法输入'); }三元运算符
alert("1=='1':" + (1 == '1' ? true : false));//true alert("1==='1':" + (1 === '1' ? true : false));//falseswitch
let day = prompt('请输入今天是星期几：'); console.log(day); console.log(typeof (day));//string day = parseInt(day); console.log(typeof (day));//number switch (day) { case 1: alert('今天是星期一'); break; case 2: alert('今天是星期二'); break; case 3: alert('今天是星期三'); break; case 4: alert('今天是星期四'); break; case 5: alert('今天是星期五'); break; case 6: alert('今天是星期六'); break; case 7: alert('今天是星期天'); break; default: alert('非法输入'); }while
let num = 5; let sum = 1; while(num>0){ sum *=num; num--; } console.log(sum); var num = 100; var max = 200; while(num<=max){ if(num%3==0){ console.log(num); } num++; }for
for(var num =1;num<=10;num++){ console.log(num); } let result = 1; for(let i = 1;i<=5;i++){ result *= i; } console.log(result);6.数组
1.创建数组
1.使用new关键字创建
2.使用字面量创建
//定义一个数组 let arr1 = new Array();//A要大写 let arr2 = []; let arr3 = [1, 2, 'string', 7, true, 9]; console.log(typeof(arr3));//object2.获取数组元素
let arr3 = [1, 2, 'string', 7, true, 9]; console.log(typeof(arr3));//object console.log(arr3); console.log(arr3[0]);//1 console.log(arr3[2]);//string console.log(arr3[6]);//undefined arr3 = '字符串覆盖数组' console.log(arr3);//字符串覆盖数组3.新增数组元素
1.通过修改length新增
let array = [2,4,6,8,10]; array.length = 7; console.log(array);//(7) [2, 4, 6, 8, 10, empty × 2] console.log(array[5],array[6]);//undefined undefined array[6]= 14; console.log(array[5],array[6]);//undefined 14 console.log(array);//(7) [2, 4, 6, 8, 10, empty, 14] array[5] = 12; console.log(array[5],array[6]);//12 142.通过下标新增
let arr = []; console.log(arr); arr[3] = 9; console.log(arr);//[empty × 3, 9]3.用push进行新增
let array = new Array(); console.log(array); for (i = 0; i < 10; i++) { array[i] = i; } let newArray = new Array(); for (i = 0; i < array.length; i++) { newArray.push(array[i]); } console.log(newArray);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]4.删除数组中的元素
使用 splice 方法删除元素两个参数：从几号下标开始删除，要删除几个元素 console.log(newArray);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] newArray.splice(3,2);//删除了3和4 console.log(newArray);//(8) [0, 1, 2, 5, 6, 7, 8, 9]7.函数
1.函数类型
// 创建函数/函数声明/函数定义function 函数名(形参列表) { 函数体 return 返回值;}// 函数调用函数名(实参列表) // 不考虑返回值返回值 = 函数名(实参列表) // 考虑返回值 //没有参数、没有返回值的函数 function hello() { console.log('hello'); } hello(); //有参数列表和返回值的函数 function helloXXX(num, string) { console.log(num + "HELLO" + string) return 1; } let a = helloXXX(1,'HTML');//1HELLOHTML console.log(a);//1 console.log(typeof(a));//number helloXXX(2,'CSS');//2HELLOCSS helloXXX(3,'JavaScript');//3HELLOJavaScript 2.参数个数
实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配
helloXXX();//undefinedHELLOundefined helloXXX('html'); //htmlHELLOundefined3.表达式
let result = function () { //计算1-100之间的和 ret = 0; for (i = 0; i <= 100; i++) { ret += i; } return ret; } console.log(result());//5050 let b = function () { console.log(arguments)//打印参数列表 } b();//Arguments(0) b(1,2,3);//Arguments(3) b(1,2,3,4,5,6);//Arguments(6)4.作用域
某个标识符名字在代码中的有效范围1.全局作用域
在整个script标签中、或者单独的.js文件中生效
let num = 10;//全局变量 function text01(){ let num = 100;//局部变量，只在{}生效 console.log(num); } console.log(num);//10 function text02(){ let num = 200; console.log(num); } console.log(num);//10 text01();//100 text02();//200 console.log(num);//10 for(i = 1;i <= 100;i++){ } console.log(i);//1012.局部作用域
在函数内部生效 ：{ }内
5.作用域链
函数可以定义在函数内部内层函数可以访问外层函数的局部变量内层函数通过链式查找的方式，从内而外依次进行查找，从而访问到外部函数的变量
let num2 = 20; function test03() { let num2 = 100; console.log(num2);//100 function test04() { let num2 = 200; console.log(num2);//200 } test04();//在test03中调用test04 } test03();//调用test03 let num2 = 20; function test03() { let num2 = 100; console.log(num2);//100 function test04() { //let num2 = 200; console.log(num2);//100 } test04();//在test03中调用test04 } test03();//调用test03 let num2 = 20; function test03() { // let num2 = 100; console.log(num2);//20 function test04() { //let num2 = 200; console.log(num2);//20 } test04();//在test03中调用test04 } test03();//调用test038.对象
对象是一个具体的事物
在JS中，字符串、数值、数组、函数都是对象每个对象包含若干属性（特征）和方法（行为）1.使用字面量创建对象
使用 { } 创建对象 let a = {};//创建了一个空对象 let student = { //属性 name:'xiaoming', height:180, weight:140, //方法 sayHello:function(){ console.log('hello'); } } student.age = 20; 使用对象的属性和方法
console.log(student.name);//xiaoming console.log(student.weight);//140 console.log(student['weight']);//140 student.sayHello(); console.log(student.age);使用 [ ] 访问属性, 此时属性需要加上引号
调用方法, 加上 ()
2.使用new Object创建对象
let person = new Object(); //let person = {}; person.name = '小红'; person.age = 18; person.height = 160; person['weight'] = 100; person.sayHello = function(){ console.log('SAY HELLO'); } console.log(person.name);//小红 console.log(person.age);//18 console.log(person.height);//160 console.log(person['weight']);//100 person.sayHello();//SAY HELLO3.使用构造函数创建对象
通过构造器创建多个对象构造函数的函数名首字母一般大写构造函数不需要 return，创建对象时用new //构造函数 function Cat(name, age, color) { //属性 this.name = name; this.age = age; this.color = color; //方法 this.Say = function(){ console.log(name+':Say"喵喵喵"'); } } //创建对象 let cat1 = new Cat('cat1',1,'white'); let cat2 = new Cat('cat2',3,'black'); console.log(cat1);//{name: 'cat1', age: 1, color: 'white', Say: ƒ} console.log(cat2);//{name: 'cat2', age: 3, color: 'black', Say: ƒ} cat1.Say();//cat1:Say"喵喵喵" cat2.Say();//cat2:Say"喵喵喵"4.在JS中的class关键字
在ES6中才引入了class关键字 class People{ constructor(name,height,weight,age){ this.name = name; this.height = height; this.weight = weight; this.age = age; } //在class中，函数不用加function关键字 Say(){ console.log(this.name+"正在说:hello"); } static other = 'other'; //类的成员变量,对象的属性不包含类的属性，需要通过类名调用 static Sum(){ //类的成员方法 return 101; } } let xiaoming = new People('小明',181,141,20); console.log(xiaoming);//People {name: '小明', height: 181, weight: 141, age: 20} xiaoming.Say();//小明正在说:hello alert(People.other); alert(People.Sum());继承
class Student extends People{ //继承 constructor(name,height,weight,age,number){ super(name,height,weight,age); this.number = number; } Say(){//重写方法 alert(this.name); } } let student1 = new Student('小刚',170,120,17,300021); console.log(student1);//Student {name: '小刚', height: 170, weight: 120, age: 17, number: 30 student1.Say();5.Java对象和JavaScript对象的区别
1.JavaScript中没有类的概念，在ES6中才引入了class关键字
2.JS对象不区分属性和方法，函数是一等公民，可以通过赋值变量调用
3.JS对象没有public/private等访问限定词，对象中的属性可以被外界随意访问
4.JS对象没有继承机制，ES6之后引入class后实现
JavaScript 中使用 “原型” 机制实现类似的效果
创建一个 cat 对象和 dog 对象,
让这两个对象都能使用 animal 对象中的 eat 方法. 通过 proto 属性来建立这种关联关系
5.JS中没有多态
点击移步博客主页，欢迎光临~
