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