JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
1.你将学到什么
JavaScript:写入 HTML 输出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
提示:您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。
JavaScript:对事件作出反应
<button type="button" onclick="alert('Welcome!')">点击这里</button>
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。
JavaScript:改变 HTML 图像
会动态地改变 HTML <image> 的来源 (src):
JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片
JavaScript:改变 HTML 样式
改变 HTML 元素的样式,属于改变 HTML 属性的变种。
实例
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
JavaScript:验证输入
JavaScript 常用于验证用户的输入。
实例
if isNaN(x) {alert("Not Numeric")};
2.JavaScript 使用
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
3.JavaScript 输出
JavaScript 通常用于操作 HTML 元素。
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
`document.getElementById("demo").innerHTML="My First JavaScript";`
</script>
</body>
</html>
4.JavaScript 注释
JavaScript 注释可用于提高代码的可读性。
JavaScript 注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。
单行注释以 // 开头。
JavaScript 多行注释
多行注释以 / 开始,以 / 结尾。
// 输出标题:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落:
document.getElementById("myP").innerHTML="This is my first paragraph.";
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
5.JavaScript 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
JavaScript 字符串
字符串是存储字符(比如 "Bill Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
6.JavaScript 运算符
运算符 = 用于赋值。
运算符 + 用于加值。
运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
1. 算数运算符
+ - * / % ++ --
2. 赋值运算符
= += -= *= /=
3. 比较运算符
> < ==(===) !=(!==)
4. 逻辑运算符
&& || !
5. 三元(目)运算符
条件表达式?为真:为假
7.JS事件 常用事件
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件
1. onblur:失去焦点
2. onfocus:元素获得焦点。3. 加载事件:
1. onload:页面加载完成后立即发生。4. 鼠标事件:
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。6. 改变事件
1. onchange 域的内容被改变。7. 表单事件:
1. onsubmit 提交按钮被点击。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-事件绑定</title>
</head>
<body>
<input type="button" value="普通函数" onclick="show()"> <br>
<input type="button" value="匿名函数" id="myBtn"> <br>
<script>
// 单击事件
// 普通函数 此种方案有耦合性....
function show() {
alert('我是普通函数触发的事件...')
}
// 匿名函数
// 通过dom技术获得按钮标签的js对象
/* let myBtn = document.getElementById('myBtn');
myBtn.onclick=function () {
alert('我是匿名函数触发的事件...')
}*/
document.getElementById('myBtn').onclick=function () { // 链式编程...
alert('我是匿名函数触发的事件...');
}
</script>
</body>
</html>
demo
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-案例:页面交互</title>
</head>
<body>
<!--
常用事件
1. onload 页面加载完成
2. onfocus 获取焦点
3. onblur 失去焦点
4. onchange 表单控件的值改变时
5. onclick 鼠标单击
-->
姓名 <input type="text" id="userName" ><br/>
学历
<select name="edu" id="edu">
<option value="0">请选择</option>
<option value="1">本科</option>
<option value="2">大专</option>
</select>
<br/>
<button id="btn" >按钮</button>
<script >
// js代码的执行自上而下...(顺序结构)
//1. onload 页面加载完成后,触发的事件
window.onload=function () {
console.log("页面加载完成.....") // 这哥们放到哪,都是最后执行.....
}
console.log("哈哈,我是外部的内容")
//2. onfocus 获取焦点
// this 当前对象
document.getElementById('userName').onfocus=function () {
// document.getElementById('userName').value='获得焦点';
this.value='获得焦点';
}
//3. onblur 失去焦点
document.getElementById('userName').onblur=function () {
this.value='失去焦点';
}
//4. onchange 表单控件的值改变时
document.getElementById('edu').onchange=function () {
alert(this.value) // 获得当前选中的某一个具体的value值
}
//5. onclick 鼠标双击
document.getElementById('btn').ondblclick=function () {
alert('我是双击事件...')
}
</script>
</body>
</html>
8.JS常用内置对象
String对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10-字符串</title>
</head>
<body>
<!--
1. 构造字符串对象可以使用
双引号,单引号,反引号
2. 字符串常用方法
substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符。 包头不包尾
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
split() 把字符串分割为字符串数组。
trim() 去掉首尾空格
-->
<script type="text/javascript">
// ------------ 1. 构造字符串对象可以使用 双引号,单引号,反引号
// 双引号
let str1 = "我是字符串";
console.log(str1);
// 单引号
let str2 = '我是字符串';
console.log(str2);
// 反引号(重音符) 简化字符串的拼接
let str3 = `我是字符串`;
console.log(str3);
// 女性角色:只要998,保证让你xxxx
let num = 998;
let cishu = 3;
let str4 = '只要'+998+',保证让你xxx';
let str5 = `只要 ${num},保证让你xx , ${cishu}`;
console.log(str5);
// ------------ 2. 字符串常用方法
// substring
let str = '我爱我的祖国';
console.log(str.substring(4, 6));
</script>
</body>
</html>
Array对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>11-数组</title>
</head>
<body>
<!--
数组
查询手册完成:
1. 创建数组
let array = [元素1,元素2,元素3]; -- 推荐
let array = new Array(元素1,元素2,元素3);
特点:数组元素的类型任意,数组的长度任意,当做java的list集合
2. 数组常用方法
concat() 连接两个或更多的数组,并返回结果。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
pop() 删除并返回数组的最后一个元素
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
与 字符串.split()切割为数组 方法相反
sort() 对数组的元素进行排序
-->
<script>
//1. 创建数组
let arr1 = ['詹姆斯·高斯林','布兰登·艾奇','未来的你们',true];
console.log(arr1);
let arr2 = new Array('贾克斯',5,new Date());
console.log(arr2);
//2. 数组合并
let concatArr = arr1.concat(arr2);
console.log(concatArr);
//3. 添加元素
concatArr.push('我是新元素');
console.log(concatArr);
//4. 删除元素
concatArr.pop();
console.log(concatArr);
//5. 数组元素拼接为字符串
console.log(concatArr.join('-'));
//6. 排序数组元素
let arr3 = [3,1,7,5];
console.log(arr3.sort()); // 升序
console.log(arr3.sort().reverse()); //降序
// 指定sort() 排序规则
console.log(arr3.sort(function(a,b){return a-b})); // 升序
console.log(arr3.sort(function(a,b){return b-a})); // 降序
</script>
</body>
</html>
Date对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>12-日期</title>
</head>
<body>
<!--
日期
let date = new Date();
-->
<script>
let date = new Date();
console.log(date);
console.log(date.toLocaleString()); // 转换为本地日期格式的字符串
console.log(date.getFullYear()); // 年 四位
console.log(date.getMonth()+1);// 月 范围:0~11
console.log(date.getDate()); // 日
console.log(date.getTime()); // 1970年~今毫秒值
</script>
</body>
</html>
Math 对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13-数学</title>
</head>
<body>
<body>
<!--
数学运算
查询手册完成
1. 四舍五入 round()
2. 向下取整 floor()
3. 向上取整 ceil()
4. 产生随机数 random() :返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1 (含头不含尾)
-->
<script >
let n = 1234.567;
//1. 四舍五入取整
console.log(Math.round(n));
//2. 向下取整
console.log(Math.floor(n));
//3. 向上取整
//4. 产生随机数
console.log(Math.random());
//5. 产生 [1,100]的随机整数
console.log(Math.floor(Math.random() * 100+1));
</script>
</body>
</html>
全局函数
不需要通过任何对象,可以直接调用的就称为全局函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>14-全局函数</title>
</head>
<body>
<!--
全局函数
1. 字符串转为数字
parseInt() 解析一个字符串并返回一个整数。
parseFloat() 解析一个字符串并返回一个浮点数。
特点:从第一个字符开始转换,遇到非数值字符停止转换....
NaN not a number 这不是一个数 (这哥们六亲不认)
isNaN() 判断一个字符串 如果不是数值返回true 否则返回false
2. 对字符串编码和解码
encodeURI() 把字符串编码为 URI。
decodeURI() 解码某个编码的 URI 。
3. 把字符串当做js表达式来执行
eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。
-->
<script >
// 1. 字符串转为数字
let str = '1314.1234';
console.log(parseInt(str)); // 1314
console.log(parseFloat(str)); // 1314.1234
console.log(NaN == NaN ? '相等' : '不等');
console.log(isNaN(str));
// 2. 对字符串编码和解码
let name = "明天下午二点偷袭珍珠港";
let encodeStr = encodeURI(name);// 编码
console.log(encodeStr);
console.log(decodeURI(encodeStr));// 解码
// 3. 把字符串当做js表达式来执行
eval('alert(1)'); // 将字符串识别为js的一个脚本片段
</script>
</body>
</html>
JavaScript资料汇总: