WEB——04.javaScript
WEB——04.javaScript
作用：负责给页面添加动态效果。
语言特点：
-
属于弱类型语言：
- java: String name = “tom”; int age = 18; name=30;报错
- javaScript: let name=“tom”; let age = 18; name=30;不报错
-
属于脚本语言，不需要编译直接解析运行。
-
基于面向对象
-
安全性强:JS语言只能访问浏览器内部的数据，浏览器以外的程序或磁盘中的数据禁止访问
-
交互性强：因为JS语言是嵌入在Html页面中的语言，随着页面一起传递到客户端，运行在客户端的语言，离用户更近一些，java语言运行在服务器的语言，所以JS语言交互性更强。
如何在html页面中添加js代码。当事件发生执行
- 内联：在标签的事件属性中添加js代码，当事件触发时执行。
- 事件：系统给提供的特点的时间点。
- 点击事件：在用户点击元素时触发的时间点
<!--onclick点击事件属性 alert() 弹出提示框-->
<input type="text" value="按钮" onclick="alert('内联成功!')">
- 内部：在html页面中任意位置添加script标签，在标签体内写js代码
<script>
console.log("内部引入成功!");
</script>
- 外部：在单独的js文件中写js代码，在html页面中通过script标签属性引入
<!--外部引入-->
<script src="my.js"></script>
变量
-
js属于弱类型语言
- java: String name = “tom”; int age = 18; name=30;报错
- javaScript: let name=“tom”; let age = 18; name=30;不报错
-
let和var关键字的区别
-
let和var关键字的区别使用let声明的变量, 作用域和Java语言一样
-
使用var声明的变量, 相当于声明的是一个全局变量
-
举例:
java:
for(int i=0;i<10;i++){
int y=i+1;
}
int z = y-i; 报错: i超出了作用域
JavaScript:
for(let i=0;i<10;i++){
let y=i+1;
}
let z = y-i; 不会报错,但是y和i 是访问不到的
for(var i=0;i<10;i++){
var y=i+1;
}
var z = y-i; y和i是可以访问的
-
数据类型
-
JavaScript中只有引用类型(对象类型)
-
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
- 常见的对象类型
- number：数值类型，相当于java中所有数值类型的综合
- string：字符串，可以用单引号或双引号修饰
- boolean：布尔值。true/false
- undefined：未定义，当变量只声明不赋值时，变量的类型为未定义
- 获取变量类型的方式：typeof 变量
-
**注：***Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
-
数组:
var cars = new Array();
cars[0] = "Aaab";
cars[1] = "Volvo";
cars[2] = "BMW";
var cars = new Array("Aaab","Volvo","BMW");
var cars = ["Saab","Volvo","BMW"];
- JavaScript对象
对象由花括号分割。在括号内部，对象的属性以名称和值对的形式(name:value)来定义。属性由逗号分隔。
var person = {firstname:"John",lastnamr:"Doe",id:5566};
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
name=person.lastname;
name=person["lastname"];
- 声明变量类型
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
运算符
-
算术运算符: ±*/%, JS除法会自动根据结果转换整数还是小数
- java: int x=5; int y = 2; x/y = 2;
- js: let x = 5; let y = 2; x/y = 2.5;
-
关系运算符: > < >= <= != = = 和===
- ==: 先统一等号两边的类型,再比较值 “666”==666 true
- ===: 先比价类型,类型相同之后再比较值 “666”==666 false
-
逻辑运算符: && ,|| , !
-
三目运算符: 条件?值1:值2
各种语句
- if else
- while
- do while
- for
- switch case
方法
-
java：public 返回值类型 方法名(参数列表){方法体}
-
JS：function 方法名(参数列表){方法体}
-
常见的四种方法：
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
-
声明方法的三种方式：
- function 方法名(参数列表){方法体}
- let 方法名 = function(参数列表){方法体}
- let 方法名 = new Function(“参数1”,“参数2”,“方法体”){}
-
注：如果变量没有声明。他将自动成为全局变量
-
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
<body>
<input type="button"value="按钮" onclick="f1()">
<script>
//单行注释
/*js多行注释*/
//一、创建方法的第一种方式 function 方法名(参数列表){方法体}
//1.无参无返回值
function f1() {
console.log("f1");
}
//2.有参无返回值
function f2(name,age) {
console.log(name+":"+age)
}
f2("诸葛亮",20);
//3.无参有返回值
function f3() {
return "我是返回值";
}
let info = f3();
console.log(info);
//4.有参有返回值
function f4(x,y) {
return x*y;
}
let result = f4(4,4);
console.log(result);
//二、第二种声明方式 let 方法名 = function(参数名称){方法体}
let f5 = function (name,age) {
console.log("诸葛亮",66);
}
//三、第三种声明方式 let 方法名 = Function(“参数1”,“参数2”,“方法体")；
let f6 = new Function("name","age","console.log(name+':'+age)");
f6("诸葛亮",77);
</script>
</body>
NaN
- Not a Number:不是数
- isNaN(变量)判断变量是否是NaN,true代表是NaN false,false代表不是NaN
JavaScript中的内置对象
- 内置对象：number,string,boolean,undefined等。
- BOM：Browser Object Model浏览器对象模型，包含和浏览器相关的内容
- DOM：Document Object Model文档对象模型，文档指html标签，包含和页面 相关内容
BOM浏览器对象模型
- 包含和浏览器相关的内容
- window对象：该对象的属性和方法称为全局属性和全局方法，访问时可以省略掉window
window对象常见的方法
- alret(“xxx”):弹出提示框
- confirm(“xxx”):弹出提示框
- prompt(“xxx”)弹出文本框
- parseInt():将字符串或小数转成整数
- parseFloat():将字符串转成整数或小数
- isNaN()判断变量是否时NaN
- console.log()浏览器控制台输出
- let timer = setInterval(方法,时间间隔) 定时器
- clearInterval(timer)停止定时器
- setTimeout(方法，时间间隔)只执行一次的定时器
<body>
<h1>0</h1>
<h2>0</h2>
<script>
//开启定时器 每个1秒 调用一次f方法
setInterval(f,1000);
let count = 0;
function f() {
count++;
let h = document.querySelector("h1");
h.innerText = count;
}
//匿名方法开启定时器
let x = 0;
let timer = setInterval(
function () {
x++;
let h = document.querySelector("h2");
h.innerText = x;
if(x>50){
//停止计时器
clearInterval(timer);
}
}
,100);
//开启只执行一次的定时器
setTimeout(function () {
x=50;
},3000);
</script>
</body>
window对象中常见的属性
- location位置
- location.href获取或修改浏览器的请求地址
- loication.reload()刷新页面
- location.search获取浏览器地址栏中的参数
location.href = "http://www.baidu.com"
location.href
'https://www.baidu.com/'
lication.reload()
- history历史(只当前浏览器页卡的历史，关闭后则清除)
- history.length历史页面数量
- history.back()返回上一页面
- history.forward()前往下一页面
- history.go(n)n是正值前进 负值后退 0代表刷新
DOM文档对象模型
-
和页面相关内容
-
通过元素的id获取元素对象
let 元素对象 = document.getElementById(“元素id”);
-
通过CSS中接触到的选择器获取元素对象
let 元素对象 = document.querySelector(“选择器”)；
-
获取和修改元素的文本内容
元素对象.innerText;//修改
元素对象.innerText=“xxx”//修改
-
获取和修改表单中的控件的值
控件.value //获取
控件.value=“xxx” //修改
</head>
<body>
<div id="d1">这是div</div>
<input type="text" value="">
<input type="button" value="按钮" onclick="f()">
<script>
function f() {
//通过id找到元素对象
let d = document.getElementById("d1");
//获取和修改元素的文本内容
console.log(d.innerText);
d.innerText = "内容被改掉了!";
//通过选择器找到页面中的元素对象
let i = document.querySelector("input");
//修改元素的value属性
// i.value = "今天有点热";
d.innerText = i.value;
}
</script>
</body>
-
创建元素对象
let 元素对象 = document.createElement(“标签名”);
-
添加元素对象
document.body.appendChild(元素对象);
- 给元素的属性赋值
元素对象.src = “1.jpg”;
元素对象.属性=“值”；
平方练习
<body>
<input type="text" id="d1">
<input type="button" value="平方" onclick="f()">
<div>
结果:<span></span>
</div>
<script>
function f() {
let i1 = document.getElementById("d1");
let s = document.querySelector("span");
if(isNaN(i1.value)){
s.innerText = "输入有误";
return;
}
s.innerText = i1.value*i1.value;
}
</script>
简单的计算器
<body>
<input type="text" id="d1">
<input type="text" id="d2">
<input type="button"value="加" onclick="f(1)">
<input type="button"value="减" onclick="f(2)">
<input type="button"value="乘" onclick="f(3)">
<input type="button"value="除" onclick="f(4)">
<div>
结果：<span></span>
</div>
<script>
function f(x) {
let i1 = document.getElementById("d1");
let i2 = document.getElementById("d2");
let span = document.querySelector("span");
switch(x){
case 1:
span.innerText = i1.value*1+i2.value*1;
break;
case 2:
span.innerText = i1.value-i2.value;
break;
case 3:
span.innerText = i1.value*i2.value;
break;
case 4:
span.innerText = i1.value/i2.value;
break;
}
}
</script>
</body>
帅哥美女练习
<body>
<input type="text" placeholder="数量" id="i1">
<input type="button" value="添加帅哥" onclick="f(1)">
<input type="button" value="添加美女" onclick="f(2)">
<script>
function f(x) {
for (let j = 0; j < i1.value; j++) {
let imgName = x==1?"1.jpg":"3.jpg";
let i = document.createElement("img");
i.src=imgName;
document.body.appendChild(i);
}
}
</script>
猜数字游戏
<body>
<input type="text" placeholder="请输入1-100之间的整数" id="i1">
<input type="button" value="猜一猜" onclick="f()">
<div id="d1">结果：</div>
<script>
//得到1-100随机整数
let x = parseInt(Math.random()*100)+1;
let count =0;
function f() {
count++;
if(i1.value>x){
d1.innerText = "猜大了！"
}else if(i1.value<x){
d1.innerText = "猜小了！"
}else {
d1.innerText = "恭喜你，猜对了！"
d1.innerText ="恭喜你,第"+ count+"次猜对了";
}
}
</script>
向表格中添加元素
<body>
<input type="text" placeholder="员工姓名" id="i1">
<input type="text" placeholder="员工工资" id="i2">
<input type="text" placeholder="员工工作" id="i3">
<input type="button" value="添加" onclick="f()">
<table border="1">
<caption>员工列表</caption>
<tr>
<th>姓名</th>
<th>工资</th>
<th>工作</th>
</tr>
</table>
<script>
function f() {
//创建tr和3个td
let tr = document.createElement("tr");
let nameTd = document.createElement("td");
let salaryTd = document.createElement("td");
let jobTd = document.createElement("td");
//把用户输入的内容赋值给td
nameTd.innerText = i1.value;
salaryTd.innerText = i2.value;
jobTd.innerText = i3.value;
//把td装进tr
tr.appendChild(nameTd);
tr.appendChild(salaryTd);
tr.appendChild(jobTd);
//把tr装进table
let table = document.querySelector("table");
table.append(tr);
}
</script>
自定义对象
- 定义一个空的Person对象
<script>
//定义一个空的Person对象
function Person() {}
//实例化一个Person对象
let p1 = new Person();
//添加动态属性
p1.name = "张三";
p1.age = 18;
p1.run = function (){
console.log("我叫"+this.name+"今年"+age+"岁了")
}
p1.run();
</script>
- 直接实例化对象
//直接实例化对象
let p2={};
p2.name = "张三";
p2.age = 20;
p2.run = function () {
console.log("张三的方法执行了!");
}
p2.run();
- 实例化自带属性和方法的对象
//实例化自带属性和方法的对象
let p3 = {
name : "刘备",
age :30,
run : function () {
alert(this.name+":"+this.age);
}
};
p3.run();
//通过自定义对象封装数据
let arr = [{name:"小米手机",price:"3000",count:500},
{name:"小米电视",price:"3000",count:500},
{name:"华为手机",price:"3000",count:500},
{name:"华为电视",price:"3000",count:500}]
for (let item of arr) {
let tr = document.createElement("tr");
let nameTd = document.createElement("td");
let priceTd = document.createElement("td");
let count = document.createElement("td");
let table = document.querySelector("table");
nameTd.innerText = item.name;
priceTd.innerText = item.price;
count.innerText = item.count;
tr.append(nameTd,priceTd,count);
table.append(tr)
}
商品列表
| 商品名 | 价格 | 库存 |
|---|---|---|
| 小米手机 | 3000 | 500 |
| 小米电视 | 3000 | 500 |
| 华为手机 | 3000 | 500 |
| 华为电视 | 3000 | 500 |