目录
JavaScript介绍
JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
-
作用: 给页面添加动态效果
-
语言特点:
- 属于弱类型语言
- 属于脚本语言,不需要编译,由浏览器解析执行.
- 基于面向对象的语言
- 安全性强: JS语言只能访问浏览器内部的数据,浏览器以外用户磁盘上面的数据禁止访问
- 交互性强: JS语言是嵌入到html页面中运行在客户端电脑中的语言, 更接近用户所以交互性更强, Java语言是运行在服务器的语言用户要想与之交互必须经过网络。
- 主要语法：变量,数据类型,运算符,各种语句,方法,面向对象
如何在html页面中添加JavaScript代码
三种添加方式:
- 内联: 在标签的事件属性中添加JS代码, 当事件触发时执行
- 事件: 指系统提供的一些特定时间点
- 点击事件: 当用户点击元素时触发的时间点
- 内部: 在script标签里面写JS代码
- 外部: 在单独的js文件中写JS代码, 通过script标签的src属性引入
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：
1 内部脚本
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间
2 外部脚本
第一步：定义外部 js 文件。如定义名为 demo.js的文件
第二步：在页面中引入外部的js文件
在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。
<!--引入外部js文件-->
<script src="my.js"></script>
<!--onclick代表点击事件属性, alert()弹出提示框方法-->
变量
-
JS语言属于弱类型语言, 声明变量时不需要指定类型
-
通过let或var关键字声明变量
-
let声明的变量作用域类似于Java语言
-
var声明的变量 作用域相当于是Java中的全局变量,可以在任何地方调用
-
举例:
Java写法：
for(int i=0;i<10;i++){
int j = i+1;
}
int x = i+j; //i和j超出了作用域 编译报错
JavaScript:
let写法
for(let i=0;i<10;i++){
let j = i+1;
}
let x = i+j; // 不报错 但是访问不到i和j 因为超出了作用域
var写法
for(let i=0;i<10;i++){
let j = i+1;
}var x= i +j; //不但不报错，还能正常访问i和j的值
数据类型
- JS语言中只有对象类型
- 常见的一些对象类型:
- string 字符串: 可以用单引号或双引号修饰 "abc" 'abc'
- number数值: 相当于Java中所有数值类型的总和
- boolean布尔值: true和false
- undefined未定义: 当变量只声明不赋值时,变量的类型为未定义.
- 获取变量类型的方式 typeof 变量;
运算符
- 算术运算符: + - * / %
- JS 除法运算会自动根据结果转换整数或小数
- java: int x=5; int y=2; int z = x/y; z=2
- JS : let x=5; let y=2; let z = x/y; z=2.5 , x=6 z=3
- 关系运算符: > < >= <= != ==和===
- ==: 先统一两个变量的类型再比较值, "666"==666 true
- ===:先比较类型,类型相同之后再比较值, "666"===666 false
- 逻辑运算符: && || ! 只支持短路与和短路或
- 赋值运算符: = += -= *= /= %=
- 三目运算符: 条件?值1:值2
各种语句
- if else
- for
- while
- switch case
和 Java 一样的流程控制语句
方法
- Java: public 返回值 方法名(参数列表){方法体}
- JS: function 方法名(参数列表){方法体}
- 三种声明方法的方式:
- function 方法名(参数列表){方法体}
- let 方法名 = function(参数列表){方法体}
- let 方法名 = new Function("参数1","参数2","方法体");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//无参无返回值方法
function f1() {
console.log("f1");
}
//调用方法
f1();
//有参无返回值
function f2(name,age) {
console.log(name+":"+age);
}
f2("张飞",18);
//无参有返回值
function f3() {
return "我是返回值";
}
let info = f3();
console.log(info);
//有参有返回值
function f4(x,y) {
return x*y;
}
let result = f4(5,9);
console.log(result);
//第二种声明方法的方式
let f5 = function (name,age) {
console.log(name+":"+age);
}
f5("关羽",30);
//第三种声明方法的方式
let f6 = new Function("name","age","console.log(name+':'+age)");
f6("刘备","50");
</script>
</body>
</html>和页面相关的方法
-
通过选择器查找页面中的元素对象
let 元素对象 = document.querySelector("css选择器");
-
获取或修改元素的文本内容
元素对象.innerText = "xxx"; 修改
元素对象.innerText 获取
-
获取或修改控件的值
控件对象.value="xxx"; 修改
控件对象.value 获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<input type="button" value="按钮" onclick="f()">
<div>div</div>
<script>
function f() {
//得到文本框控件
let i = document.querySelector("input");
//得到div
let d = document.querySelector("div");
//把文本框的内容赋值给div
d.innerText = i.value;
}
</script>
</body>
</html>NaN
- Not a Number 不是一个数
- isNaN(变量) 判断变量是否是NaN
JavaScript对象分类
- 内置对象: 指string,number,boolean等
- BOM:BrowserObjectModel浏览器对象模型, 包含和浏览器相关的内容
- DOM:DocumentObjectModel文档对象模型, 包含和页面相关的内容
BOM浏览器对象模型
-
window对象: 此对象中的属性和方法称为全局属性或全局方法, 访问时可以省略掉window.
-
window对象中常见的方法
- isNaN() 判断变量是否是NaN
- parseInt()/parseFloat() 将字符串转成整数或小数, 将小数转成整数
- alert("xxx") 弹出提示框
- confirm("xxx") 弹出确认框
- prompt("xxx") 弹出文本框
- let timer = setInterval(方法名,时间间隔) 开启定时器
- clearInterval(timer); 停止定时器
- setTimeout(方法名,时间间隔) 开启只执行一次的定时器
- window对象中常见的属性
- location位置
- location.href 获取和修改浏览器的请求地址
- location.reload() 刷新页面
- history历史
- history.length 得到历史页面数量
- history.forward() 前往下一页面
- history.back() 返回上一页面
- history.go(n) n正值是前进； 负值是后退； 0是刷新
- location位置
DOM文档对象模型
- 包含页面相关内容
-
通过选择器查找页面中的元素对象
let 元素对象 = document.querySelector("css选择器");
-
获取或修改元素的文本内容
元素对象.innerText = "xxx"; 修改
元素对象.innerText 获取
-
获取或修改控件的值
控件对象.value="xxx"; 修改
控件对象.value 获取
-
创建元素对象
let 元素对象 = document.createElement("标签名");
-
把元素添加到某个元素中
元素对象.append(新元素对象);
6.获取body
document.body
综合练习
计算器练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<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>结果:</div>
<script>
let i1 = document.querySelector("#i1");
let i2 = document.querySelector("#i2");
let d = document.querySelector("div");
function f(x) {
if (isNaN(i1.value)||isNaN(i2.value)){
d.innerText = "输入错误!";
return;
}
switch (x) {
case 1://加
d.innerText = "结果:"+(i1.value*1+i2.value*1);
break;
case 2://减
d.innerText = "结果:"+(i1.value-i2.value);
break;
case 3://乘
d.innerText = "结果:"+(i1.value*i2.value);
break;
case 4://除
d.innerText = "结果:"+(i1.value/i2.value);
break;
}
}
function f1() {
if (isNaN(i1.value)||isNaN(i2.value)){
d.innerText = "输入错误!";
return;
}
d.innerText = "结果:"+(i1.value*1+i2.value*1);
}
function f2() {
if (isNaN(i1.value)||isNaN(i2.value)){
d.innerText = "输入错误!";
return;
}
d.innerText = "结果:"+(i1.value-i2.value);
}
function f3() {
if (isNaN(i1.value)||isNaN(i2.value)){
d.innerText = "输入错误!";
return;
}
d.innerText = "结果:"+(i1.value*i2.value);
}
function f4() {
if (isNaN(i1.value)||isNaN(i2.value)){
d.innerText = "输入错误!";
return;
}
d.innerText = "结果:"+(i1.value/i2.value);
}
</script>
</body>
</html>猜数字练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入1-100之间的整数">
<input type="button" value="猜一猜" onclick="f()">
<div></div>
<script>
//生成1-100之间的随机整数
let x = parseInt(Math.random()*100)+1;
let i = document.querySelector("input")
let d = document.querySelector("div");
let count = 0;
function f() {
count++;
if (isNaN(i.value)){
d.innerText="输入错误!";
return;
}
if (i.value>x){
d.innerText = "猜大了!";
}else if(i.value<x){
d.innerText = "猜小了!";
}else{
d.innerText = "恭喜你第"+count+"次猜对了!";
}
}
</script>
</body>
</html>
1901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
