JavaScript是网页前端中三剑客之一,另外两个分别为HTML和CSS
其中HTML负责控制网页的结构,CSS负责空着界面表现,而JS负责控制网页的行为
JS语言是一种弱类型语言,所以在很多地方都支持他的使用
JS的引入方式有两种
内部脚本
将JS脚本写在HTML文件中,位于<script>标签和</script>标签之间
其中最好将<script>标签置于body标签底部,这样可以提高用户的使用体验
外部脚本d
定义一个名为JS的文件夹,其中存放有关JS的代码
在HTML中利用<script>进行引入
书写语法和输出语句
输出语句
window.alert(); 出现警示框
document.write(); 写在HTML页面中
console.log(); 出现在控制台中
书写语法
JS的书写语法和JAVA相似,都是利用 // 和 /**/ 进行注释
JS的变量和数据类型以及类型转换
JS的变量
JS的变量定义有三种:var,let,const // 三种变量均不区分数据类型
var定义的变量为全局变量,可以重复定义
let定义的变量为局部变量,不可以重复定义
const定义的变量为常量,不可以重复定义,不可以改变其值
JS的数据类型
JS的数据类型有五种:number,boolean,null,string,undefined // 可以利用 typeof 函数来输出数据的类型
number:数字(整数、小数、NaN(Not a Number))
string:字符、字符串,单双引皆可
boolean:布尔。true,false
null:对象为空
undefined:当声明的变量未初始化时,该变量的默认值是 undefined
JS的类型转换
其他类型转number类型
string可以使用parseInt函数转换:其中如果字面值非数值,则会转为NaN,任何数字与NaN进行运算结果都为NaN
boolean的true转为1,false转为0
其他类型转Boolean类型
number中的NaN和转为false,其余转为true;
string中的空字符串转为false,其余为true;
null和undefined转为false;
JS的运算符号
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的,不同的是 JS 关系运算符中的 == 和 === ;
一元运算符:++,--
算术运算符:+,-,*,/,% 赋值运算符:=,+=,-=…
关系运算符:>,<,>=,<=,!=,==,===… 逻辑运算符:&&,||,!
三元运算符:条件表达式 ? true_value : false_value
==:
- 判断类型是否一样,如果不一样,则进行类型转换
- 再去比较其值
===:js 中的全等于
- 判断类型是否一样,如果不一样,直接返回false
- 再去比较其值
在 Java 中使用字符串前,一般都会先判断字符串不是null,并且不是空字符才会做其他的一些操作,JavaScript也有类型的操作,但是由于JS存在自动转换,所以直接用if判断str即可
JS的流程控制语句
和JAVA类似:if,for,switch,while,dowhile // 使用方法也类似
但是switch和C有所区别,JS中case后面需要加入{},而C中则不需要
JS中的函数
函数(就是Java中的方法)是被设计为执行特定任务的代码块;JavaScript 函数通过 function 关键词进行定义。
函数的定义方式有两种
第一种
1function 函数名(参数1,参数2..){
2要执行的代码
3 }
第二种
var 函数名 = function (参数列表){
要执行的代码
}
JS函数中的形参不需要定义类型,因为JS是一种弱语言,返回值也不需要定义类型,直接return即可
函数调用
JS中,函数调用可以传递任意个数参数例 如 let result = add(1,2,3);它是将数据 1 传递给了变量a,将数据 2 传递给了变量 b,而数据 3 没有变量接收,如果只传入一个值则第二个为undefined
JS的对象
基本对象
Array对象
JSArray对象用于定义数组,有两种定义方式
第一种
var 变量名 = new Array(元素列表);
var nums = new Array[1,2,3]
第二种
var 变量名 = [元素列表];
var nums = [1,2,3]
Java中的数组静态初始化使用的是{}定义,而 JavaScript 中使用的是 [ ] 定义
JS中的元素访问和JAVA中类似都是,nums[索引值]
JS中的array数组相当于JAVA中的集合,数组长度可变,并且因为JS是弱类型语言,所以数组中可以存放任意类型的变量
string对象
自定义对象
注意调用自定义对线的函数时不需要使用alert再进行调用
BOM对象
Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
Window:浏览器窗口对象
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象
window对象可以进行隐式调用,即可以不用打出window. ,就可以使用
alert("hello alert");
window对象也可以调用剩余的BOM对象
History对象
Location对象
DOM对象
Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。 在XML中也接触过DOM,XML 文档中的标签需要我们写代码解析,而 HTML 文档是浏览器解析。封装的对象分为
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
JavaScript 通过 DOM, 就能够对 HTML进行操作了
改变 HTML 元素的内容
改变 HTML 元素的样式(CSS)
对HTML DOM 事件作出反应
添加和删除 HTML 元素
常用操作
/*
checkbox checked
button onclick
div innerHTML/color
img src
*/
/*
onsubmit 返回true 表单会提交 false 则失败
*/
事件监听
事件监听使我们在HTML页面中进行一些操作的绑定操作
JS提供了两种事件绑定方式
第一种直接利用HTML标签中的事件属性进行绑定
第二种是利用id值来在JS代码中进行操作
常见事件
onsubmit 控制表单提交