JavaScript入门0309
JavaScript
JavaScript的历史
1994年 , 网景 公司推出了第一款 真正意义上的 浏览器
1995年 , sun 公司推出了Java
1995年 , 网景公司 , sun公司 和网景公司的员工 布兰登 · 艾克 一起开发了 JavaScript
JavaScript是 : 轻量级 弱类型 脚本语言
JavaScript 的作用 : 实现页面的交互 : 用户操作的交互 , 数据的交互
JavaScript 的组成部分
- ECMAScript
JavaScript的基本语法规范 - DOM（Document Object Model）
文档对象模型 – 操作HTML,css - BOM （Browser Object Model）
浏览器对象模型 – 操作 浏览器
JavaScript的语法
<style>
.p1{
color:blue;
}
</style>
<link rel="stylesheet" href="./01_demo.css">
<!-- -->
<script src=""></script>
<script>
</script>
<!--
css的行内式,在标签内部直接定义css代码
JavaScript的行内式,也是在标签内部直接定义JavaScript代码
-->
<div style="color: red;" onclick="alert('我是div标签的弹窗')">我是div标签</div>
<!--
css的内部式,在head标签中,定义style标签,然后通过选择器来定义标签样式
JavaScript的内部式,在 head标签的最后,或者body标签的最后,来定义一个script标签,在标签内部来定义JavaScript代码
-->
<p class="p1" id="p1">我是p标签</p>
<!-- JavaScript的外部式,是通过一个带有 src 属性的script标签,来导入外部的js文件 -->
<script src="./02_demo.js"></script>
<script>
// 给p标签,添加JavaScript程序,要添加时,必须页面中已经有p标签才行
p1.onclick = function(){
window.alert('我是p标签,弹出的内容')
}
</script>
<!--
总结:
JavaScript的语法与css语法类似,都分为3种
1, 行内式
在 标签中 直接定义 JavaScript的 代码内容
这种语法不推荐使用
2, 内部式
在script标签中,直接定义JavaScript代码
3, 外部式
在 外部 js 文件中 (也就是扩展名是 js的文件)
直接定义 JavaScript代码
通过一个 带有 src 属性的 script标签,来导入
一些解释和说明:
1, 行内式,不推荐使用的
书写不方便,而且不利于重复使用
一般做调试使用
2, 内部式和外部式,都是通过script标签来定义的
script标签,理论上,可以写在任意位置,但是一般放在 body内部的最下方
也就是所有的html标签的内容的最后
因为牵扯到 代码的执行顺序
3, 定义了src的script,其标签内容中,定义的JavaScript程序,就不会执行了
给一个script标签,添加src属性,就变成导入外部式的script,
script标签内部的JavaScript代码就不会执行
只会执行外部js文件中的内容
-->
超链接
超链接是一个特殊的标签,特殊在如果要执行JavaScript程序
超链接标签,href的属性值,必须定义为 JavaScript:; 才会执行
定义超链接的跳转,应该是在href属性中,来定义跳转页面的url地址
现在,在JavaScript中,要定义 href 属性 为 JavaScript:;
然后通过JavaScript的语法形式来定义,跳转页面
如果是在href中,定义跳转地址,那么很多JavaScript程序就无法执行了
通过 JavaScript来定义跳转, 可以实现JavaScript的一些功能
<!-- 行内样式 -->
<!-- 给标签添加id,是通过id属性值来操作标签 -->
<a href="JavaScript:;" id="a1">百度</a>
<!-- 内部式的语法形式 -->
<script>
a1.onclick = function(){
// 之后要讲的超链接的跳转方式
// 通过JavaScript来控制跳转地址等
// 现在不用管,后面会详细讲
var a = 3;
if(a == 1){
window.location.href = 'https://www.baidu.com';
}else if(a == 2){
window.location.href = 'https://www.sohu.com';
}else if(a == 3){
window.location.href = 'https://www.qq.com';
}
}
</script>
注释
在JavaScript中,注释分为两种
单行注释 和 多行注释
// 两个斜杠叫单行注释
在单行注释中,换行,就结束注释效果
/* 多行注释
多行注释内,可以换行,会继续执行注释效果*/
快捷键还是 ctrl + /
变量的定义
官方定义: 存储在内存之中的,带有名称的,数据信息,其中存储的数据,在执行过程中,是可以改变的
实际上：就是容器 , 存储数据的容器。
所有的计算机程序,数据都会存储在变量中,通过操作变量,来操作数据
定义变量的语法形式
var name = “jack”;
var ——声明变量的关键字；
name——定义的变量名；
等于号（=）——JS里面的一个赋值符号（把右边的给左边）；
“jack”——给这个变量赋的一个值。
变量名称的命名规范
(1),规则 必须遵守的
变量名称的内容,只能是数字,字母(大小写都可以),下划线 _ ,美元符号 $
不能以数字开头 一般是以字母或者下划线开头
严格区分大小写
不要使用保留词和关键词
(2),规范 建议遵守的 — 程序员的潜规则
不要使用中文
见名知意 – 看见变量名称,就知道存储的是什么数据
驼峰命名法 – 多个单词组成的变量名称,每个单词的首字符大写
UserName UserPwd
小驼峰 – 第二个单词开始,首字符大写
userName userPwd
// 英文太差的,查有道词典
// 再不行,偶尔可以使用拼音
// 但是绝对不能使用 拼音缩写
var a1 = 100;
// 不能以数字开头
// var 1a = 100; 会报错
// 严格区分名称中的大小英文字母
var A1 = 200; // 和 a1 小写的a1 是两个变量
// 不要使用保留词和关键词
// 例如,不能定义变量名称 叫 var
// var var = 300;
JS变量的关键字
| 关键字 | |||
|---|---|---|---|
| break | do | instanceof | typeof |
| case | else | new | var |
| catch | finally | return | void |
| continue | for | switch | while |
| debugger* | function | this | with |
| default | if | throw | delete |
| in | try | let* | yield* |
JS变量的保留字
| 保留字 | |||
|---|---|---|---|
| abstract | enum | int | short |
| boolean | export | long | super |
| byte | extends | long | super |
| char | final | native | synchronized(同步) |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implenments | protected | volatile |
| double | import | public |
| 尽量不要使用 | |||
|---|---|---|---|
| arguments | Error | Math | String |
| Array | eval | NAN | super |
| Boolean | EvalError | Number | synchronized |
| Date | Function | Object | throws |
| decodeURI | Infinity | parseFloat | transient |
| decodeURIComponent | isFinite | pareInt | volatile |
| encodeURI | isNaN | RangeError | regExp |
| encodeURIComponent | JSON |
注：
- 只要在JS中已有功能的单词都不要使用在单词前加前缀。
- 变量的声明语法，可以描述成：我要将“等号”右边的内容给到“等号”左边的变量名。
- 不适用var也可以声明变量，但是不推荐使用
- 可以只声明，暂时不赋值
- 可以同时声明多个变量，但不推荐使用。
JavaScript数据的分类
JavaScript中,对于变量可以存储的数据,有分类
基本数据类型 / 标准数据类型
布尔类型(Boolean) :false.true
数值类型 (Number):0-9,NaN,…
字符串类型 (String):所有使用引号包裹的数据。
Undefined: undefined , 表示没有值或未赋值。
Null:null,表示为空，是一种状态。
引用数据类型 / 复杂数据类型 / 地址数据类型
数组（Array） , 对象(Object) , 函数(Function)
数据类型之布尔类型
- 在HTML中,有布尔属性
属性值就是属性本身
<input type="checkbox" checked>
html5中,布尔属性,不推荐写属性值
2. 在计算机语言中,布尔值,表示 真 / 假 这样的两个数值
表示 真 / 正确 的数值是 true
表示 假 / 错误 的数值是 false
布尔值,往往是 比较 或者 判断的结果
3. 在 JavaScript中,表示布尔类型的英文 是 Boolean / bool
var a = 100 ;
控制台 console 中 查看/输出 a变量中存储的数值 --> 100
console.log(a);
4. = 赋值符号, 是将右侧的内容,赋值给左侧变量存储
右侧的内容 是 4>3 的一个比较判断 , 判断的结果 是 真 / 正确
在JavaScript中正确的结果,使用 true 来表示
变量b 中存储的就是 true
var b = 4 > 3 ;
console.log(b);
在变量c中 存储的是 4<3 的结果,是 假 / 错误
在JavaScript中错误的结果,使用false 来表示
var c = 4 < 3 ;
console.log©;
可以对变量直接进行赋值,赋值的内容是 true 或者 false
但是要注意,这里的true和fasle必须小写
如果大写就会报错,因为就不是布尔值了
直接赋值布尔值
var d = true;
var e = false;
console.log(d,e);
5. true , false 作为布尔值,可以直接使用
console.log(true , false);
布尔类型 / 布尔值
表示比较判断的结果
true表示真/正确,false表示假/错误
在使用时,一定要小写
数据类型之字符串类型
字符串类型：
所谓的字符串类型,就是由字符,数字,符号等,组成的一串数据类型
JavaScript中 使用 String / str 表示字符串类型
// 字符串类型 的数据,必须使用 单引号 或者 双引号 来已经包裹
// 在JavaScript中,单引号,双引号,没有区别,用那个都行
// 但是必须成对使用
// 必须是英文格式的符号
// var a = 北京 ; 语法错误,会报错
var a = "北京" ;
console.log(a);
特殊情况1: 如果一个数字,也被 引号包裹,那么这个数字,也是字符串类型
var b = 123; // 变量b中存储的是 数值 123
var c = “123”; // 变量c中存储的是 字符串 123
console.log(b,c);
特殊情况2: 引号的嵌套 : 双引号中只能嵌套,单引号,不能嵌套双引号
// 单引号中只能嵌套,双引号,不能嵌套单引号
// 如果是多层嵌套,我们之后会介绍模板字符串
特殊情况3: 字符串的拼接
// 将两个字符串,拼接为一个字符串,称为字符串的拼接
// 在JavaScript中,字符串的拼接,使用 + 加号来表示
// 将两个字符串的内容,拼接为一个字符串,赋值给变量存储
// 可以多个字符串,多次拼接
var str3 = str1 + str2 + ‘
’ + str1 + str2 ;
console.log(str3);
// 在页面中输出要执行换行效果,拼接上 换行标签即可
// 换行标签页必须是字符串形式
// console.log() 控制台输出,不支持 标签效果
document.write( str3 );
数据类型之数值类型整数
数值类型
JavaScript中,数值类型包括:
整数 , 小数 , NaN 3种数值形式
整数: integer / int
在计算机程序中,常用的整数类型有
-
二进制 : 0 , 1
-
八进制 : 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7
-
十进制 : 0 - 9
-
十六进制 : 0 - 9 a - f
// 关于进制,我们了解即可,不用学转化计算方式 // 如果非要计算,可以使用计算器 // 关键是 各种进制的数值,在JavaScript中如何存储 // 这里特指的是整数 // 如果,变量中要存储的整数是 二进制数值 // 需要在二进制数值前 添加 0B 或者 0b 零b 或者 零B // 存储时,是按照二进制数值存储,输出时,默认都是按照十进制数值输出 // 如果需要按照原始进制数值输出 // 变量名称.toString(进制) S必须大写 // 将数值转化为字符串形式输出 var a = 0b11111001; console.log(a); // 默认将存储数值,转化为十进制输出 console.log( a.toString(2) ); // 默认将存储数值,转化为十进制输出 // 八进制 在存储数值之前添加0 // 按照八进制输出, toString(),小括号中写8 var b = 0371; console.log(b); console.log( b.toString(8) ); // 十进制 正常输入就可以 var c = 248; // 十六进制 输入数值前,加 0x 零x 或者 0X 零X var d = 0xf9; console.log(d) console.log( d.toString(16) );
数据类型之浮点数
// 浮点数 , 也就是小数 float
有效数字 / 有效数值
// 在数学中,小数的小数位数,可以是无穷位
// 在JavaScript中,对于浮点数的总位数有规定
// 一个浮点数,有效数字/有效数值,最多 17 位
// 所谓的有效数字,值得是,左起,非零的数值
// 整数部分,小数部分,一共是17位
// 直接截取有效部分,而不是四舍五入
// console.log(12345.67890123456789012345);
科学计数法
// 记录表示数值的一种语法形式
// 数值 e 数值
// 2 e 3 2 乘以 10的3次方 2 * (10*10*10)
// 2 e -3 2 除以 10的3次方 2 / (10*10*10)
// 关键: 使用科学技术法表示的数值,即时是一个整数,计算机中也是按照浮点数来分类的
// 2e3表示的是 2000 ,是一个整数,但是计算机程序,仍然会将这个整数,当做浮点数来处理
// console.log( 2e3 ); // 2000
// console.log( 2e-3 ); // 0.002
浮点数的误差 — 浮点数的 精度丢失 / 精度溢出
// 在计算机程序中,浮点数的存储,存储内容,不是准确值,而是近似值
// 在计算机中,就会造成浮点数执行时,计算的误差,也称作精度丢失/精度溢出
// 但是这种情况不是任何时候都会体现出来
// 这样的错误,在特殊情况下会体现出来
// 解决方案,是用高精度浮点来执行计算 float类型 转 double 类型
// console.log( 0.1*0.1 );
// console.log( 0.1*0.2 );
// console.log( 0.1*0.3 );
// console.log( 0.1*0.4 );
// console.log( 0.1*0.5 );
// console.log( 0.1*0.6 );
// console.log( 0.1*0.7 );
// console.log( 0.1*0.8 );
// console.log( 0.1*0.9 );
// 经典面试题:
// 写出以下 程序的 执行结果
// == 两个等号 表示 判断 两侧的内容是否相等
console.log( 0.1 + 0.2 == 0.3 )
console.log( 0.2 + 0.2 == 0.4 )
console.log( 0.3 + 0.3 == 0.6 )
// 这是错误的语法形式,我在实际项目中,根本不会这么写
// 浮点数因为存储方式的问题,直接执行运算或者比较,会造成精度溢出或者精度丢失的现象
// 造成执行的误差
// 我会将浮点数,转化为 高精度浮点数 , 在进行运算,会避免这样的问题发生
数据类型之Undefined和null
undefined和null ：是JavaScript中的两种数据类型
undefined 表示没有数值 — 应该有数值,但是现在没有数值
null 表示数值为空 — 表示有数值,但是数值是"空"
// undefined
//别人叫我给倒杯水，但是我给她拿了一个 空杯子
// 此时杯子中,应该有水,但是现在没有水,就叫undefined
// null
//别人让我给她拿一个空的平底锅,
// 这个锅 本身 就应该是一个空的 锅, 就是 null
// 可以直接给变量,赋值 undefined 和 null
// 注意,也是必须小写
// 定义int1 但是没有赋值数值
var int1 ;
// 输出时,int 应该有数值,但是现在没有数值
// 输出的结果就是 undefined
console.log(int1);
// 定义一个变量,并且赋值null
var int2 = null;
console.log( int2 );
var int3 = undefined;
console.log( int3 );
总结:
true , false , undefined , null , NaN
在JavaScript中,表示的是一种数值
赋值时,必须严格遵守 大小写规范
并且,不能带 引号 , 如果有引号,就是字符串,就不是原有的数值了