Java Script 基本知识点

落日映苍穹つ 2021-11-29 05:18 310阅读 0赞

**                      JavaScript**是一种基于对象和事件驱动的脚本语言，它提供了一些专有的类、对象及函数

1.基本数据类型

JavaScript提供了4种基本的数据类型用来处理数字和文字

Number、String、Null、Boolean

1）.变量

语法：

var 变量名=值;

变量命名规范：

1)变量名由字母、数字、下划线和$组成

2)变量名的首字母必须是字母、$或下划线

3)不能使用JavaScript 保留字，注意区分大小写

2).类型转换

parseInt (String)

将字符串转换为整型数字

parseFloat(String)

将字符串转换为浮点型数字

3).运算符

算术运算符

+、-、 \* 、 / 、%、++、--

比较运算符

==、!=、>、>=、<、<=

逻辑运算符

&&、||、！

4).注释

JavaScript 注释有两种

单行注释

语法：//注释内容

多行注释

语法：/\*注释内容\*/

5).流程控制语句

语法：

if条件语句

switch多分支语句

for、while、do…while循环语句

break 和 continue 语句

break 语句来中断一个循环的运行。

continue 语句用来跳过余下的代码块而直接转到下一次循环继续执行

6).函数的定义与调用

a.函数声明语法：

function 　函数名　(参数列表)

b.函数代码块;

return 表达式;

c.函数调用语法：

函数名(实参1,实参2…) ;

var 变量名=函数名(实参1,实参2…);

7).变量的作用域

根据变量的作用范围，JavaScript中的变量可以分为全局变量和局部变量

8).事件处理

浏览器事件

onload、unonload、onsubmit

鼠标事件

onMouseMove、onMouseOver、onMouseOut、onMouseDown、onMouseUp

文本框事件

onchange、onselect、onfocus、onblur、

9).其他

onclick

2.浏览器对象模型

浏览器对象模型是用于描述对象与对象之间层次关系的模型，该对象模型提供了独立于

内容的、可以与浏览器窗口进行互动的对象结构

1).浏览器对象的分层结构

window对象

常用属性

常用方法

window属性和方法事例

var money=prompt("请输入取款金额",100);//接收用户录入对话框

alert(money);//输出100

var state=confirm("你取款金额为"+money);//确认和取消按钮对话框

alert(state);//返回true或false

setTimeout（“调用的函数”,”毫秒数”）

window.open("adv.html","","相关属性");

height： 窗口高度；

width： 窗口宽度；

top： 窗口距离屏幕上方的象素值；

left：窗口距离屏幕左侧的象素值；

toolbar： 是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable： 是否允许改变窗口大小，yes或1为允许

location： 是否显示地址栏，yes或1为允许

status：是否显示状态栏内的信息，yes或1为允许；

history对象

作用：

history对象用来管理当前窗口最近访问过的URL

常用方法：

注意：

history.go(-1)　 相当于    history.back()

history.go(1)　 相当于    history.forward()

例子：

<a href="javascript:history.back()">后退</a>

相当于

<a href="javascript:history.go(-1)">后退</a>

<a href="javascript:history.forward()">前进</a>

相当于

<a href="javascript:history.go(1)">后退</a>

location对象

作用：

location对象用来管理当前打开窗口的URL信息

常用属性和方法：

例子：

window.location.href=”http://www.baidu.com”;

3.DOM概述

DOM－Document Object Model ，它是W3C国际组织的一套Web标准

DOM是一种与浏览器、平台、语言无关的接口

document对象

作用：

document对象代表浏览器窗口中加载的整个HTML文档

常用属性：

常用方法：

document对象访问页面元素的常用方式有四种

1）document.all.页面元素名称;

2）document.表单名.元素名称;

3）document.getElementById("ID名称");

4）document.getElementsByName("元素名称");

\----------------------------------------------------------------------------------------

1. 属性示例：开灯关灯

function setColor\_()

var type =document.getElementById("setColor").value;

if(type=="关灯")

document.getElementById("setColor").value="开灯";

document.bgColor="black";

\}else

document.getElementById("setColor").value="关灯";

document.bgColor="white";

</script>

2、

<input

type="button"

value="关灯"

id="setColor"

οnclick="setColor\_()"

name="setColor"/>

属性示例：图片广告随滚动条滚动而滚动

核心代码如下：

1、

function move()

document.getElementById("adv").style.top=400+document.documentElement.scrollTop+"px";

window.οnscrοll=move;

</script>

2、

<img src="足够大的背景图片" />

<div

id="adv"

style="position:absolute;

top:400px; left:10px;"><img  src="需要漂浮的小广告图片"/></div>

