引入方式
1、内部脚本:将JS代码定义在HTML页面中
JavaScript代码必须位于<script></script>标签之间
在HTML文档中,可以在任意地方,放置任意数量的<script>
一般会把脚本置于<body>元素的底部,可以改善显示速度
<script>
alert("hello javascript");
</script>
可放在代码中任意位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatibale" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-引入方式</title>
<!-- 内部脚本 -->
<script>
alert("hello javascript");
</script>
</head>
<body>
</body>
</html>
得到
2、外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中
外部JS文件中,只包含JS代码,不包含<script>标签
<script>标签不能自闭合:<script src="js/demo.js"/>错误
<script src="js/demo.js"></script>
alert("hello javascript")
将JS代码定义在外部JS文件中
在代码中引入js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatibale" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-引入方式</title>
<!-- 内部脚本 -->
<!-- <script>
alert("hello javascript");
</script> -->
<!-- 外部脚本 -->
<script src="js/demo.js"></script>
</head>
<body>
</body>
</html>
得到
基础语法
区分大小写:与java一样,变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释:单行注释://注释内容
多行注释:/*注释内容*/
大括号代表代码块
输出语句
使用window.alert()写入警告、window可省略
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
<script>
window.alert("HelloJavaScript");//浏览器弹出警告框
document.write("Hello JavaScript"); //写入HTML, 在浏览器展示
console.log("Hello JavaScript"); //写入浏览器控制台
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatibale" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-基础语法</title>
</head>
<body>
</body>
<script>
/* alert("JS"); */
//方式一:弹出警告框
window.alert("Hello JavaScript");
//方式二:写入html页面中
document.write("Hello JavaScript");
//方式三:控制台输出
console.log("Hello JavaScript");
</script>
</html>
方式一:
方式二:
方式三:
变量:Javascript中用var关键字(variable的缩写)来声明变量
Javascript是一门弱类型语言,变量可以存放不同类型的值
var a=20;
a="小明";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatibale" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-基础语法</title>
</head>
<body>
</body>
<script>
//var定义变量
// var a =10;
// a="小明";
// alert(a);
//特点1:作用域比较大,全局变量
{
var x=1;
}
alert(x);
//特点2:可以重复定义
{
var x=1;
var x="A";//覆盖原来的定义
}
alert(x);
</script>
</html>
let关键字定义变量,用法类似于var,但是所声明的变量,只在let关键字所在的代码块内有效,且不允许重复声明
const关键字,用来声明一个只读的常量,一旦声明,常量的值就不能改变
变量名需要遵守以下规则:
- 组成字符可以是任何字母、数字、下划线_或美元符号$
- 数字不能开头
- 建议使用驼峰命名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatibale" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-基础语法</title>
</head>
<body>
</body>
<script>
//var定义变量
// var a =10;
// a="小明";
// alert(a);
//特点1:作用域比较大,全局变量
//特点2:可以重复定义
/* {
var x=1;
var x="A";//覆盖原来的定义
}
alert(x); */
//let:局部变量、不能重复定义
/* {
let x=1;
alert(x);
} */
//alert(x);
//const:常量,不能改变
const pi=3.14;
//pi=3.15;
alert(pi);
</script>
</html>
数据类型
JavaScript中分为:原始类型和引用类型
原始数据
- number:数字(整数、小数、NaN(Not a Number))
- string:字符串,单双引皆可
- boolean:布尔,ture false
- null:对象为空
- undefined:方声明的变量为初始化时,该变量的默认值是undefined
使用typeof运算符可以获取数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatibale" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-数据类型</title>
</head>
<body>
</body>
<script>
//原始数据类型
alert (typeof 3);//number
alert(typeof 3.14) ;//number
alert (typeof "A");//string
alert (typeof 'Hello');//string
alert (typeof true);//boolean
alert (typeof false);//boolean
alert(typeof null);//object
var a
alert (typeof a)//undefined
</script>
</html>
运行得到
运算符
- 算数运算符:+,-,*,/,%,++,--
- 赋值运算符:=,+=,-=,*=,/=,%=
- 比较运算符:>,<,>=,<=,!=,==,===
- 逻辑运算符:&&,||,!
- 三元运算符:条件表达式?true_value:false_value
==与===
==会进行类型转换,===不会进行类型转换
var a=10;
alert(a=="10");//true,进行类型转换,类型相同;且数值相同
alert(a==="10");//false,类型相等
alert(a===10);//true,类型和值相等
字符串类型转为数字:
将字符串字面值转为数字,如果字面不是数字,则转为NaN
// 类型转换 - 其他类型转为数字
alert (parseInt ("12"));//12
alert (parseInt ("12A45") ) ;//12,当遇到的不是数字就停止
alert (parseInt ("A45"));//NaN
其他类型转为boolean
- Number:0和NaN为False,其他均转为true
- String:空字符串为false,其他均转为true
- Null和undefined:均转为false
if(0){
alert("0 转换为false");
}
if (NaN) {
alert("NaN 转换为false");
}
if(-1){
alert("除0和NaN其他数字都转为 true");
}
if(""){
alert("空字符串为 false,其他都是true");
}
if("s"){
alert("空字符串为 false,其他都是true");
}
if(null) {
alert("null 转化为false");
}
if (undefined) {
alert("undefined 转化为false");
}
流程控制语句
- if...else if...else
- switch
- for
- while
- do...while
函数
介绍:函数(方法)是被设计为执行特定任务的代码块
定义:JavaScript函数通过function关键字进行定义
注意:
- 形式参数不需要类型,因为JavaScript是弱语言类型;
- 返回值也不需要定义类型,可以在函数内部直接使用return返回即可
调用:函数名称(实际参数列表)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-函数</title>
</head>
<body>
</body>
<script>
//定义函数
//方式一
// function add(a,b){
// return a+b;
// }
//方式二
var sdd=function(a,b){
return a+b;
}
// 函数调用
var result=add(10,20);
alert(result);
// var result=add(10,20,30,40);
// alert(result);
//结果相同,JS中,函数调用可以传递任意个数的参数
</script>
</html>
对象
Array数组
定义
方式一:var 变量名=new Array(元素列表);
方式二:var 变量名=[元素列表];
var arr=new Array(1,2,3,4);//方式一
var arr=[1,2,3,4];//方式二
访问
arr[索引]=值;
arr[10]="hello";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-函数</title>
</head>
<body>
</body>
<script>
//定义数组
//var arr=new Array(1,2,3,4);
//var arr=[1,2,3,4];
// console.log(arr[0]);
// console.log(arr[1]);
//特点:长度可变、类型可变
var arr=[1,2,3,4];
arr[10]=50;
console.log(arr[8]);
console.log(arr[9]);
console.log(arr[10]);
arr[9]="A";
arr[8]=true;
console.log(arr);
</script>
</html>
属性
- length 设置或返回数组中元素的数量
方法
- forEach() 遍历数组中的每个有值的元素,并调用一次传入的函数
- push() 将新元素添加到数组的末尾,并返回新的长度
- splice() 从数组中删除元素
var arr=[1,2,3,4];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
var arr=[1,2,3,4];
arr[10]=50;
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log("-------------------------------");
//forEach:遍历数组中有值的元素
arr.forEach(function(e){
console.log(e);
})
for循环遍历数组中所有元素,而forEach遍历有值的元素
//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);//删除索引位2开始,2个元素
console.log(arr);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-函数</title>
</head>
<body>
</body>
<script>
//定义数组
//var arr=new Array(1,2,3,4);
//var arr=[1,2,3,4];
// console.log(arr[0]);
// console.log(arr[1]);
//特点:长度可变、类型可变
// var arr=[1,2,3,4];
// arr[10]=50;
// console.log(arr[8]);
// console.log(arr[9]);
// console.log(arr[10]);
// arr[9]="A";
// arr[8]=true;
// console.log(arr);
var arr=[1,2,3,4];
arr[10]=50;
// for (let i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
// console.log("-------------------------------");
// //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);//删除索引位2开始,2个元素
console.log(arr);
</script>
</html>
String字符串
定义
方法一:var 变量名=new String("...");
方法二:var 变量名="...";
属性
- length 字符串的长度
方法
- charAt() 返回在指定位置的字符
- indexOf() 检索字符串
- trim() 去除字符串两边的空格
- substring() 提取字符串中两个指定的索引之间的字符
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS-对象</title> </head> <body> </body> <script> //创建字符串对象 //var str=new String("hello string"); var str=" hello string "; console.log(str); //length console.log(str.length); //charAt console.log(str.charAt(4)); //indexOf console.log(str.indexOf("lo")); //trim var s=str.trim(); console.log(s); //substring(start,end)----------开始索引,结束索引(含头不含尾) console.log(s.substring(0,5)); </script> </html>
JavaScript自定义对象
定义格式:
var 对象名={
属性名1:属性值1,
属性名2:属性值2,
函数名称:function(形参列表){}
};
var user ={
name:"Tom",
age:20,
gender:"male",
eat:function(){
alert("用膳");
}
};
调用格式
对象名.属性名;
console.log(user.name);
对象名.函数名();
user.eat();
JSON
JavaScript Object Notation ,JavaScript对象标记法
JSON是通过JavaScript对象标记法书写的文本,由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输
与自定义对象类似,但属性名用双引号
value 的数据类型
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true或 false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
定义
var 变量名='{"key1":value1,"key2":value2}';
var userStr='{"name":"jerry","age":18,"addr":["北京","上海","西安"]}';
JSON字符串转为JS对象
var jsObject =JSON.parse(useStr);
JS对象转为JSON字符串
var jsonStr=JSON.stringify(jsObject);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象</title>
</head>
<body>
</body>
<script>
//自定义对象
// var user ={
// name:"Tom",
// age:20,
// gender:"male",
// // eat:function(){
// // alert("用膳");
// // }
// //也可简化写为以下形式
// eat(){
// alert("用膳");
// }
// };
// alert(user.name);
// user.eat();
//定义JSON
var jsonstr='{"name":"tom","age":18,"addr":["北京","上海","西安"]}';
alert(jsonstr.name);
//json字符串--js对象
var obj=JSON.parse(jsonstr);
alert(obj.name);
//js对象--json字符串
alert(JSON.stringify(obj));
</script>
</html>
BOM
概念:Browser Object Model 浏览器对象模型,允许JavaScript与浏览器的各个组成部分封装为对象
组成
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史浏览对象
- Location:地址栏对象
Window
介绍:浏览器窗口对象。
获取:直接使用window,其中window.可以省略。 window.alert("Hello Window"); alert("Hello Window");
属性
- history:对History对象的只读引用。
- location:用于窗口或框架的Location对象。
- navigator:对Navigator对象的只读引用。
方法
- alert():显示带有一段消息和一个确认按钮的警告框。
- confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
- setlnterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
- setTimeout():在指定的毫秒数后调用函数或计算表达式。
Location
介绍:地址栏对象
获取:使用window.Location获取,其中window.可省略
window.Location.属性
Location.属性
属性
- href:设置或返回完整的URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象</title>
</head>
<body>
</body>
<script>
// //获取
// window.alert("hello BOM");
// alert("hello BOM");
// //方法
// //confirm--对话框--确认:true 取消:false
// var flag=confirm("您确认删除该记录吗?");
// alert(flag);
// //定时器-setInterval--周期性的执行某一个函数
// var i=0;
// setInterval(function(){
// i++
// console.log("定时器执行了"+i+"次");
// },2000);//2秒
// //定时器-setTimeout--延迟指定时间执行一次
// setTimeout(function(){
// alert("js");
// },3000);//3秒
//location
alert(location.href);
location.href="https://www.itcast.cn";
//更改域名,并跳转到更改后
</script>
</html>
DOM
概念:Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对应的对象
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
JavaScript通过DOM,就能够对HTML进行操作
- 改变HTML元素的内容
- 改变HTML元素的样式(CSS)
- 对HTML DOM事件作出反应
- 添加和删除HTML元素
演示案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象</title>
</head>
<body>
<div style="font-size: 30px; text-align: center;" id="tbl">课程表</div>
<table width="800px" border="1" cellspacing="0" align="center">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center" class="data">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center" class="data">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀</td>
</tr>
<tr align="center" class="data">
<td>003</td>
<td>王五</td>
<td>83</td>
<td>很努力,不错</td>
</tr>
<tr align="center" class="data">
<td>004</td>
<td>赵六</td>
<td>98</td>
<td>666</td>
</tr>
</table>
<br>
<div style="text-align: center;">
<input id="bl" type="button" value="改变标题内容"onclick="fn1() ">
<input id="b2"type="button"value="改变标题颜色"onclick="fn2()">
<input id="b3" type="button"value="删除最后一个"onclick="fn3()">
</div>
</body>
<script>
function fnl(){
document.getElementById('tb1').innerHTML="学员成绩表";
}
function fn2(){
document.getElementById('tbl').style="font-size: 30px; text-align: center; color: red;"
}
function fn3(){
var trs = document.getElementsByClassName ('data') ;
trs[trs.length-1].remove () ;
}
</script>
</html>
DOM是W3C(万维网联盟)的标准,定义了访问HTML和XMLT
1. Core DOM-所有文档类型的标准模型
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
2. XML DOM-XML文档的标准模型
3. HTML DOM-HTML文档的标准模型
- Image: <img>
- Button : <input type='button'>
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');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象</title>
</head>
<body>
<img id="h1" src="./图像/1.jpg"> <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.获取Element元素
// //1.1 获取元素-根据ID获取
// var img=document.getElementById('h1');
// alert(img);
// //1.2 获取元素-根据标签获取
// 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 dis =document.getElementsByClassName('cls');
// for (let i = 0; i < dis.length; i++) {
// alert(dis[i]);
// }
//2.查询参考手册,属性,方法
var dis =document.getElementsByClassName('cls');
var div1=dis[0];
div1.innerHTML="666";
</script>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象</title>
</head>
<body>
<img id="h1" src="./图像/1.jpg" width="20%"> <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>
</html>
生成:
根据以下要求,更改
1.改变图片
2.将所有div标签的内容后面加上:very good(红色字体)
3.使所有的复选框呈现选中状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象</title>
</head>
<body>
<img id="h1" src="./图像/1.jpg" width="20%"> <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="./图像/2.jpg"
//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>
</html>
得到
事件监听
事件:HTML事件是发生在HTML元素上的“事情”。
比如
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听:JavaScript可以在事件被侦测到时 执行代码。
事件绑定
方式一:通过HTML标签中的事件属性进行绑定
方式二:通过DOM元素属性进行绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件</title>
</head>
<body>
<!-- 方式一:通过HTML标签中的事件属性进行绑定 -->
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<!-- 方式二:通过DOM元素属性进行绑定 -->
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
function on(){
alert("按钮1被点击了");
}
document.getElementById('btn2').onclick=function(){
alert("按钮2被点击了");
}
</script>
</html>
常见事件
- onclick 鼠标单击事件
- onblyr 元素失去焦点
- onfocus 元素获得焦点
- onload 某个页面或图像被完成加载
- onsubmit 当表单提交时触发该事件
- onkeydown 某个键盘的键被按下
- onmouseover 鼠标被移到某元素之上
- onmouseout 鼠标从某元素移开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件</title>
</head>
<body>
<body onl oad="load()">
<form action="" style="text-align: center;" onsubmit="subfn()">
<input type="text"name="username" onblur="bfn()" onfocus="ffn()"onkeydown="kfn() ">
<input id="bl" type="submit" value="提交">
<input id="b1" type="button" value="单击事件"onclick="fnl()">
</form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center" onm ouseover=over onm ouseout="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>
</html>
标签:Web,arr,console,log,--,JavaScript,alert,对象,var
From: https://blog.csdn.net/2301_77946674/article/details/140905222