1.javaScript简介
javaScript是一门跨平台的,面向对象的脚本语言,用于控制网页的行为,能使网页可交互.不需要编译,用浏览器直接解析执行.主要用来改变页面内容、修改指定元素的属性值、对表单进行校验等
2.javaScript的引入方式
javaScript的引入主要是HTML和JavaScript的结合使用,有两种方式:
第一种内部脚本:JavaScript 代码定义在 HTML 中，必须位于 <script> 与 </script> 标签之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("hello js1");
</script>
</body>
</html>第二种外部脚本:
先定义js文件,在文件中定义js语句,如:alert("hello js");
然后在html页面中使用 script 标签,使用 src 属性指定 js 文件的 URL 路径引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>注意:1.<script> 标签不能自闭合
2.外部脚本不能包含 <script> 标签在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签.
3.javaScript的基本语法
3.1书写语法
(1)书写区分大小写,和java一样,变量名,函数等都区分.
(2)每行结尾的分号可有可无
(3)注释
单行注释：// 注释内容
多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
(4)大括号标识代码块
3.2输出语句
(1)使用 window.alert() 写入警告框 ,window可以省略
(2)使用 document.write() 写入 HTML 输出
(3)使用 console.log() 写入浏览器控制台
3.3变量
(1)使用var关键字声明变量
注意:作用域:全局变量 变量可以重复定义
(2)ECMAScript 6 新增了 let关键字声明变量
let定义的变量只在代码块中有效,不可以重复定义.
3.4数据类型
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。
原始数据类型:
(1)number 数字(整数,小数,NaN)
(2)string 字符串,字符,双引单引都行
(3)boolean 布尔,true和fales
(4)null 对象为空
(5)undefined 当变量未进行初始化时,默认为undefined.
使用typeof可以获取变量类型
let a = 10;
console.log(typeof a);
let b = 20;
b = "柳岩";
alert(typeof b);
let c = '龚玥菲';
document.write(typeof c);
3.5运算符
3.5.1 ==和===的区别
== :判断类型是否一样,如果不一样,先进行类型转化再比较其值.
===:js中的全等于
判断类型是否一样,如果不一样,直接返回fales.
3.5.2自动类型转化
(1)其他类型转化为number
字符串转化为number类型,使用parseInt方法进行转化.
let age = "88";
age = parseInt(age)+2;
alert(age);boolean转化为number
true转为1,false转为0.
(2)其他类型转化为boolean
字符串转化为boolean.
//字符串转为boolean
let username = "柳岩";
if(username){
console.log("有人");//输出有人
}else{
console.log("没人");
}
//注意:字符串转化为boolean,如果字符串为空,则输出false,如果字符串有值,则输出true.number类型转化为boolean
0和NaN转化为false,其余转化为true.
null转化为Boolean,直接为fales
undefined转化为Boolean,直接转化为fales.
3.6函数
JavaScript中的函数就是java中的方法,也就是被设计的执行特定任务的代码块,通过function来进行定义.
3.6.1定义函数的格式
方式1:
function 函数名(参数列表){
alert("你最棒")//要执行的代码
return xxxx;
}方式2:
var 函数名 = function(=参数列表){
要执行的代码块
return xxxxx;
}注意:(1)参数类型不需要,JavaScript为弱类型语言
(2)不需要定义返回值类型,直接在代码块中进行return即可.
3.6.2函数的调用
函数名(参数列表)
注意:(1)调用方法时传递参数的数量可以是任意个数,多余参数的数值不接收.
(2)每个函数的内部都有一个内置的数组对象arguments.
4.JavaScript的常用对象
这些对象总共分类三类
基本对象:Array,String
BOM对象
DOM对象
4.1基本对象
(1)Array用于定义数组
a.格式
格式一: var 变量名 = new Array();
格式二:var 变量名 = [元素列表 ];
b.元素访问
变量名[索引] = 值
方式一
var arr = new Array(1,2,3);
alert(arr); //1,2,3
方式二
var arr2 = [1,2,3];
alert(arr2);//1,2,3
访问
arr2[0] = 10;
alert(arr2)//10,2,3注意:JavaScript中的数组是一个长度和类型可变的.
c.方法
添加元素:push
删除元素:splice
数组的长度:调用length方法
(2)String对象的创建方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建String对象方法1
var str1 = new String("就是你")
//创建String对象方法2 双引,单引都可以
var str2 = "abc";
//String的属性
alert(str2.length);
//常用方法
var str3= ' abcd ';
//去除留白部分
alert(1+str3.trim()+1);
</script>
</body>
</html>(3)自定义对象
定义格式:
var 对象名称 = {
变量名1:变量值1,
变量名2:变量值2,
.......................
函数名:function(参数列表){
执行的方法体
}
}调用
对象名.变量名
对象名.函数名()
注意:当对创建好之后可以随意扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//自定义对象定义的格式
let student = {
age:18,
sleep:function () {
alert("你好")
}
}
//显示原有的
//调用方法的格式
student.sleep();
//调用属性的格式
alert(student.age);
//对象的属性,当对象创建好了之后,可以随意扩展
student.name="潘金莲";
student.show = function () {
alert("西门庆")
}
student.show();
alert(student.name);
</script>
</body>
</html>4.2 BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
BOM 中包含了如下对象：
-
Window：浏览器窗口对象
-
Navigator：浏览器对象
-
Screen：屏幕对象
-
History：历史记录对象
-
Location：地址栏对象
(1)window对象创建和使用
该对象不需要创建直接使用 window，其中 window. 可以省略
例如: window.alert("abc");
window 对象提供了用于获取其他 BOM 组成对象的属性,也就是说,我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。
window对象函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
函数:confirm()
// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");
alert(flag);
//定时器方法 可以循环
//会有一个返回值,返回值是该定时器的唯一标识,可以使用这个标识取消定时器
let id = setInterval(function () {
console.log("666")
},2000)
//取消定时器 clearInterval(唯一标识)
clearInterval(id)//取消定时器
//定时器方法 只执行一次
let id1 = setTimeout(function () {
console.log("你最棒")
})
clearTimeout(id1)
</script>
</body>
</html>(2)History对象
History对象是对历史记录的封装,创建也是又window来创建,window可以省略.
方法:back() 加载列表前一个的URL
forward() 加载列表后一个的URL
(3)Location对象
Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。
用 window.location获取，其中window. 可以省略
window.location.方法(); location.方法();
Location对象的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("要跳转了")
location.href= "https://www.baidu.com";*/
document.write("2秒后跳转页面")
setTimeout(function () {
location.href= "https://www.baidu.com"
},2000)
</script>
在浏览器首先会弹框显示 `要跳转了`，当我们点击了 `确定` 就会跳转到 百度 的首页。
</body>
</html>4.3DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
封装的对象分为
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
作用：
JavaScript 通过 DOM， 就能够对 HTML进行操作了
改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素
4.3.1获取Element对象
HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。
Document 对象中提供了以下获取 Element 元素对象的函数
-
getElementById()：根据id属性值获取，返回单个Element对象 -
getElementsByTagName()：根据标签名称获取，返回Element对象数组 -
getElementsByName()：根据name属性值获取，返回Element对象数组 -
getElementsByClassName()：根据class属性值获取，返回Element对象数组<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="light" src="../imgs/off.gif"> <br> <div class="cls">我爱学习</div> <br> <div class="cls">编程</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 <br> <script> //1.根据id var elementById = document.getElementById("light"); alert(elementById) //2.根据name属性值获取，返回Element对象数组 var elementsByName = document.getElementsByName("hobby"); for (let i = 0; i <elementsByName.length; i++) { alert(elementsByName[i]) //3.根据标签 var elementsByTagName = document.getElementsByTagName("div"); // 返回一个数组，数组中存储的是 div 元素对象 // alert(divs.length); //输出 数组的长度 //遍历数组 for (let i = 0; i < elementsByTagName.length; i++) { alert(elementsByTagName[i]); } //4. getElementsByClassName：根据class属性值获取，返回Element对象数组 var clss = document.getElementsByClassName("cls"); for (let i = 0; i < clss.length; i++) { alert(clss[i]); } } </script> </body> </html>
2264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
