文章目录
JavaScript基础
JavaScript介绍
JacaScript是互联网上最流行的脚本语言,可用于WEB和HTML,更广泛用于服务器、PC端、移动端
JavaScript脚本语言:
- JS是一种轻量级的编程语言
- JS是可插入HTML页面的编程代码
- JS插入HTML页面后,可有所有的浏览器执行
JavaScript实现
-
JS用法:
- HTML中的脚本必须位于< script>>/< script>标签之间
- 脚本可被放置在HTML页面的< body>和 < head>部分中
-
JS标签
-
JS使用限制
- 在HTML中,不限制脚本数量
- 通常会把脚本放置于< head>标签中,以不干扰页面内容
JavaScript输出
-
JS通常用来操作HTML
-
文档输出:
document.write("<p>this is my first JS</p>");
JavaScript语法
-
JS语句:向浏览器发出命令,告诉浏览器该做什么
-
分号:可选项
-
JS代码:执行顺序按编写顺序执行
-
标识符:
- 必须以字母、下划线或美元符号开始
- JS关键字不可用
-
空格: JS会忽略多余的空格
-
代码换行
-
保留字
JavaScript注释
- 单行注释:
- //
- 多行注释: /**/
JavaScript变量
存储信息的容器
JavaScript数据类型
- 字符串(String)
- 数字(Number)
- 布尔(Boolean)
- 数组(Array)
- 对象(Object)
- 空(null)
- 未定义
- 可以通过复制为null的方式清除变量
// No.1
var arr=["jjike", "fjdk", 3, 4];
document.write(arr[1]);
// No.2
var num = new Array( );
num[0] = 1;
num[1] = 2;
num[3] = 4;
document.write(num[0]);
// N0.3
var num = new Array("hello","guys","welcome");
document.write(num[0]);
JavaScript 语法
JavaScript运算符
- 算术运算符
- 赋值运算符
- 字符串操作
- 比较运算符
===
!==
- 逻辑运算符
- 条件运算符
// 孩子啊,长点心吧
<p>i = 10, j = 10; i + j = ?</p>
<p id="sumid"></p>
<button onclick="mysum()">结果</button>
<script>
function mysum() {
var i = 10;
var j = 10;
var m = i + j;
document.getElementById("sumid").innerHTML=m;
}
</script>
JavaScript条件语句
- if…else
- switch
JavaScript循环语句
- for循环 、 for/in
- while 循环、 do … while 循环
JavaScript跳转语句
- break
- continue
JavaScript 函数
了解函数
- 函数:由事件驱动的或者当它被调用时执行的可重复使用的代码块
<script>
function demo(a, b) {
var sum = a+b;
return sum;
}
var v1 = demo(10, 10);
alert(v1); // 弹出对话框
</script>
定义函数
- 定义函数
function 函数名(){
函数体;
}
- 注意 :大小写极其敏感
函数调用
调用方式:
- 在< script>标签内调用
- 在HTML文件中调用
<script>
function demo() {
var a = 10;
var b = 10;
var sum = a+b;
alert(sum);
}
</script>
<button onclik="demo()">按钮<button>
带参数的函数
带返回值的函数
全局变量和局部变量
JavaScript异常捕获
异常捕获
- 异常:当JS引擎执行JS代码时,发生了错误,导致程序停止运行
- 异常抛出:当异常产生,并且将这个异常生成一个错误信息
- 异常捕获:
try{
发生异常的代码块;
}catch(err){
错误信息处理;
}
<script>
function demo() {
try{
alert(str);
}catch(err){
alert(err)
}
}
demo();
</script>
- Throw语句: 通过throw语句创建一个自定义错误
<body>
<form>
<input id="txt" type="text">
<input id="btn" type="button" onclick="demo()" value="按钮">
</form>
<script>
function demo() {
try {
var e = document.getElementById("txt").value;
if (e == "") {
throw "请输入";
}
}catch(err){
alert(err);
}
}
demo();
</script>
</body>
事件
- 事件:可以被JS侦测到的行为
- 主要事件
事件 | 描述 |
---|---|
onClick | 单击事件 |
onMouseOver | 鼠标经过事件 |
onMouseOut | 鼠标移出事件 |
onChange | 文本内容改变事件 |
onSelect | 文本框选中事件 |
onFocus | 光标聚集事件 |
onBlur | 移动光标事件 |
onLoad | 网页加载事件 |
onUnload | 关闭网页事件 |
//页面效果need
// HIML
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
<script>
function onOver(ooj){
ooj.innerHTML = "hello";
}
function onOut(ooj) {
ooj.innerHTML = "world";
}
</script>
// CSS
.div{
width: 100px;
height: 100px;
background-color: #99CC33;
}
//账号输入,密码输入need
<form>
<input type="txt" onchange="changedemo(this)">
</form>
<script>
function changedemo(bg) {
alert("hello,内容被改了");
}
</script>
JavaScriptDOM对象简介
DOM简介
- HTML DOM:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
DOM操作HTML
- JS能够改变页面中的所有HTML元素
- JS能够改变页面中的所有HTML属性
- JS能够改变页面中的所有CSS样式
- JS能够对页面中的所有事件作出反应
DOM操作CSS
- 改变HTML输出流
不要在文档加载完成之后使用document.write(),这样会覆盖该文档
// 覆盖文档
<p>hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo() {
document.write("world");
}
</script>
- 寻找元素
- 通过id找到HTML元素
- 通过标签名找到HTML元素
-
改变HTML内容: 使用属性:innerHTML
-
改变HTML属性: 使用属性: attribute
-
通过DOM对象改变CSS
语法:document.getElementById(id).style.property=new style
DOM EventListener
-
DOM EventListener
方法: addEventListener() / removeEventListner() -
addEventListener()
方法用于向指定元素添加事件句柄 -
removeEventListener();
移除方法添加的事件句柄