一、今日学习
1、介绍 javascript
概念:ja:vascript它是一门强大的变成语言,主要用于网页的交互效果的实现。
2014年es5发布
2015年es 6以及以后更新的
js的实现步骤
js的引入:
输出内容
2、js重点
js的实现步骤
引入js 四种
1.引入方式的分类
内嵌式 内部式
概念:通过一对写在html的body里面的script标签进行书写 在网页的任意位置引入
语法:<script>
js代码
</script>
外链式 外链式
概念:通过我们在外部创建一个js的文件,在文件中直接写js代码,在通过sscrpt标签中的src属性引入
语法:创建一个js文件 在网页的任意位置引入
<script src="url"></script>
html标签 事件属性
概念:通过我们所有的标签都有的事件属性来引入。
语法;事件属性:“需要写的js代码”
说明:事件属性有很多种 onclick 鼠标单击左键的事件 最长用的
a标签的href属性引入--将地址转换成js
概念:通过超链接标签,主要用于跳转到我们href属性设置的链接地址
概念 :通过我们a标签的href属性来执行一段代码。
语法:<a href="javascript:需要执行的js代码">需要显示的文本内容</a>
四种之间的区别:
内部式和外链式:
内部式一般只针对当前引入的网页有效果,一般用于测试或者演示
外链式可以多次被使用,只需要通过script中的src属性引入就可以,开发使用
四种区别
1、内嵌式只能在当前的文件中使用
2、外连式 的js 可被多个html页面使用
3、只用过触发条件去触发才会执行js代码。
4、a标签本身就是超链接,指定了javascript协议,点击这个超链接,就会告诉浏览器,这里需要执行一段js代码,与onclick无差别显示。
四种引入方式的注意点:
1、script标签上有一个type属性,可写可不写,一定要写正确;
type="text/javascript";一般不写
2内嵌式和外链式引入的位置说明:
本身可以在任意位置进行引入,或者在body标签结束之前。
但是要注意引入的顺序
如果需要获取页面里面的节点dom,需要写在body完成之前,节点之后,如果写在写在其他地方 会导致报错
操作标签的的时候注意引入顺序
(文档加载事件window。onload=fouction(){
操作相关的js代码
}作用:等我们所有的dom节点即标签加载完毕之后再执行
3、使用外链式的时候不能在script标签之间写的代码不会被执行
标签不能写在script里面
在我们的script标签里面不能有css样式 、html标签,只能通过js来操作
输出内容 3种输出
作用:主要用于调试代码
语法:
1、控制台输:console.log(“”) f12- console
2、弹框输出: alert(“”);弹窗输出
3、网页输出:document。write(“需要输出内容”)
如果需要多个输出,需要用英文逗号隔开
1.console.log
2、alert
3、
JS的基础语法
1、注释:
作用:主要用于对代码进行解释说明
语法:单行注释 // ctrl+/ 针对当前行生效
多行注释
注释的代码比较多/* 多行注释*/ alt+shift+a
2、变量
概念:变化的数据
变量的作用用来存储程序中的变化数据
定义变量:
es5:定义变量通过var来定义
声明变量 var 变量名;
赋值 变量名=值;把等号右边的值赋给变量
合并写法 var 变量名=值;变量的定义域赋值同事进行
es6声明变量:
let:表示相当于var的定义变量,块级作用域,作用域就是可以被访问的范围
const 声明的是一个常量 不变的量。块级作用域,声明的时候必须赋值。赋值完成以后不可以重新赋值
var let const区别:
es5,没有块级作用域,var定义变量之后 对已经定义好的变量进行二次定义,但是二次以及以后的evar没意义。
es6 有块级作用域。let声明的变量不可以使用let进行二次声明。const声明的是常量,声明的时候必须同时赋值,并且不能修改
标识符--变量的命名规则
不能以数字开始 关键字和保留字不可用,英文大小写的意义不一样
1、变量的名字可以包括大小写字母,数字,下划线,符号 但是不能以数字开始
2、不能是关键字和保留字
3、命名英文区分大小写
4、如果我们的名字是由多个单词组成的,我们可以使用一下的几种_
大驼峰 每个单子首字母都是大写
小驼峰,除了第一个单词,其他单词的首字母都大写
变量类型:
作用就是给程序中的变量分成不同的类型 让计算机最大化的存储数据,同类型数据才能进行计算
1、基本类型
2、引用类型
es5:5个基本类型 3个引用类型
5个基本: number string boolean undefined null
3个引用:object array function
number 数字 可以进行数字的运算 int 正数 float 小数 NaN:not a number表示一个不是有明确的数字的数字类型 type of检测基本变量的基本数据类型
string字符串 中文文字可以作为字符串进行保存 单引号或者双引号都是
如果字符串的数据中出现了特殊字符需要使用\字符进额外处理
用\‘ 代表单引号
\" 双引号
\n 换行
\\ 表示\
3、布尔boolean值
执行的结果有且只有两个 true false
4、undefined 未定义
定义的变量未被赋值 默认是undefined 有且只有一个值
5、nul空对象 null本身是早期js 里面的bug 后面发现很好用 就保留下来了
null数据类型有且只有一个值 null
null 清空对象 释放内存 ,可以通过给一个变量赋值null
null和undefined区别
都代表的是没有值。
不同点,undefined 定义变量 未被赋值
null 一个变量 如果存储的值是引用数据类型 目前对象还没有创建,使用null占位置
变量的数据类型检测 typeof 变量名
typeof(变量) 标准写法。
数据类型的转换:重点
概念:把一种数据转换成另外一种数据类型
作用:数据之间需要进行运算,同类型才可以进行运算,如果不同类型之间存在运算的话,就需要转换成同一种类型以后进行转换
:类型转换的分类:
1、强制类型转换 显示转换
1、转数字类型
转整数parseInt(变量)parseFloat(转小数)小数后最多连续11个0 转数字 number(变量);
2、转布尔值
3、转字符串
es6:6个基本类型 1个引用类型
5个基本: number string boolean undefined null symbol
3个引用:object
|