入门JavaScript

ZWF
126 阅读6分钟

一、JavaScript介绍

        JavaScript诞生主要是为了完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码

  • 首先，JavaScript是一门单独的语言，与java无关
  • 与java是一门强类型的语言不同的是，js(即JavaScript)是一门弱类型的语言

这里所提到的弱类型指的是类型可变，JavaScript不像java是强类型

强类型就是定义变量时，类型已确定且不可变

JavaScript特点：

  1. 交互性（它可以实现信息的动态交互）

  2. 安全性（它不允许直接访问本地磁盘）

  3. 跨平台性（只要是可以解释js的浏览器都可以执行，与平台无关）

二、JavaScript与html代码的结合方式

2.1 第一种方式

只需要在head标签或者是body标签内使用script标签书写JavaScript代码

效果如下：

2.2第二种方式

使用script标签引入单独的JavaScript标签

效果如下

值得注意的是：

script标签可以用来书写JavaScript代码，也可以用来引入JavaScript文件，但是注意这二者只能二选一，不能同时使用两个功能

三、变量

变量是存放某些值的内存的命名

JavaScript的数据类型：

  • 数值类型（number）：基本与java一样有int,short,long,float,double等
  • 字符串类型（string）
  • 对象类型（object）
  • 布尔类型（boolean）
  • 函数类型（function）：这里与java不同，JavaScript的变量可以指向一个函数

JavaScript的特殊值：

  • undefined       未定义，所以JavaScript的变量在未赋值时，默认都是undefined
  • null       空值
  • NaN      全称是： Not a number    即非数字、非数值

JavaScript的定义变量格式

var 变量名;
var 变量名 = 值;

这里的typeof函数作用是得到参数的数据类型

四、关系（比较）运算符

JavaScript的关系（比较）运算符与java基本一致，都有> >= < <= !=这里不再赘述

值得注意的是下面这两个运算符

  • 等于   ==     等于是简单地做字面值的比较
  • 全等于  ===   全等于除了做字面值的比较外，还做数据类型的比较

五、逻辑运算符

这里是与之前所学的java不同的，要注意

六、数组

这里只对JavaScript与java不同的地方进行强调

  • JavaScript的数组，只要我们通过数组下标进行赋值，那么最大的下标值，就会自动地给数组做扩容操作
  • 数组的遍历初始化时要使用var定义

七、函数

1.使用function关键字定义函数

  • 函数定义时如果有参数，我们无需写类型，给出有多少个参数即可

  • 函数若需要返回，直接使用return即可

  • JavaScript中不允许重载，如果写了两个一样的函数那么第二个函数将覆盖第一个函数的定义！！！

  • 直接进行演示：

2.将函数赋给var

3. 函数的隐形参数arguments（只在function函数内）

隐形参数即 在function函数中不需要定义，但却可以直接用来获取所有参数的变量

  • 隐形参数与java基础的可变长参数一样（public void fun(Object...args);），它实际上是一个数组，因此对其操作类似操作数组

下面进行演示（需求是编写一个函数可以计算传入参数之和）

这里没有说明传入有几个参数，所以使用隐形参数

八、自定义对象

1.object形式的自定义对象

2.花括号形式的自定义对象

注意冒号和逗号的使用

九、js中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应，我们称之为事件

常用的事件如下：

  • onload加载完成事件；      页面加载完成后，常用于做页面js代码初始化操作

  • onclick单击事件；             常用于按钮的点击响应操作

  • onblur失去焦点事件；       常用于输入框失去焦点后验证其输入内容是否合法

  • onchange内容发生改变事件；      常用于下拉列表与输入框内容发生改变后操作

  • onsubmit表单提交事件；     常用于表单提交前，验证所有表单项是否合法

1.事件的注册（绑定）

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定

而事件的注册（绑定）又分为静态注册或动态注册

1.1事件的静态注册

  • 通过HTML标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册

1.2事件的动态注册

  • 是指先通过js代码得到标签的dom对象，然后再通过 对象.事件名 = function(){}

这种形式赋予事件响应后的代码，叫动态注册

动态注册的基本步骤如下：

1）获取标签对象

2）标签对象.对象名=function(){}

2. onload事件

  • onload通常写在body标签上

3. onclick事件

4. onblur事件

效果如下：

5.onchange事件

6.onsubmit事件

值得注意的是在静态注册时我们在调用函数前需要有一个return

十、DOM模型

 DOM全称 Document Object Model 文档对象模型

简而言之就是 我们把文档（即一个html页面）中的标签、属性、文本转换成对象来管理

1. Document对象（表示整个html页面）

理解：

  • Document管理了所有的html文档内容
  • Document是一种树状结构的文档，有层级关系
  • 它让我们把所有的标签都 对象化
  • 我们可以通过Document访问所有的标签对象

例如下面这个例子演示对象化：

2.getElementById方法

我们直接通过案例进行演示：

需求：当用户点击“校验”按钮时，获取输入框的内容，验证其是否合法(规则是由字母或数字或下划线组成且长度为5—12)

这里使用到了正则表达式（可参考JavaScript RegExp 对象）

下面是另外两种常见的验证提示

注意这里的innerHTML是我们所得到的dom对象的一个属性，该属性可读可写

3.getElementsByName方法

依旧直接看案例

我们这里希望实现如下三个功能：

这里的我们得到的dom对象同样是可以操作对应标签的属性如checked属性

且得到的集合的操作与数组一样，集合中都是dom对象，元素顺序是它们在html页面中从上到下的顺序

4.getElementsByTagName方法

该方法与方法3大同小异，只是该方法利用的是标签名来确定得到哪些dom对象而已

5.三种查询方法的使用注意事项

6. createElement方法与appendChild方法

下面我们进行演示（需求是使用js为body标签添加一个子节点div标签）

注意：这里我们必须使用window.onload=function(){}保证里面代码在页面加载完成后再执行，否则会出现body对象为空的错误

avatar
文章
阅读
粉丝