JavaScript基础
JavaScript:跨平台、面向对象的脚本语言
(脚本语言:不需要编译,浏览器解释完直接运行)
作用:控制网页行为,使网页可交互
ps:JavaScript与Java是两门完全不同的语言
本文为学习黑马程序员JavaWeb开发教程中JS部分学习笔记
文章目录
一、JS引入方式
JS代码与html页面代码的结合方式
1.内部脚本
将JS代码定义在HTML中
写<script></script>标签,将JS代码写在该标签内(该标签可写在任意地方,任意数量,一般写在<body>标签底部)
<script>
alert("Hello JavaScript")
</script>
2.外部脚本
将JS代码定义在外部JS文件中,然后引入到HTML页面中
二、JS基础语法
1.书写语法
-
区分大小写
-
每行结尾分号可有可无(建议写)
-
注释:
- 单行注释://注释内容(Ctrl+/)
- 多行注释:/* 注释内容 */ (Ctrl+Shift+/)
-
输出语句:
-
使用window.alert()写入警告框
-
使用document.write()写入HTML输出
-
使用console.log()写入浏览器控制台
-
2.变量
JavaScript是一门弱类型语言,变量可以存放不同类型的值
-
var关键字声明全局变量,可以重复定义
-
let关键字声明局部变量,不可重复定义
-
const关键字定义常量,不能改变
3.数据类型、运算符、流程控制语句
定义变量时不需要指定数据类型,但JS中是有数据类型的
(1)数据类型
- 原始类型
- number
- string:单双引号都可
- boolean
- null:对象为空
- undefined:当声明的变量未初始化时,该变量的默认值是undefined
- 引用类型
- 对象
- 数组
- 函数
- 正则
- 日期
使用typeof运算符可以获取数据类型
var a=20;
alert(typeof a);
-
类型转换
-
其他类型—>数字
使用parseInt()
alert(parseInt("12")); //12 alert(parseInt("12A45")); //12(从左到右,不是数字为止) alert(parseInt("A45")); //NaN(not a number)
-
其他类型—>boolean
除了0、NaN、空字符串、Null、undefined为false,其他都为true
-
(2)运算符
-
算术运算符:+,-,*,/,%,++,–
-
赋值运算符:=,+=,-=,*=,/=,%=
-
比较运算符:>,<,>=,<=,!=,==,===(==会进行类型转换,===不会进行类型转换)
(3)流程控制语句
- if…else if…else
- switch
- for
- while
- do…while
三、JS函数
1.定义函数:
function 函数名(参数,...){
函数内容;
return 返回值;
}
var 函数名=function(参数,...){
函数内容;
return 返回值;
}
2.调用函数:
var result = 函数名(参数,...)
(函数调用时可以传递任意个参数)
示例:
//定义函数-1
function add(a,b){
return a+b;
}
//定义函数-2
var add = function(a,b){
return a+b;
}
//函数调用
var result = add(10,20);
四、JS对象
1.Array
Array对象用于定义数组。
(1)定义数组
①var arr=new Array(1,2,3,4);
②var arr=[1,2,3,4];
(2)特点
长度可变,类型可变
(3)属性
length
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
(4)方法
①forEach() :遍历数组中有值的元素
arr.forEach(function(e)){
console.log(e);
}
②push() :添加元素到数组末尾
eg. arr.push(7,8,9);
③splice() :删除元素
arr.splice(start,count);
eg. arr.splice(2,2);
(5)ES6 箭头函数:
(…) => {…} 简化函数定义
arr.forEach((e)) => {
console.log(e);
}
2.String
(1)定义字符串
①var str=new String("Hello String");
②var str="Hello String";
(2)属性
length
console.log(str.length);
(3)方法
①charAt() :返回在指定位置的字符
console.log(str.charAt(4));
②indexOf() :检索字符串的位置
console.log(str.indexOf("lo"));
③trim() :去除字符串中的空格
var s=str.trim(); console.log(s);
④substring() :截取字符串,含头不含尾
console.log(s.substring(0,5));
3.JSON
JavaScript自定义对象
定义格式:
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3
函数名: function(形参列表){}
函数名(形参列表){} //简写
}
调用格式:
对象名.属性名
对象名.函数名()
JSON是通过JavaScript对象标记法书写的文本
因其语法简单、层次结构鲜明,多用于作为数据载体,在网络中进行数据传输(前后端)
(1)定义JSON
var 变量名 = ‘{“key1”:value1,“key2”:value2}’;
eg.var jsonstr={"name":"Tom","age":10,"addr":["北京","上海"]}; alert(jsonstr.addr[1]);
(2)JSON字符串—>JS对象
使用parse()方法
eg.var ovj=JSON.parse(jsonstr); alert(obj.name);
(3)JS对象—>JSON字符串
使用stringify()方法
eg.JSON.stringify(obj);
4.BOM
浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装成对象
(1)组成
①Window:浏览器窗口对象
-
获取:
直接使用window,其中window.可以省略
eg.
window.alert("Hello Window");
alert("Hello Window");
-
属性:
(用来获取其他BOM对象)
history:对History对象的只读引用
location:用于窗口或框架的Location对象
navigator:对Navigator对象的只读引用
-
方法:
alert():显示带有一段消息和一个确认按钮的警告框
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
//confirm - 对话框 //确认:true,取消:false var flag=confirm("您确认删除该记录吗?");
setlnterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
//setInterval - 定时器 //周期性的执行某一函数 var i=0; setInterval(function(){ i++; console.log("定时器执行了"+i+"次"); },2000);
setTimeout():在指定的毫秒数后调用函数或计算表达式
//setTimeout - 定时器 //延迟指定时间执行一次 setTimeout(function(){ alert("JS"); },3000);
②Navigator:浏览器对象
③Screen:屏幕对象
④History:历史记录对象
⑤Location:地址栏对象
-
获取:
使用window.location获取,其中window.可以省略
window.location.属性
location.属性
-
属性:
href:设置或返回完整的URL
alert(location.href);
//弹出当前地址栏的URL信息location.href="http://www.itcast.cn";
//跳转到该地址
5.DOM
(1)概念:文档对象模型
(2)将标记语言的各个组成部分封装为对应的对象:
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
(3)JavaScript通过DOM,就能够对HTML进行操作
//1.获取Element元素
//1.1 获取元素 - 根据ID获取
var img=document.getElementById('h1');
alert(img);//返回单个对象
//1.2 获取元素 - 根据标签获取
vardivs=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.查询参考手册,属性、方法
//<a scr=>参考手册链接<\a> !!!!!!!!
var divs=document.getElementsByClassName('cls');
var div1=divs[0];
div1.innerHTML='hello';
案例:
要求:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-DOM-案例</title>
</head>
<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";
//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>
五、JS事件监听
事件:HTML事件是发生在HTML元素上的“事情”。
比如:按钮被点击、鼠标移动到元素上、按下键盘按钮…
事件监听:JavaScript可以在事件被侦测到时执行代码
事件绑定:
方法一:通过HTML标签中的事件属性进行绑定
<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
</body>
<script>
function on(){
alert("按钮1被点击了...");
}
</script>
方法二:通过DOM元素属性绑定
<body>
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
document.getElementById("btn2").onclick=function(){
alert("按钮2被点击了...");
}
</script>
常见事件:
//onload:页面加载完毕
function load(){
console.log("页面加载完毕...");
}
//在HTML标签上添加属性onload="load()"
//onclick:鼠标点击
function fn1(){
console.log("我被点击了");
}
//在HTML标签上添加属性onclick="fn1()"
//onblur:失去焦点
function bfn(){
console.log("失去焦点...");
}
//在HTML标签上添加属性onblur="bfn()"
//onfocus:元素获得焦点
function ffn(){
console.log("获得焦点...");
}
//在HTML标签上添加属性onfocus="ffn()"
//onkeydown:某个键盘的键被按下
function kfn(){
console.log("键盘被按下了...");
}
//在HTML标签上添加属性onkeydown="kfn()"
//onmouseover:鼠标移动到元素上
function over(){
console.log("鼠标移入了...");
}
//在HTML标签上添加属性onmouseover="over()"
//onmouseout:鼠标移出某元素
function out(){
console.log("鼠标移出了...");
}
//在HTML标签上添加属性onmouseout="out()"
//onsubmit:提交表单
function subfn(){
alert("表单被提交了...");
}
//在HTML标签上添加属性onsubmit="subfn()"
案例:
要求:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件-案例</title>
</head>
<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;
}
}
</script>
</html>
标签:function,JavaWeb,对象,JavaScript,JS,alert,var,基础知识,属性
From: https://blog.csdn.net/qq_73589232/article/details/143361989