- JavaScript(JS)是一门跨平台、面向对象的脚本语言。
1 引入方式
引入方式即指js代码与html页面代码的结合方式。(2种)
内部脚本
内部脚本:将JS代码定义在HTML页面中:
- JS代码必须放在<script></script>标签之间
- 在HTML文档中,可以放在任意地方,放置任意数量的<script>
- 一般把脚本置于<body>元素的底部,可改善显示速度
例:
<script>
alert("Hello JS!");
</script>
外部脚本
外部脚本:将代码定义在外部JS文件中,然后引入到html页面
- 外部JS文件中,只包含JS代码,不带<script>标签
- <script>标签不能自闭(<script></script>要都写)
例:
<script src="xxx/xxx.js"></script>
2 基础语法
2.1基本书写语法
- 区分大小写
- 每行结尾分号可有可无(建议写)
- 注释:
- 单行注释:// xxx
- 多行注释:/* xxx */
- 大括号表示代码块
2.2输出语句
- 使用
window.alert()
写入警告框; - 使用
document.write()
写入HTML输出; - 使用
console.log()
写入浏览器控制台;
例:
window.alert()
document.write()
console.log()
2.3 变量
JS是一门弱类型语言,变量可以存放不同类型的值;
~使用var关键字来声明变量~ (被弃用)
- 使用 let 关键字定义变量,只在所在代码块内有效,不允许重复声明;
- const定义只读的常量,不能改变;
let a = 10;
a="Hello JS!";
2.4 数据类型
分为 原始类型 和 引用类型。
原始类型:
- number:整数、小数、NaN
- string:字符串
- boolean:布尔,true false
- null:对象为空
- undefined:声明变量未初始化的默认值;
使用typeof运算符可以获取数据类型;
例:
<script>
alert(typeof(3));//number
alert(typeof 1.14);//number
alert(typeof "A");//string
alert(typeof 'abcd');//string
alert(typeof true);//boolean
alert(typeof null);//object
let a;
alert(typeof a);//undefined
alert(a);//undefined
</script>
2.5 运算符
与java基本一样。除了
==与===
==会进行类型转换,===不会进行类型转换
2.6 类型转换:
- 字符串类型转数字:parseInt()
parseInt("123");//123
parseInt("12A3");//12
parseInt("A123");//NaN
将字符串字面值转数字。如果字面值不是数字,则转为NaN。
- 其他类型转为boolean:
- number:0和NaN转false,其他为true;
- string:空字符串为false,其他为true;
- Null 和 undefined:false
2.7 流程控制:
同一般语言一样
3 函数
定义:
JS函数通过 function 关键字进行定义;
- 定义方式一:
function functionname(参数1,参数2...)
{
//...
}
- 定义方式二:
var functionname= function(参数1,参数2...)
{
//...
}
注意:
- 弱类型语言:形参不需要类型;
- 返回值也不需要类型,直接return;
调用:函数名称(实际参数表)
例:
//定义一
function f1(a,b)
{
return a+b;
}
//定义二
let f2=function(a,b)
{
return a+b;
}
//调用
alert(f1(10,20));
alert(f2(20,60));
4 对象
JS中主要有三种对象:JS自身提供的基础对象、BOM(浏览器对象模型)、DOM(文档对象模型);
4.1 Array数组对象
JS中Array对象用于定义数组。
定义:
- 方式一:
let 变量名= new Array(元素列表);
- 方式二:
let 变量名 = [元素列表];//注意是方括号而非花括号
访问:
通过索引访问
arr[索引]=值;
注意:
JS中数组长度可变。
可以直接访问数组名来显示整个数组,如alert(arr);
属性:
- length : 设置或返回数组中元素的个数。
方法:
- forEach( ) : 遍历数组中每个有值的元素,并调用一次传入的函数。(可使用 => 简化函数定义语法。(参数表)=>{函数体})
- push( ): 将新元素添加到数组的末尾,并返回新的长度。
- splice( ):从数组中删除元素
4.2 String 对象
定义:
let 变量名 = new String("...");
- let
变量名
=”…”;
属性:
- length : 字符串的长度
方法:
- charAt( ) : 返回在指定位置的字符;
- indexOf( ):检索字符串,返回索引;
- trim( ) : 去除字符串两边的空格;
- substring():提取字符串中两个指定索引号之间的字符(含头不含尾)
4.3 JSON对象
4.3.1自定义对象
4.3.2 JSON对象
全称JavaScript对象标记法。
JSON是通过JS对象标记法书写的文本,可以理解为一种文本/数据格式。
多用作为数据载体,在网络中传输。
JSON内都是键值对。
注意要使用双引号。
4.4 BOM
- 概念:浏览器对象模型,允许JS与浏览器对话,JS将浏览器的各个组成部分封装为对象。
- 组成:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
此处只掌握 Window 与 Location 两个对象
Window
Location
4.4 DOM
右下角的结构称为dom树。
对对象的操作(对属性值的更改、调用方法…)直接查询参考书DOM部分对应Element元素对象部分。
示例:
<html>
<head>
<title>网页顶部标签页标题</title>
</head>
<body>
<span style="color: red;">666</span> <br>
<img id="img1" src="backimg.jpg" height="540PX"><br>
<div class="cls">BJFU</div> <br>
<div class="cls">123456</div> <br>
<input type="checkbox" name="hobby">C
<input type="checkbox" name="hobby">C++
<input type="checkbox" name="hobby">JAVA
</body>
<script>
let img = document.getElementById("img1");
alert(img);
let divs=document.getElementsByTagName("div");
for(let i = 0;i<divs.length;i++)
{
let t=divs[i];
t.innerHTML+='<span style="color: red;">666</span>';//注意此处为innerHTML而非innerText
}
let checkboxs = document.getElementsByName("hobby");
for (let i = 0; i< checkboxs.length; i++) {
const element = checkboxs[i];
element.checked=true;//使复选框全部选中
}
</script>
</html>
5 事件监听
- 事件:HTML事件是发生在HTML元素上的“事情”。比如:
- 按钮被点击;
- 鼠标移动到元素上;
- 按下键盘按键;
- 事件监听:JS可以在事件被侦测到时执行代码。
5.1 事件绑定
在JavaScript中,通过事件绑定可以在特定的事件发生时执行相应的代码。事件绑定可以通过两种方式实现:
- 通过HTML标签中的事件属性进行绑定:
<body>
<input type="button" onclick="on()" value="按钮1">
</body>
<script>
function on()
{
alert("按钮一被点击了!");
}
</script>
- 通过DOM元素属性绑定:
将函数名传递给DOM元素对象的onclick
属性
<body>
<input type="button" id="btn2" value="按钮2">
</body>
<script>
function on()
{
alert("按钮被点击了!");
}
document.getElementById("btn2").onclick=on;
</script>
或
<body>
<input type="button" id="btn2" value="按钮2">
</body>
<script>
document.getElementById("btn2").onclick=function()
{
alert("按钮被点击!");
}
</script>
5.2 常见事件
5.3 案例:
<html>
<head>
<title>标题</title>
</head>
<body>
<img id="light" src="lightOff.png" > <br>
<input type="button" id="btn_on" value="点亮">
<input type="button" id="btn_off" value="熄灭">
<br><br>
<input type="text" id="t" onblur="upper()" onfocus="lower()" value="CMD-137"><br><br>
<input type="checkbox" name="hobby" >电影
<input type="checkbox" name="hobby" >旅游
<input type="checkbox" name="hobby" >游戏 <br>
<input type="button" value="全选" onclick="allchoose()">
<input type="button" value="全不选" onclick="allnotchoose()">
</body>
<script>
//1.实现按钮开关灯
let light=document.getElementById("light");
document.getElementById("btn_on").onclick=function()
{
light.src="lightOn.png";
}
document.getElementById("btn_off").onclick=function()
{
light.src="lightOff.png";
}
//2.输入框鼠标聚焦后,展示小写;离焦后,展示大写;
function upper()
{
document.getElementById("t").value=document.getElementById("t").value.toUpperCase();
}
function lower()
{
document.getElementById("t").value=document.getElementById("t").value.toLowerCase();
}
//3.点击“全选”使所有复选框被选中,点击“全不选”使所有复选框不选中。
let checkboxs=document.getElementsByName("hobby");
function allchoose()
{
for (let i = 0; i < checkboxs.length; i++){
let e = checkboxs[i];
e.checked=true;
}
}
function allnotchoose()
{
for (let i = 0; i < checkboxs.length; i++) {
let e = checkboxs[i];
e.checked=false;
}
}
</script>
</html>
注意自命名函数时,尽量使用复杂名称,不要起易于内置关键字冲突的名字,比如本例中的all()~我debug了半天…~