JavaScript
1.JS简介
概述:
- 解释性脚本语言,是一种动态类型、弱类型、基于原型继承的语言,内置支持类型。
- 解释器称为JavaScript引擎,作为浏览器的一部分。
- 用来给HTML网页增加动态功能,定义网页的行为。
JavaScript包含三部分:
- ECMAScript语法
- 文档对象模型(DOM Document Object Model)
- 浏览器对象模型(BOM Browser Object Model)
在html中使用JS的三种方式:
<h1>javascript三种使用方式</h1>
<ul>
<li>1.在script标签中编写js:放在网页中任何位置,推荐网页的最后</li>
<li>2.在独立js文件中编写: 网页需要使用script标签关联js文件。</li>
<li>3.在标签的事件属性中编写: 要写事件属性</li>
</ul>
<input
type="button"
value="普通按钮"
onclick="alert('欢迎使用javascript')"
/>
<!--注意:关联外部js文件,必须要写script的结束标签。-->
<script src="js/myjs.js" type="text/javascript"></script>
<script type="text/javascript">
//单行注释
/*多行注释*/
// hello world
//第一种写法:弹出提示窗口
//alert("helloworld");
//第二种写法:文档中输出helloworld
//document.write("helloworld javascript");
//第三种写法:在控制台输出helloworld
console.log("helloworld javascript");
</script>
变量
变量:
内存中的一块存储空间。
JS中变量都用var关键字来声明,var是variable的缩写。
注意:
var num = 100;
- var是声明关键字,num是变量名
- 语句以分号结尾;分号可省略
命名规范:
- 包含字母、数字、下划线和美元符号
- 不能以数字开头
- 变量名不能是关键字
- 区分大小写
JavaScript注释有两种:
- // 单行注释
- /* 多行注释 */
<h1>javascript变量的使用</h1>
<ul>
<li>1 使用var(variable)关键字声明变量</li>
<li>2 弱类型语言,声明变量时不需要指定类型,赋值时决定类型,可以变化</li>
<li>
3 var是声明关键字,num是变量名,语句以分号结尾;分号可省略,推荐编写
</li>
</ul>
<h2>变量命名规范:</h2>
<ul>
<li>包含字母、数字、下划线和美元符号。</li>
<li>不能以数字开头。</li>
<li>变量名不能是关键字。</li>
<li>区分大小写</li>
</ul>
<script type="text/javascript">
//声明变量
var num;
//赋值
num = 100;
//声明同时赋值
var stuName = "灿灿"; //字符串使用双引号或单引号
var address = "北京昌平";
num = "helloword";
var abc = 100;
//使用变量
document.write("num:" + num + "<br/>");
document.write("stuName:" + stuName + "<br/>");
document.write("address:" + address + "<br/>");
document.write("abc:" + abc + "<br/>");
[wppay]
2.JS数据类型
- 基本类型: number,string,boolean,undefined,null
- string类型可用双引号或单引号表示
- 使用typeof运算符检测一个变量的类型
- 使用方式:typeof(变量名) 或 typeof 变量名
- 引用类型: Object、Array、String、Date、Number等等
- Object表示任何对象
- 创建数组时可不用指定长度
基本数据类型
<script type="text/javascript">
//number
var age = 20;
//string
var username = "张三";
//boolean
var flag = true;
//undefined
var address;
//null
var email = null;
document.write("====================基本类型====================");
document.write("<br/>");
document.write("age:" + age + "---" + typeof age);
document.write("<br/>");
document.write("username:" + username + "---" + typeof username);
document.write("<br/>");
document.write("flag:" + flag + "---" + typeof flag);
document.write("<br/>");
document.write("address:" + address + "---" + typeof address);
document.write("<br/>");
document.write("email:" + email + "---" + typeof email);
document.write("<br/>");
</script>
引用数据类型
Object
<script>
//引用类型
document.write("=====================引用类型 ===================");
document.write("<br/>");
var obj = new Object();
var date = new Date();
document.write(
"obj:" + obj + "----" + typeof obj + "-------" + (obj instanceof Object)
);
document.write("<br/>");
document.write("date:" + date + "----" + typeof date);
//创建人对象
var person = new Object();
//动态添加属性和方法(函数)
person.name = "灿灿";
person.age = 20;
person.address = "上海";
person.show = function () {
alert(this.name + "..." + this.age + "..." + this.address);
};
person.show();
//推荐json表示法创建对象
var person2 = { name: "李四", age: 20, address: "广州" };
alert(person2.name + "..." + person2.age + "..." + person2.address);
/*像java一样创建类 了解*/
function Animal() {
//属性
this.breed;
this.age;
this.sex;
//方法 (函数
this.show = function () {
alert(this.breed + "----" + this.age + "----" + this.sex);
};
}
var dog = new Object();
dog.breed = "哈士奇";
dog.age = 2;
dog.sex = "公";
dog.show = function () {
alert(this.breed + "----" + this.age + "----" + this.sex);
};
dog.show();
</script>
Array:数组
<script>
// 1.new对象的方式创建数组
var arr = new Array();
arr[0] = 15;
arr[1] = 20;
document.write(arr.length + "<br/>");
document.write(typeof arr + "<br/>");
for (var i = 0; i < arr.length; i++) {
document.write(arr[i] + " ");
}
document.write("<br/>");
for (var i in arr) {
document.write(i + " ");
}
document.write("<br/>");
//2.其他方式添加移除元素
arr.push(100);
document.write("push之后:" + arr.length);
document.write("<br/>");
arr.pop();
document.write("pop之后:" + arr.length);
document.write("<br/>");
// 3.Array不仅可以做数组也可以做Map
var hashmap = new Array();
hashmap["cn"] = "中国";
hashmap["uk"] = "英国";
hashmap.kor = "韩国";
// 当作hsahmap时长度为0
document.write(hashmap.length + "<br/>");
for (var i in hashmap) {
document.write(hashmap[i]);
}
document.write("<br/>");
// 4.使用JSON表示法创建数组 JavaScript Object Notation
var arr2 = [12, 3, 432, 3.5];
document.write(arr2.length);
document.write("<br/>");
// 在数组中创建对象
var arr3 = [
{ name: "lz", age: 20 },
{ name: "wl", age: 40 },
];
for (let i = 0; i < arr3.length; i++) {
document.write(arr3[i].name + " " + arr3[i].age + " ");
}
</script>
String:字符串
<script>
// 1.基本使用
var username = "张三";
var address = new String("北京");
document.write(typeof username);
document.write("<br/>");
document.write(typeof address);
var str1 = "hello";
var str2 = "hello";
document.write(str1 == str2);
document.write("<br/>");
var str3 = new String("hello");
var str4 = new String("hello");
document.write(str3 == str4);
document.write("<br/>");
document.write(str1 == str3);
document.write("<br/>");
// 2.常用的方法 更多方法看菜鸟教程等
document.write(str1.charAt(0));
document.write("<br/>");
document.write(str1.substring(0, 3));
</script>
3.JS运算符
算术运算符
:+ 、- 、* 、/ 、% 、++、--
// 2.5
document.write(5 / 2);
document.write("<br/>");
// 1
document.write(5 % 2);
赋值运算符
:= 、+=、-=、*=、/=、%=
逻辑运算符
:&&、||、!
关系运算符
:==、!=、<、<=、>、>=、===
- ===全等于(值和类型完全相同)
三目运算符
:布尔表达式? 结果1 : 结果2;
分支结构
分支结构:if
<script>
/* if */
var score = 99;
if (score >= 90) {
document.write("优秀");
} else {
document.write("加油");
}
document.write("<br/>");
// 判断条件可以为:布尔值、变量
// 如果判断条件为变量时,当变量值为0、null、undefined、
// NaN、false表示false不打印,其他情况为true
// 使用的变量必须先进行声明,不声明会报错
if (score) {
document.write("成绩为:" + score);
}
document.write("<br/>");
var obj = new Object();
if (obj.haha) {
//undefined
document.write(obj.haha);
}
document.write("<br/>");
</script>
分支结构:switch
<!-- switch_case -->
<script>
var count = 1;
switch (count) {
case 1:
document.write("1");
break;
case 2:
document.write("2");
}
</script>
循环结构
for循环 while循环 do_while循环
<script>
for (let i = 0; i < 100; i++) {
var str = "你好";
let str2 = "hello world";
document.write(i + " ");
}
document.write(i);
document.write(str);
document.write(window.i);
document.write(window.str);
// var作用范围全局
// let作用范围当前大括号内
</script>
break与continue:
- break用于结束循环、switch。
- continue用于结束本次循环、继续下—次循环。
4.JS函数
概念:封装特定任务功能的代码块,使用function关键字定义函数。
JS函数基础
<!-- 1.概念:封装特定任务功能的代码块
使用function关键字定义函数
-->
<script>
function show() {
for (let i = 1; i <= 9; i++) {
for (let j = 0; j <= i; j++) {
document.write(j + "*" + i + "=" + i * j);
}
document.write("<br/>");
}
}
// 2.调用函数
show();
// 2.2 自执行匿名函数
(function () {
document.write("自执行匿名函数");
})();
//2.3 事件调用
</script>
<input type="button" onclick="show()" />
<!-- 3.定义带参数带返回值的 -->
<script>
function add(n1, n2) {
return n1 + n2;
}
var num = add(1, 2);
document.write(num);
</script>
弹出函数
<input type="button" onclick="alert('你好')" value="alert" />
<input type="button" onclick="confirm('确认删除吗')" value="confirm" />
<input type="button" onclick="prompt('请输入内容')" value="prompt" />
系统函数
<script>
//isNaN()判断这个数字是否不是一个数字
// 不是返回 true ,是返回false
document.write(parseInt("123"));
document.write(parseFloat("12.22"));
document.write(isNaN("qwe"));
</script>
JS点击事件
<body onload="pageload()">
<!--
onclick:当点击网页元素时执行
onchange:当内容改变
onsubmit:表单提交时执行
onload:当页码加载完毕执行(只能添加到body里面)
onfocus:获取焦点时执行
onblur:失去焦点时执行
onmouseover:鼠标移动到上面时
onmouseout:鼠标移出上面时
onmousemove:鼠标再元素中移动时执行
以下未写案例
onkeypress:键盘按下弹起时执行
onkeydown:键盘按下时执行
onkeyup:按下键盘弹起时执行
-->
<form action="" method="POST" onsubmit="return check()">
用户名:<input
id="username"
type="text"
name="usernaem"
onchange="change1(this)"
onfocus="focus1(this)"
onblur="blur1(this)"
/><br />
<input type="submit" value="提交" />
</form>
<script>
function check() {
var username = document.getElementById("username").value;
if (username == null || username.trim().length == 0) {
alert("请输入用户名");
return false;
}
}
function change1(obj) {
alert(obj.value);
}
function focus1(obj) {
obj.style.backgroundColor = "yellow";
}
function blur1(obj) {
obj.style.backgroundColor = "#00ffff";
}
</script>
<!--onmouseover onmouseout -->
<div
style="width: 200px; height: 100px; background-color: #00ffff"
onmouseover="over(this)"
onmouseout="out(this)"
></div>
<script>
function over(obj) {
// 修改div的背景颜色
obj.style.backgroundColor = "red";
}
function out(obj) {
obj.style.backgroundColor = "#00ffff";
}
</script>
<!-- onloaad 只能写在body里面 -->
<script>
function pageload() {
alert("页面加载完毕");
}
</script>
</body>
5.JS的DOM操作
概述:
- 通过HTML DOM,可访问HTML 文档的所有元素。
- 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
查找到元素(3种方式)
<body>
<ul class="class1">
<li id="demo">内容</li>
<li id="demo2">内容2</li>
<li id="demo3">内容3</li>
</ul>
<script>
//第一步:先查找到元素(3种方式)
// 方式1:依据元素的id
var demo1 = document.getElementById("demo");
console.log(demo1);
console.log(demo1.innerHTML); //打印内容
console.log(demo1.nodeType); //元素节点是1,属性节点是2,文本节点是3,注释节点是8
// 方式2:依据标签名称
var demo2 = document.getElementsByTagName("li");
console.log(demo2);
for (let i = 0; i < demo2.length; i++) {
console.log(demo2[i].innerHTML);
}
// 方式3:依据class样式名称
var demo3 = document.getElementsByClassName("class1");
console.log(demo3);
for (let i = 0; i < demo3.length; i++) {
console.log(demo3[i].innerHTML);
}
</script>
</body>
获取与设置元素/属性内容
<body>
<p id="demo1" style="background-color: aqua">内<span>容</span></p>
<input type="button" value="修改1" onclick="modify()" />
<input type="button" value="修改2" onclick="modify2()" />
<input id="input1" type="text" value="默认" />
<img src="/1.png" id="img1" alt="为空" />
<script>
// 1.获取内容
var demo1 = document.getElementById("demo1");
// 1.1 只获取内容不获取标签
console.log(demo1.innerHTML);
// 1.2 如果内容中有标签也可以获取到
console.log(demo1.innerText);
// 2.设置内容
// 2.1 innerHTML :只设置内容不设置标签
function modify() {
var demo1 = document.getElementById("demo1");
demo1.innerHTML = "<span>修改后的内容</span>";
}
// 2.2 innerText :标签也会设置上
function modify2() {
var demo1 = document.getElementById("demo1");
demo1.innerText = "<span>修改后的内容</span>";
}
// 3.获取标签属性
// 3.1 直接写属性
console.log(demo1.id);
console.log(demo1.style);
// 3.2 通过方法获取
console.log(demo1.getAttribute("id").id);
//4.设置标签属性
demo1.style.backgroundColor = "red";
demo1.setAttribute("style", "background-color:green");
//5.设置input的value值
var demo1 = document.getElementById("input1");
demo1.value = "修改后的内容";
//6.让img在刷新页面是一直请求
var demo1 = document.getElementById("img1");
demo1.setAttribute("src", "/1.png?n=" + Math.random());
</script>
</body>
设置CSS样式
<body>
<style>
#demo {
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
<div id="demo">你好</div>
<input type="button" value="获取样式" onclick="click1()" />
<input type="button" value="设置样式" onclick="click2()" />
<script>
function click1() {
var i = document.getElementById("demo");
alert(getCss(i, "width"));
}
function click2() {
var p2 = document.getElementById("demo");
p2.style.fontSize = "22px";
p2.style.backgroundColor = "orange";
}
// 为了兼容性考虑设置通用属性
function getCss(obj, attr) {
//chrome safira
if (window.getComputedStyle) {
return window.getComputedStyle(obj)[attr];
} else if (window.currentStyle) {
return obj.currentStyle[attr];
} else {
return null;
}
}
</script>
</body>
设置js事件
<body>
<h1>JavaScriptDOM操作4:设置js事件</h1>
<input id="btn1" type="button" value="按钮1" />
<input id="btn2" type="button" value="按钮2" />
<input id="username" type="text" name="username" />
<div id="div1" style="background-color: skyblue; width: 200px; height: 200px;">
<div id="div2" style="background-color: brown; width: 100px; height: 100px;"></div>
</div>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var username = document.getElementById("username");
// 设置onclick事件
// 情况1:第二个click会覆盖第一个click
/* btn1.onclick = function() {
alert("恭喜你,中奖了1");
}
btn1.onclick = function() {
alert("恭喜你,中奖了2");
}*/
btn2.ondblclick = function() {
alert("双击加关注");
}
//页面加载完毕执行
window.onload = function() {
alert("页面加载完毕了...");
}
//点击输入框时修改样式
username.onfocus = function() {
this.style.backgroundColor = "orange";
}
// 添加监听事件,让事件不会被覆盖
// 冒泡:点击事件从里到外
// 捕获:点击事件从外到里
function f1() {
alert("恭喜你,中奖了1");
}
function f2() {
alert("恭喜你,中奖了2");
}
//使用事件监听的方式添加事件
btn1.addEventListener("click", f1);
btn1.addEventListener("click", f2);
// 移除监听事件
//btn1.removeEventListener("click", f1);
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener("click", function() {
alert("div1");
}, true);//默认为冒泡,设置true为捕获
div2.addEventListener("click", function() {
alert("div2");
}, true);
</script>
</body>
创建和删除元素
<body>
<h1>javascriptDOM操作1:创建和删除元素</h1>
<div id="box">
<span id="myspan">这是一个神奇的网站</span>
</div>
<input type="button" value="创建元素" onclick="click1()" />
<input type="button" value="删除元素" onclick="click2()" />
<script type="text/javascript">
function click1() {
//1 创建img标签
var myimg = document.createElement("img");
//2 设置属性
myimg.src = "img/003.jpg";
//3 添加网页中
//3.1 追加
// var box=document.getElementById("box");
// box.appendChild(myimg);
//3.2 插入
var box = document.getElementById("box");
var myspan = document.getElementById("myspan");
box.insertBefore(myimg, myspan);
}
function click2() {
var box = document.getElementById("box");
//直接删除父元素
//box.remove();
//删除孩子节点
// var myspan=document.getElementById("myspan");
// box.removeChild(myspan);
//清空box中孩子节点
var count = box.children.length;
for (var i = 0; i < count; i++) {
box.removeChild(box.children[0]);
}
}
</script>
</body>
6.浏览器BOM
概述:
- 浏览器对象模型(Browser Object Model) 使JavaScript 有能力与浏览器"对话"。
- 现代浏览器实现了和JavaScript 交互性方面的相同方法和属性,因此常被认为是
BOM的方法和属性。
window 对象
概述:
- 所有浏览器都支持window对象,它表示浏览器窗口。
- JavaScript 全局对象、函数以及变量均自动成为window 对象的成员。
属性:
- window.innerHeight:内部高度,不包括滚动条和工具栏。
- window.innerWidth:内部宽度,不包括滚动条和工具栏。
方法:
- open():打开新的窗口。
- close():关闭窗口。
<script>
window.document.getElementById("id");
//window.alert("text");
// 变量的分类:全局变量和局部变量
// 全局变量定义在函数外部 作用全局 都会自动成为window的属性
// 局部变量定义在函数内部 作用函数
var num = 100;
//alert(window.num);
function show() {
var num = 200;
alert(num);
}
// window对象的使用
// 浏览器的内部高度和宽度
// alert(window.innerHeight);
// alert(window.innerWidth);
// window对象中与BOM有关的方法
// 打开窗口
var newwin = window.open("http://www.baidu.com", "_blank");
// 关闭当前窗口
window.close();
// 关闭打开的窗口
newwin.close();
</script>
screen 对象
- 表示当前屏幕对象。
- 属性:
- screen.availWidth:可用的屏幕宽度
- screen.availHeight:可用的屏幕高度
<script>
// 固定不变 屏幕的大小
// 获取宽度和高度
alert(window.screen.availWidth);
alert(window.screen.availHeight);
</script>
location 对象
概述:
- location 对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面。
属性:
方法:
reload()重新加载页面。
<script>
// location对象的使用
// 当前浏览器打开的域名
console.log(window.location.href);
// 主机名或域名
console.log(window.location.hostname);
// 协议
console.log(window.location.protocol);
// 端口号
console.log(window.location.port);
// 方法:重新加载页面
//window.location.reload();
</script>
history 对象
概述:
- 包含用户在浏览器窗口中访问过的URL。
属性:
- length:返回浏览器历史列表中的URL 数量。
方法:
<script>
//属性:显示历史对象的记录 (当前页面后退前进有几个)
console.log(window.history.length);
//方法:
//后退一个页面
window.history.back();
//前进一个页面
window.history.forward();
//加载到具体的页面
window.history.go(2);
</script>
navigator 对象
概述:
- navigator对象包含有关浏览器的信息。
属性:
<script>
// 获取浏览器的信息
console.log(window.navigator.appName);
console.log(window.navigator.appVersion);
console.log(window.navigator.appCodeName);
console.log(window.navigator.platform);
console.log(window.navigator.userAgent);
</script>
JavaScript 定时器
<script>
// 显示当前时间
var date = new Date();
console.log(date);
// 定时器函数
// 1.周期执行
var tid = setInterval(() => {
var date = new Date();
console.log(date);
}, 1000);
// 清除周期执行
clearInterval(tid);
// 2.在固定时间之后执行一次调用函数
var tid2 = setTimeout(() => {
location = "/index.html";
}, 3000);
// 清除固定时间执行
clearTimeout(tid2);
</script>
[/wppay]