目录
1.JS引入方式
（1）内部脚本：将JS代码定义在HTML页面中 JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度
（2）外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
外部JS文件中，只包含JS代码，不包含<script>标签 <script src="...."></script> alert("Hello JavaScript")
<script>标签不能自闭合
2.JS基础语法
书写语法：区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释： 单行注释：// 注释内容
多行注释：/* 注释内容 */ 大括号表示代码块
（1）输出语句
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 console.log() 写入浏览器控制台
（2）变量
JavaScript 中用 var 关键字（variable 的缩写）来声明变量 。 var a = 20; a = "张三";
特点1：作用域比较大，全局变量
特点2：可以重复定义的
JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
变量名需要遵循如下规则： 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名
注意：ECMAScript 6 新增了 let 关键字来定义变量。声明变量，块级作用域。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
3.数据类型，运算符，流程控制语句
JavaScript中分为：原始类型 和 引用类型。
number：数字（整数、小数、NaN(Not a Number)）
string：字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
使用 typeof 运算符可以获取数据类型 var a = 20; alert(typeof a);
4.算术符
算术运算符：+ , - , * , / , % , ++ , --
赋值运算符：= , += , -= , *= , /= , %=
比较运算符：> , < , >= , <= , != , == , ===(全等)
== 会进行类型转换，=== 不会进行类型转换
字符串类型转为数字： 将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。
alert(parseInt("12“)); //12
alert(parseInt("12A45“)); //12
alert(parseInt("A45“)) ; //NaN
其他类型转为boolean： Number：0 和 NaN为false，其他均转为true。
if(0) { //false
alert("0"转换为false);
String：空字符串为false，其他均转为true。
Null 和 undefined ：均转为false。
逻辑运算符：&& , || , !
三元运算符：条件表达式 ? true_value: false_value
5.函数
函数（方法）是被设计为执行特定任务的代码块。
JavaScript 函数通过 function 关键字进行定义，语法为： //方可省
function functionName(参数1,参数2..){ //要执行的代码 }
定义： 方式二：
function add(a , b){ var add = function(a , b){
return a + b; return a + b;
} }
调用：
var result = add(10,20);
alert(result)
注意： 形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称(实际参数列表)
6.JS对象
(1)Array
是js中Array对象用于定义数组。 特点：长度，类型可变
2.定义
var 变量名 = new Array(元素列表); //方式一 var arr = new Array(1,2,3,4);
var 变量名 = [ 元素列表 ]; //方式二 var arr = [1,2,3,4];
访问
arr[ 索引 ] = 值; arr[10] = "hello";
//forEach: 遍历数组中有值的元素
// arr.forEach(function(e){
// console.log(e);
// })
//ES6 箭头函数: (...) => {...} -- 简化函数定义
arr.forEach((e) => {
console.log(e);
})
//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);
//splice: 删除元素
arr.splice(2,2);
console.log(arr);(2)String
String字符串对象创建方式有两种：
var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二 var str = "Hello String";
//创建字符串对象
//var str = new String("Hello String");
var str = " Hello String ";
console.log(str); //Hello String
//length
console.log(str.length); //12
//charAt
console.log(str.charAt(4)); //0
//indexOf
console.log(str.indexOf("lo")); //3
//trim 去除字符串左右两侧空格
var s = str.trim();
console.log(s);
//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
console.log(s.substring(0,5)); Hello7.js自定义对象
定义格式：
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: (形参列表){
alert();
}
};
调用格式：
对象名.属性名; alert(user.name);
对象名.函数名(); user.eat();
8.JSON
是通过JS对象标记法书写的文本，先多用于数据载体
{
"name":"Tom",
"age":20,
"gender":"male"
}
1.定义
var 变量名 = ‘{}’
value 的数据类型为：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
2.JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
//定义json
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name); //undefined
//json字符串--js对象
var obj = JSON.parse(jsonstr);
alert(obj.name); //Tom
//js对象--json字符串
alert(JSON.stringify(obj)); //"name":"Tom", "age":18, "addr":["北京","上海","西安"9.BOM
浏览器对象模型
(1)Window
介绍：浏览器窗口对象。
获取：直接使用window，其中 window. 可以省略。 window.alert("Hello Window");
属性
history：对 History 对象的只读引用。
location：用于窗口或框架的 Location 对象。
navigator：对 Navigator 对象的只读引用。
方法
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()：在指定的毫秒数后调用函数或计算表达式。
//获取
window.alert("Hello BOM");
alert("Hello BOM Window");
//方法
//confirm - 对话框 -- 确认: true , 取消: false
var flag = confirm("您确认删除该记录吗?");
alert(flag);
//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);
//定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},3000);(2)Location
介绍：地址栏对象。
获取：使用 window.location 获取，其中 window. 可以省略。
location.属性;
属性： href：设置或返回完整的URL。 location.href = "..";
alert(location.href);
location.href = "..."10.DOM
文档对象模型
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
1.根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
2.根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
3.根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
4.根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');
//1. 获取Element元素
//1.1 获取元素-根据ID获取
var img = document.getElementById('h1');
alert(img);
//1.2 获取元素-根据标签获取 - div
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
//1.3 获取元素-根据name属性获取
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
alert(ins[i]);
}
//1.4 获取元素-根据class属性获取
var divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
//2. 查询参考手册, 属性、方法
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = "传智教育666"; //返回内容，修改案例
<body>
<img id="h1" src="img/off.gif"> <br><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"> 游戏
</body>
<script>
//1. 点亮灯泡 : src 属性值
var img = document.getElementById('h1');
img.src = "img/on.gif"; 修改img属性
//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
const div = divs[i];
div.innerHTML += "<font color='red'>very good</font>";
}
//3. 使所有的复选框呈现选中状态
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
const check = ins[i];
check.checked = true;//选中
}
</script>11.Js事件监听
可以在事件被侦测到时 执行代码。
方式一：通过 HTML标签中的事件属性进行绑定
<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
function on(){
alert("按钮1被点击了...");
}
</script>方式二：通过 DOM 元素属性绑定
document.getElementById('btn2').onclick = function(){
alert("按钮2被点击了...");
}
（1）常见事件
| 事件名 | 说明 |
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
<body onload="load()">
<form action="" style="text-align: center;" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id="b1" type="submit" value="提交">
<input id="b1" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀</td>
</tr>
</table>
</body>
<script>
//onload : 页面/元素加载完成后触发
function load(){
console.log("页面加载完成...")
}
//onclick: 鼠标点击事件
function fn1(){
console.log("我被点击了...");
}
//onblur: 失去焦点事件
function bfn(){
console.log("失去焦点...");
}
//onfocus: 元素获得焦点
function ffn(){
console.log("获得焦点...");
}
//onkeydown: 某个键盘的键被按下
function kfn(){
console.log("键盘被按下了...");
}
//onmouseover: 鼠标移动到元素之上
function over(){
console.log("鼠标移入了...")
}
//onmouseout: 鼠标移出某元素
function out(){
console.log("鼠标移出了...")
}
//onsubmit: 提交表单事件
function subfn(){
alert("表单被提交了...");
}
</script>12案例
<body>
<img id="light" src="img/off.gif"> <br>
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">
<br> <br>
<input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
<br> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
</body>
<script>
//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
function on(){
//a. 获取img元素对象
var img = document.getElementById("light");
//b. 设置src属性
img.src = "img/on.gif";
}
function off(){
//a. 获取img元素对象
var img = document.getElementById("light");
//b. 设置src属性
img.src = "img/off.gif";
}
//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
function lower(){//小写
//a. 获取输入框元素对象
var input = document.getElementById("name");
//b. 将值转为小写
input.value = input.value.toLowerCase();
}
function upper(){//大写
//a. 获取输入框元素对象
var input = document.getElementById("name");
//b. 将值转为大写
input.value = input.value.toUpperCase();
}
//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
function checkAll(){
//a. 获取所有复选框元素对象
var hobbys = document.getElementsByName("hobby");
//b. 设置选中状态
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = true;
}
}
function reverse(){
//a. 获取所有复选框元素对象
var hobbys = document.getElementsByName("hobby");
//b. 设置未选中状态
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = false;
}
}
4439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
