《JavaScript基础》图解
2022-04-22 12:28:36 0 举报JavaScript基础知识总结
作者其他创作
大纲/内容
作用：
表单动态校验（密码强度检测案例）
网页特效
服务端开发（Node.js）
桌面程序（Electron）
APP（Cordova）
控制硬件-物联网（Ruff）
游戏开发（Cocos2d-js）
浏览器分为两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML和CSS，俗称内核
JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行
执行过程：读取JS编程语言——翻译器（转化为二进制）——计算机处理运行
JS组成部分
JavaScript＝ECMAScript（JavaScript语法）+API（BOM＋DOM）
DOM：文档对象模型
是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小、颜色、位置等）
BOM：浏览器对象模型
它提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。通过BOM可以操作浏览器窗口，如弹出框、控制浏览器跳转、获取分辨率等
JS的引入
1. 行内式：<input type="button" value="点击“ onclick=”alert(’弹出框信息‘)“>
2. 内嵌式：<scrript>alert(’弹出框信息‘);</scrript>
3. 外部式：<scrript src="../js/index.js">（中间不可写代码）</scrript>
JS输入输出语句
prompt(请输入您的年龄); //弹出输入框
alert('计算的结构是'); //弹出警示框
console.log('我是程序员'); // 控制台输出语句
数据类型
简单数据类型：undefined、null、number、String、Boolean
复杂数据类型：Array、Object、Date
数据类型转换
转字符串
1、toString()：num.toString()
2、String()：String(num)
3、利用字符串拼接：num+''
转数字型（重点）
parseInt(变量)：小数会往小的方向取整
parseFloat(变量)：保留小数点
Number(变量)
运算符 - *：console.log('12' - 0); // 12(number)
转布尔值
Boolean(变量)：代表空、否定的值都会返回false，其余返回true
运算
算数运算
var num1 = 0.1+0.2; // 返回的是0.300000000004
var num2 = 0.07 * 100; // 返回的是7.0000000000001
比较运算
==：判断相等 要求值相等
===：判断全等 要求值、数据类型完全一致
注：=：赋值，非比较
逻辑运算
&&：and和 false&&false; //false
| |：or或 false||true; //true
!：not非 !true; //false
流程控制
顺序结构
分支结构
if(条件表达式){ 表达式1 }else{ 表达式2 }
三元表达式：条件表达式 ? 表达式1 : 表达式2
循环结构
for循环
while循环：while(表达式){ 循环体 }
do..while循环：do{ 循环体 }while(条件表达式)
关键词
continue：用于立即跳出本次循环，继续下一次循环（循环会少一次 ）
break：用于立即跳出整个循环
函数
函数声明的两种方式
function fn() { 函数表达式 }
var fn = function() { 函数表达式 }（匿名函数）
作用域
代码变量在某个范围内起作用和效果，目的是为了提高程序的可靠性，减少命名冲突
全局作用域：在script标签下第一级声明，全局可用
局部作用域：在函数内部下声明，只在函数内部起作用
预解析
JS引擎会把JS里面所有的 var 还有 function 提升到当前作用域的最前面
JS引擎运行分为：预解析——代码执行
预解析分为：变量预解析（变量提升）和函数预解析（函数提升）
变量提升
console.log(num)；var num = 10 变量提升后 var num；console.log(num)；num=10
函数提升
fn()；function fn(){ console.log(10)；} 变量提升后 function fn(){ console.log(10)；} fn()；
对象
对象由 属性 和 方法 组成的
创建对象
var obj = { uname:obj；sayHi: function{ console.log('Hi')；} }
var obj = new Object()；obj.uname = 'OBJ'；obj.sayHi: function{ console.log('Hi')；}
调用
console.log(obj.uname)；obj.sayHi()；
new关键词执行过程
new构造函数可以在内存中创建了一个空对象
this 就会指向刚才创建的空对象
执行构造函数里面的代码，给这个空对象添加属性和方法
返回这个对象（所有构造函数内不用return）
遍历对象
for（var 变量名 in 对象）{ console.log( 变量名 )；console.log( 对象 [ 变量名 ] )；}
内置对象
查找MDN：https://developer.mozilla.org/zh-CN/
查阅该方法功能
查看方法内参数的意义和类型
查看返回值的意义和类型
通过demo测试
Math 数学对象
绝对值：Math.abs(-1)；//1
最大值：Math.max(1, 99, 5)；//99
取整：
向上取整：Math.ceil(1.5)；//2
向下取整：Math.floor(1.5)；//1
四舍五入：Math.round(1.5)；//2
随机数：Math.random( )；//0 <= x < 1
Date 日期对象
声明：var date = new Date( )；//格式化对象
年：var year = date.getFullYear( )；
月：var month = date.getMonth( )+1；
日：var dates = date.getDate( )；
周一至日：var day = date.getDay( )；
时：var h = date.getHours( )；
分：var m = date.getMinutes( )；
秒：var s = date.getSeconds( );
时间戳
指的是现在时间距离1970.1.1总的毫秒数
常用声明：var date = +new Date( )；
其他声明：valueOf( )、getTime( )
倒计时案例
Array 数组对象
创建数组：
var arr = [ ]；//创建一个空数组
var arr = new Array( )；//创建一个空数组
var arr = new Array(2,6)；//[2, 6]
添加、删除数组元素
push( )；可添加一个或多个元素到末尾
pop( )；删除末尾第一个元素
unshift( )；可添加一个或多个元素到开头
shift( )；删除开头第一个元素
获取数组元素索引号
indexOf(数组元素)；重复返回第一个
lastIndexOf(数组元素)；重复返回最后一个
数组分隔符：join(’分隔符‘)
arr.join('-')；返回 A-B-C
arr.join( )；默认逗号隔开
根据位置返回字符：charAt( )
str.charAt(2)；返回下标为2的字符
拼接字符串 concat('字符串1', '字符串2')
str.concat('red')；将arr字符串与red拼接
截取 substr('截取位置', ’截取几个字符‘)
str.substr(2,2)；CD
字符串转数组 split('分隔符')
str.split(', ')；[A, B, C]
其他
检测数据类型
检测复杂数据类型：instanceof
检查简单数据类型：typeof
收藏
收藏
0 条评论
下一页