方法示例：全选操作

核心代码如下：

1、

function isChecked(state)

var v=document.getElementsByName("lover");

for(var i=0;i<v.length;i++)

if(v\[i\].type=="checkbox")

v\[i\].checked=state;

</script>

2、

<input type="radio" name="ischeck" οnclick="isChecked(true)" />全选<input type="radio"  name="ischeck" οnclick="isChecked(false)"/>全否<br />

<a href="javascript:isChecked(true)">全选</a>

<a href="javascript:isChecked(false)">全否</a>

<hr />

<input type="checkbox" id="lover" name="lover"/>体育

<input type="checkbox" id="lover"name="lover"/>音乐

<input type="checkbox" id="lover" name="lover"/>美术

节点信息

document文档对象可以创建、添加、删除DOM支持的任何类型的节点

1、 使用document.createElement创建节点

document.createElement的功能是创建一个指定标签名的元素节点，标签名可以是任

何名字，包括自定义的标签

2、使用appendChild(node)将节点追加到所有子节点的末尾

3、使用insertBefore(newNode,node)将节点newNode插入到节点node之前

4、使用removeChild删除节点

innerHTML属性

innerHTML是DOM节点的一个属性，它表示节点的开始标签与结标签之间的内容

表单验证

作用: 表单验证可以保证提交数据的准确性

表单验证思路:

1） 编写表单处理函数，验证数据的合法性

2） 处理表单的onsubmit事件

String对象

常用属性 ：

常用方法

示例：

var  name="andy\_liu";

var first1=name.substr(1,4);       //从下表为1开始截取4个长度的字符

alert(first1);                             ///提示：ndy\_

var first2=name.substring(1,4);    //从下表为1开始取到下表为4的前一位结束

alert(first2);    ///提示：ndy

例子：

var data = "宝马,大众,丰田";

var cars = data.split(",");//按逗号分隔进行拆分

for(var i=0;i<cars.length;i++)\{

alert(cars\[i\]);

正则表达式

定义：正则表达式是一种对文字进行模糊匹配的语言

正则表达式的功能：

1）实现数据格式的有效性验证

2）实现文本内容的替换和删除

3）实现文本模糊搜索

RegExp对象

RegExp是JavaScript中提供的一种用来完成有关正则表达式操作和功能的对象

两种创建方式：

1）var reg=new RegExp(“表达式”,”附加参数”);

2）var reg=/表达式/附加参数

RegExp对象的附加参数:

g：全局匹配

i：不区分大小写匹配

m：可以进行多行匹配

常用方法

test示例：

var  str="CATs";

var regex=new RegExp("cat",'gi');

var result=regex.test(str);

document.write(result);

输出结果：true

exec示例：

var str="this is cat ,that is cat";

var pattern=new RegExp("cat","g");

var arr;

while((arr=pattern.exec(str))!=null)\{

document.write("在索引"+arr.index+"位置出现了");

document.write(arr+"<br/>");

注意：exec方法返回的数组有3个属性，分别是input、index和lastIndex

表达式模式

特殊字符

限定符

定位符

查找和替换

常用正则表达式

<table> 
 <tbody> 
  <tr> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">需求</span></p> </td> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">表达式</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">匹配身份证号码</span></p> </td> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">^d{15}|d{18}$</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">验证电子邮件格式</span></p> </td> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$&nbsp;</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">验证一个月的天数</span></p> </td> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">^([0-2])\d$|^3(0|1)$</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">验证合法的标识名</span></p> </td> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">^[a-zA-Z]\w{4,15}$</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">匹配中文字符</span></p> </td> 
   <td> <p><span style="font-family:'楷体';font-size:16px;">[u4e00-u9fa5]</span></p> </td> 
  </tr> 
 </tbody> 
</table>

总结：

u 表单是用来收集用户信息的容器，onsubmit事件为提交表单时触发的事件

u 表单验证分为两步：第一步是编写验证函数验证表单数据的合法性，第二步是处理表单onsubmit，即在表单提交事件中调用表单验证函数

u String对象用于处理字符串，如获取字符串的长度、搜索字符串中的字符、转换字符的大小写等

u 正则表达式是一种对文字进行模糊匹配的语言，常用方法有test、exec等

u 使用正则表达式可以实现：

n 测试字符串是否匹配某个模式，从而实现数据格式的有效性验证

n 修正满足某正则表达式模式的文本内容

n 搜索某一类型的文本内容

u String对象中的match、search、replace方法以RegExp为参数完成模式搜索和替换功能

表单验证高级特效

转载于:https://www.cnblogs.com/scriptzky/p/3950536.html