JavaScript

最新推荐文章于 2025-06-13 08:24:12 发布

Healer_小振

最新推荐文章于 2025-06-13 08:24:12 发布

阅读量178

点赞数

文章标签： javascript js

Healer_小振

本文链接：https://blog.youkuaiyun.com/Healer_xiaozhen/article/details/108810840

版权

JavaScript

如何在HTML页面中写JavaScript代码

数据类型

变量声明和赋值

运算符:+ - * / % > < >= <= = != == ===

语句 if else for while switch case

方法声明

和页面相关的方法

NaN: Not a Number 不是一个数

JavaScript

作用: 给页面添加动态效果
和Java语言没有关系,只是为了蹭热度
语言特点:
- 属于脚本语言,不需要编译直接解析执行
- 属于弱类型语言
  - 强类型: int x = 10; String s = "abc";
  - 弱类型: let x =10; let s = "abc";
- 安全性高: JavaScript语言只能访问浏览器内部的数据,不能访问浏览器以外用户电脑上的数据
- 交互性高: JS语言直接嵌入到html页面中,可以让用户脱离后端服务器和页面内容进行交互

如何在HTML页面中写JavaScript代码

三种引入方式:

内联: 在标签的事件属性中添加js代码

<input type="button" value="测试内联" onclick="alert('内联')">

内部: 在html页面的任意位置添加script标签,在标签体内写js代码

```
<script>
    alert("测试内部");
</script>
```
外部:在单独的js文件中写JavaScript代码,在html页面中通过script标签的src属性引入.
```
<script src="first.js"></script>
```
```
语法
```

数据类型,变量,运算符,语句,方法,面相对象

数据类型

JavaScript语言中只有对象类型
常见的几种对象类型
- 数值: number , 相当于是Java中所有数值类型的总和
- 字符串:string, 可以用单引号或双引号修饰
- 布尔值: boolean, true/false
- 未定义: undefined, let x; 变量只声明不赋值的时候类型为未定义

变量声明和赋值

JavaScript语言属于弱类型语言

如何声明变量:

java: int x=10; String s="abc"; x="abc";(报错, 类型不匹配)
JS: let x=10; let s="abc"; x="abc";(不报错,语法支持)

JavaScript中使用var和let声明变量, 二者的作用域不同

for(let i=0;i<10;i++){
    alert(i);
}
alert(i);//使用let声明 此位置超出了作用域 访问不到i
//使用var声明变量,不管在什么位置都声明的是全局的
for(var i=0;i<10;i++){
    alert(i);
}
alert(i);//使用var声明 此位置仍然能够访问到for里面声明的i

运算符:+ - * / % > < >= <= = != == ===

这些运算符和Java大体相同
==和===区别:
== 是先统一等号两边变量的类型再去比较值 "666"==666 true
- ===是先比较类型,类型相等之后再比较值 "666"===666 false

typeof 获取变量的类型 typeof 66+6="number"+6 = "number6"

语句 if else for while switch case

和Java大体相同
for循环把 int i 改成let i

方法声明

Java方法声明: public void 方法名(参数列表){方法体}
JS方法声明: function 方法名(参数列表){方法体}
声明常见的四种方法:
1. 无参无返回值
2. 无参有返回值
3. 有参无返回值
4. 有参有返回值
三种声明方法的方式
1. function 方法名(参数列表){方法体}
2. let 方法名 = function(参数列表){方法体}
3. let 方法名 = new Function("参数1","参数2".......,"方法体");

和页面相关的方法

通过id获取页面元素

let d = document.getElementById("id");
获取和修改元素的文本内容

元素对象.innerText = "xxxx"; 修改

元素对象.innerText 获取
获取和修改元素的html内容

元素对象.innerHTML="html标签内容"; 修改

元素对象.innerHTML 获取
获取和修改文本框的值

文本框对象.value="xxxx"; 修改

文本框对象.value 获取

NaN: Not a Number 不是一个数

isNaN(x) 判断变量x是否是NaN

JavaScript中的对象分类

内置对象: number/string/boolean等
浏览器相关BOM: Browser Object Model 浏览器对象模型
页面相关DOM: Document Object Model 文档对象模型

BOM浏览器相关内容

window: 该对象中的属性和方法称为全局的属性和方法, 调用时可以省略掉window. ,浏览器相关的内容基本都在这个window对象中
window中常见的一些方法:
- window.alert("xxx"); 弹出对话框
- window.confirm("xxx"); 弹出确认框
- window.prompt("xxx");弹出文本框
- isNaN(x) 判断一个变量是否是NaN
- parseInt() 把字符串或小数转成int
- parseFloat() 把字符串转成小数
- let timer = setInterval(方法,时间间隔) 开启定时器
- clearInterval(timer) 停止定时器
- setTimeout(方法,时间间隔) 只执行一次的定时器
window中常见的属性
- location 位置
  - location.href 当前浏览器的访问地址
  - location.reload() 刷新
  - location.search 获取当前请求地址中的参数
- history 历史
  - history.length 获取历史页面数量
  - history.back() 返回
  - history.forward() 前进
- screen 屏幕
  - screen.width 获取屏幕宽度分辨率
  - screen.height 获取屏幕高度分辨率
- navigator导航/帮助
  - userAgent 获取浏览器的版本信息

事件相关

什么是事件: 系统给提供的一些特定时间点, 包括鼠标事件/键盘事件/状态改变事件
鼠标事件:
- onclick: 鼠标点击事件
- onmouseover: 鼠标移入事件
- onmouseout: 鼠标移出事件
- onmousedown:鼠标按下事件
- onmouseup: 鼠标抬起事件
- onmousemove: 鼠标移动事件
键盘事件:
- onkeydown:键盘按下
- onkeyup:键盘抬起
- event.keyCode获取按键编码
- String.fromCharCode() 将字符编码转成字符
- 状态改变事件
  - onload: 页面加载完成事件
  - onchange:值改变事件
  - onblur: 失去焦点事件
事件绑定方式(给元素添加事件的方式)
1. 事件属性
```
<input type="text" placeholder="请输入用户名" id="i1" onblur="blurfn()">
```
2. 动态绑定(通过js代码后期给元素添加事件)

    //动态绑定事件
    b1.onclick = function(){
        alert("动态绑定");
    }

事件传递: 当点击某个范围需要有多个元素的事件响应时, 事件的传递顺序是从最底层往上层传递, 类似于气泡从下往上所以事件传递又称为事件冒泡.

DOM文档对象模型(和页面相关的内容)

document.getElementById("id"); 通过id查找元素对象
innerText 获取和修改元素的文本内容
innerHTML 获取和修改元素的html内容
value