Javascript
历史
1995年 5月 网景公司 布兰登·艾奇 用10天 Macha
9月 改名 LiveScript
12月 javascript
java 和 javascript 没有关系 雷锋和雷峰塔
解决表单提交验证
ie: JScript
1997年, 欧洲计算机制造商协会(ECMA) 以JavaScript1.1为蓝本 定义了语法规范 ECMAScript
javascript和ECMAScript的关系
前者(javascript)是后者的体现
后者(ECMAScript)是前者的语法标准
js的组成部分:
ECMAScript 语法标准
DOM: Document Object Modal 文档对象模型
BOM: Browser Object Modal 浏览器对象模型
概念
js: 是基于对象和事件驱动的解释性脚本语言;
特点:
基于对象: 一切皆对象, 可以使用自己创建出来对象
事件驱动: 以事件作为驱动
解释性: 相对编译性来说, 不需要打包编译，直接在浏览器中就可以执行
跨平台: 只要浏览器支持js, 就能执行js, 跟电脑系统没有关系
相对安全: 同源策略限制
引入方式
行内
行内: 基于事件引入 写在起始标签上的 οnclick="alert('Hello World;')"
<div οnclick="alert('Hello World;')">这是一个div</div>
内嵌
内嵌: script双标签 可以写在页面的任何位置 body的结束标签之前 学习过程
<script> alert(1); </script>
外链
外链: script双标签 src引入js的文件 body的结束标签之前 工作
js文件: 创建后缀为 .js
注意: 外链js文件的script中不能写内嵌代码
<script src="./03.js"> // 不会执行 alert(6); </script> <!-- 再写一个script 写内嵌 --> <script> alert(7); </script>
注释
块注释: /* 注释 */ ctrl+shift+/
行注释: // 注释 ctrl+/
键盘快捷方式:
首选项 ---> 键盘快捷方式 ---> 搜索: comment ---> 修改
调试
调试: 程序员用来验证代码是否正确
调试方式: 输出 断点
输出调试:
-
alert: 警告框
alert('内容')
数字和变量可以不加引号 其他的都要加
-
prompt: 带有输入框的对话框 可以与用户做交互
prompt('提示内容', '默认值'); 默认值: 可写可不写
具有返回值, 可以接受
确定: 输入框中的内容 取消: null
-
输出在页面: document.write(...data);
...data: 可以一次性写多个数据, 用,分隔
只适合在页面加载过程中使用 如果在页面加载完成后使用 全页面内容都会被覆盖(函数)
可以识别标签 不覆盖自己添加的内容
-
输出在控制台: console.log(...data);
...data: 可以一次性写多个数据, 用,分隔
检查-->Console
// alert(1);
// alert(prompt('请输入你的姓名'));
document.write('<a>这是一个a标签</a>', '<i>这是一个i标签</i>');
document.write('<b>BBBBBB</b>');
console.log(123, 345, 567);
断点调试
断点调试: 浏览器右键 --> source ---> 打开要调试的文件 ---> 行数前点一下 (蓝色箭头、红色圆点) ---> 刷新 --> 点击三角箭头
变量
变量: 用来存储数据的容器;
声明变量: var声明
声明方式
-
先声明 后赋值
var 变量名;
变量名 = 值;
var a; a = 10; console.log(a);
-
声明的同时赋值:
var 变量名 = 值;
var b = 20; console.log(b);
-
多个声明:
var 变量名1 = 值1, 变量名2 = 值2, ..., 变量名n = 值n;
js中 , 分隔 ;一句代码的结束
var c = 30, d = 40; console.log(c, d); // 30 40
-
连等声明
var 变量名1 = 变量名2 = 值;
var m = n = 50; console.log(m, n);
命名规范
\1. 以数字、字母、_、$组成, 数字不开头
\2. 不能是关键字和保留字 var let const for break continue top(浏览器中存储window对象)
\3. 不能重复, 如果重复后面的就会覆盖前面的
\4. 遵循驼峰命名法 多个单词组成一个变量的时候 第二个往后的单词的首字母需要大写
\5. 具有语义化 userName user login password loginPass
/* 5. 验证变量名: */ var userName = '迪丽热巴'; console.log(userName); var user1 = '杨洋'; console.log(user1); var _a = '下划线'; console.log(_a); var $ = 'js'; console.log($); // var 1a = 'a1'; 报错 // 用var声明一个变量名为var的变量 // var var = 'var'; 报错 var let = '124'; // 一般不这么写 console.log(let); var a = 20; console.log(a); var a = 30; console.log(a); // 30
特殊声明
\1. 只声明 不赋值 变量值为undefined
\2. 不用var 全局变量 不遵循垃圾回收机制
\3. 不用var 也不赋值 报错: is not defined
/* 1. 只声明 不赋值 变量值为undefined */ var a; console.log(a); /* 2. 不用var 全局变量 不遵循垃圾回收机制 */ b = 30; console.log(b); /* 3. 不用var 也不赋值 报错: is not defined */ console.log(c);
数据类型
为什么要进行数据类型分类:
\1. 不同的数据类型在内存中存储占用的内存不同
\2. 不同数据类型做的操作不同的 数值->计算 布尔->判断
数据类型:
五大基础数据类型 复杂(复合、引用)数据类型
五大基础:
number
string
boolean
null
undefined
复杂:
object
array
function
判断数据类型:
typeof 数据
typeof(数据)
var a = 30; console.log(a); console.log(typeof a); // number var b = '迪丽热巴'; console.log(b); console.log(typeof(b)); // string
number
分类
\1. 整型 整数 0 -1 1
\2. 浮点数 小数点后至少一位非0数字
\3. NaN: Not a Number 不是一个数字
\4. 进制数:
八进制: 以0为开头 没有超过8的数字
十六进制: 以0x为开头 0-9a-f表示0-15
\5. 特殊值:
Infinity: 无穷大
-Infinity: 无穷小
e: 10的幂次
var a = 1.0; console.log(a); var b = 1.000001; console.log(b); var c = 1.1234567891234567891; console.log(c); console.log(typeof c); // number var n = NaN; console.log(n); console.log(typeof n); // number var m = 10 - 'a'; console.log(m); // 八进制 var num = 070; console.log(num); // 十六进制 var num1 = 0xa; console.log(num1); // 无穷大 var num2 = 1 / 0; console.log(num2); // e var num3 = 2e2; // 2 * 10的2次方 = 200 console.log(num3);
NaN出现
\1. 自己声明
\2. 计算错误
NaN特性
\1. NaN属于数值类型 typeof后返回number
\2. NaN和任何数值都不相等 包括自身
\3. NaN与任何数值计算结果都是NaN
var m = 10 - 'a'; console.log(m); console.log(NaN == NaN); // false console.log(1 - NaN); // NaN
注意
注意: 当小数做计算, 由于计算机存储精度的问题, 有偏差
console.log(0.2 + 0.3); console.log(0.1 + 0.2); // 0.30000000000000004
string
字符串: 用成对的引号包裹的内容
var str = 'abcd'; var str1 = '1234'; console.log(typeof str, typeof str1);
当字符足够长的时候, 需要换行显示, 可以使用\转义换行为字符串
var str = '正义虽然会迟到，但永远不会缺席.由孙红雷、张艺兴、刘奕君主演的《扫黑风暴》已经圆满收官，该作品根据真实案件改编而成，一经上线立马成为年度最热门的剧集。\ 据统计，该剧首播日在6小时内就实现了播放量破亿，收视率全国同时段第一的好成绩。\ 目前累计播放量44亿，弹幕互动量突破1600万、豆瓣高达8.0分，自开播以来20多天稳居收视率第一的宝座，这种成绩可以说创造了一个收视奇迹。'; console.log(str);
length: 字符串.length 可以得到当前字符串中字符的个数
console.log(str.length);
下标: 从左往后, 从0开始的数字
指定下标对应的字符: 字符串.charAt(下标)
指定下标对应的字符: 字符串[下标] ie8+
// 指定下标对应的字符: 字符串.charAt(下标) console.log(str.charAt(49)); // 指定下标对应的字符: 字符串[下标] ie8+ console.log(str[49]);
变量和字符串: 变量拼接: 1. 删除 2. 加 加一组引号(与最外层引号一致) 和2个+ 3. 在+中间 拼接变量名
var name = 'javascript'; var age = 26; var str = '' + name + '出现了' + age + '年'; console.log(str);
boolean
boolean: 布尔, 只有 true 和 false
true: 为真
false: 为假
判断条件 或者 判断条件的结果
var bool = true;
console.log(bool);
console.log(typeof bool); // boolean
// 判断条件
if(true){
console.log(1);
}
// 判断条件
console.log(1 == 1); // true
console.log(1 == 2); // false
null
null: 只有一个值 就是本身 null js中唯一的真正的空
// 一般用作占位 var n = null; console.log(n); console.log(typeof n); // object
undefined
undefined: 未定义 当声明未赋值
var a; console.log(a); // undefined console.log(typeof a); // undefined
注意
js中规定 null和undefined是相等的
console.log(null == undefined); // true
null与undefined的区别
null: 真正的空
undefined: 未定义 当声明未赋值
强制转换
为什么要强制转换
所有通过输入框得到的数据 都是字符串
字符串加法 实现的是拼接
强制转换-number
Number(数据);
可以null和布尔值以及字符串中的空字符、空格字符、纯数字字符, 其他的都会被转成NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number('')); // ''中间没有任何字符 0
console.log(Number(' ')); // 0
console.log(Number('9087')); // 9087
console.log(Number('9087a')); // NaN
console.log(Number('a9087')); // NaN
parseInt
parseInt: 从左往右依次转换每一个字符, 遇到不能转换的或者到结尾就会结束转换, 保留整数
当第一个字符就不能转换的时候 返回NaN
console.log(parseInt('200px')); // 200
console.log(parseInt('155.8px')); // 155
parseFloat
parseFloat: 从左往右依次转换每一个字符, 遇到不能转换的或者到结尾就会结束转换, 保留小数
当第一个字符就不能转换的时候 返回NaN
console.log(parseFloat('155.8px')); // 155.8
强制转换-string
toString()
数据.toString()
将其他数据类型，转成字符串 null和undefined不能转换
在js中 .相当于白勺的
var num = 10; console.log(num); console.log(num.toString()); // 了解: 数值类型的时候: 小括号写进制 console.log(num.toString(8));
String
String(数据);
可以转换一切数据类型
console.log(String(10)); console.log(String(null)); console.log(String(undefined));
区别
toString 和 String区别
\1. toString: 对象的方法 可以自己修改 不能转换null和undefined
\2. String: 强制转换的方法 能转换null和undefined
强制转换-boolean
了解js的真和假:
假: false 0 NaN 空字符 null undefined
Boolean(数据): true false
console.log(false);
console.log(Boolean(1));
console.log(Boolean(-1));
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean('')); // false
console.log(Boolean(' ')); // true
console.log(Boolean('a')); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined));// false
// 对象: {} 空对象
// 数组: [] 空数组
var obj = {};
console.log(obj);
console.log([]);
隐式转换方法
isNaN
isNaN(数据): 判断数据 是不是 不是一个数字
true: 不是一个数字
false: 是一个数字
隐式调用 Number 方法 如果Number转出来的不是NaN 返回false 是NaN 返回true
console.log(isNaN(true)); // Number(true)-->1 false
console.log(isNaN('true')); // Number('true')-->NaN true
console.log(isNaN(undefined)); // Number(undefined)-->NaN true
console.log(isNaN(parseInt('22.5px'))); // parseInt('22.5px')-->22 Number(22)-->22 false
toFixed
toFixed: 保留几位小数
将数值保留n位小数转化成字符串
数值.toFixed(数字);
数字: 保留的小数的位数
// var num = 2.3333333; // var num = 2.500001; var num = 2.499991; console.log(num.toFixed(2)); console.log(typeof num.toFixed(2));
运算符
概念
运算符: 用来实现程序执行计算的符号 一般操作两个操作数及以上的符号
例: 1 + 2 +: 运算符 1、2: 操作数
表达式
表达式: 由2个或以上的操作数和运算符组成的式子
1 + 2
var a = 10;
分类:
运算符:
算术运算符: + - * / %(模) ++(自加) --(自减)
赋值运算符: = += -= *= /= %=
比较运算符: > >= < <= == === != !==
逻辑运算符: &&(与) ||(或) !(取反)
三目(元)运算符: 条件 ? 条件为真执行的代码 : 条件为假执行的代码;
表达式: 由运算符做决定的
算术表达式
赋值表达式
比较表达式
逻辑表达式
三目表达式
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
