当前位置：首页 > ops >正文

JavaScript基础，新手详细入门

ops 2025/6/30 4:14:28

JavaScript概述

JavaScript 是一门跨平台，面向对象的脚本语言，控制网页的行为，使网页可交互
网页组成：结构（html）表现（Css）行为（JavaScript）
JavaScript和Java是完全不同的语言

引入方式：内部脚本和外部脚本

内部脚本：将js代码定义在html页面中

我们将代码写在script标签中，

需要知道的是：

在html中一般我们把script标签放在最底部（为的是网页先加载）
我们也可以放任意数量的script标签

外部脚本：将js代码定义在外部js文件中，然后引入到html页面中

外部文件：demo.js
引入外部js文件

JavaScript的基础语法

书写语法

区分大小写：与java一样，变量名，函数名以及其他东西都是区分大小写的
每行结尾的分号可有可无
注释：
- 单行注释 //
- 多行注释 /* */
大括号表示代码块

输出语句

<script >window.alert("hello js!") //弹出警告框document.write("hello js!")//写入htmlconsole.log("hello js")//写入控制台
</script>

变量

JavaScript中用 var 关键字来声明变量

var test=20
test="张三"

JavaScript 是一门弱类型语言，变量可以存放不同类型的值
变量名规则：

任何字母，数字，下划线，符号
不能数字开头
建议使用驼峰命名规范

var ：

1.作用域：全局变量、

2.变量可以重复定义

let ：

1.作用域：let所在的代码块

2.不能重复声明

const：

1.声明一个只读的常量

2.常量的值不能改变

数据类型

JavaScript中分为：原始类型和引用类型

五种原始类型：

number：数字（整数，小数，NaN（Not a Number））
string：字符，字符串（单双引号都可以）
boolean：布尔类型
null：对象空
undefined：当声明的变量未初始化时，该变量的默认值是undefined

我们可以使用typeof获取数据类型

alert(typeof age)

运算符

算数运算符

比较运算符

逻辑运算符

类型转换：

（这里介绍了常用的转换，还有很多类型的转化）

其他类型转换为数字：

1.string：将字符串转化为字面意思的数字，如果字面意思不是数字则转换为NaN

2.Boolean：true转为1 false转为0

 <script>var str="99"str2=+ str  //我们可以在字符串的前面写一个加号来转换alert(typeof(str2))</script>//  一般同parseint方法进行类型转换
<script>var str="99"str2=parseInt(str)alert(typeof(str2))</script>//运行的结果都为number，类型转换成功

其他类型转化为 Boolean：

1.number：0和NaN转为false ，其他数字转化为true

2.string：空字符串转为false ，其他字符串转化为true

3.null转为false

4.undefined：转为false

流程控制语句

条件语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

循环语句

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

流程控制语句和java的一摸一样

函数

定义：Javascript函数通过 function 关键字来定义
语法

  function Name(参数1,参数2...){执行的代码}

需要注意的：

形参不需要类型
返回值不需要定义类型，在函数内部直接return即可

调用：函数名称（实际参数列表）

可以传递任意任意个数的参数

let return = Name(参数1，参数2...)

JavaScript 对象

这里我介绍了几个常规的对象，更多可以查看js手册

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

Array对象

<script>//方式一var arr=new Array(1,2,3);alert(arr)//方式二var arr2=[1,2,3,4];alert(arr2)//访问arr2[0]=10;alert(arr2)// 特点：Javascript数组相当于Java的集合。但是 js中可 变长变类型// 变长var arr3=[1,2,3,4,5];arr3[10]=10;alert(arr3[10])// 变类型arr3[7]="hellojs";alert(arr3[5])alert(arr3)//属性：length:数组的元素个数，用法和Java中的一样//方法：/*push：添加元素splice：删除元素*/</script>

string对象

String 对象用于处理文本（字符串）。

String 对象创建方法： new String()。

var str=new String("aaa");var str2="bbb"//属性：length：字符串的长度//方法：//charAt（）返回指定位置的字符//indexOf（）检索字符串//trim（）去除字符串两头的空字符

自定义对象

var person={name:"zhangsan",age:23,eat:function(){alert("吃饭")}}alert(person.name)alert(person.age)person.eat()

BOM对象

Browser Object Model 浏览器对象模型
Javascript 将浏览器的各个组成部分封装为对象
组成：
- Window：浏览器窗口对象
- Navigation：浏览器对象
- Screen：屏幕对象
- History：历史对象
- Location：地址栏对象

Window：浏览器窗口对象

获取：直接使用window，其中window.可以省略

属性：获取其他BOM对象

方法：

alert（）：显示一段消息和一个确认按钮的警告框
confirm（）：显示一段消息以及确认按钮和取消按钮的对话框，并返回boolean
setInterval（）：按照指定周期毫秒来调用函数或计算表达式
setTimeout（）：在指定的毫秒数后调用函数或计算表达式

    <script>//alertwindow.alert("hello js!")alert("hello js2")//confirm,点击确认按钮，返回true，取消返回falsevar flag = confirm("你爱我吗？")if (flag) {alert("那我们在一起吧")} else {alert("那分手吧")}//定时//setTimeout(function, 毫秒值): 在一定的时间间隔后执行一个function，只执行一次//setInterval(function, 毫秒值): 在一定的时间间隔后执行一个function，循环执行setTimeout(function(){alert("hello js")},2000)setInterval(function(){alert("hello js2")},2000)</script>

Navigation：浏览器对象

获取：直接使用调用

方法：

history.back() ：与在浏览器点击后退按钮相同
history.forward() ：与在浏览器中点击向前按钮相同

History：历史对象

获取：直接调用

属性：href ：设置或返回完整的URL

DOM对象

Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
- Document：整个文档对象
- Elment：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
Javascript通过DOM，对html进行操作
- 改变html元素的内容
- 改变html元素的样式
- 对html DOM事件做出反应
- 添加和删除html元素

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

获取Element

getElementById()	根据id属性值获取，返回Element对象
getElementsByTagName()	根据标签名称获取，返回Element对象组
getElementsByClassName()	根据class属性值获取，返回Element对象组
getElementsByName	根据name属性值获取，返回Element对象组

Element对象的使用

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

事件监听

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

事件监听：Javascript可以在事件被侦测到时执行代码

事件绑定

<body>//方式一：通过HTML标签的事件属性进行绑<input type="button" value="点我" onclick="on()"><br>//方式二：通过DOM元素属性绑定<input type="button" value="再点我" id="btn"><script>function on(){alert("我被猪点了");}document.getElementById("btn").onclick=function(){alert("我又被猪点了")}</script>
</body>