欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Java Script 基本知识点

程序员文章站 2022-05-03 08:05:35
1.基本数据类型              JavaScript提供了4种基本的数据类型用来处理数字和文字...
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=”https://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. 属性示例:开灯关灯

 

 

 

  <script type="text/javascript">

 

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" 

 

onclick="setColor_()" 

 

name="setColor"/> 

 

 

 

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

 

核心代码如下:

 

1、

 

<script type="text/javascript">

 

function move()

 

{

 

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

 

}

 

window.onscroll=move;

 

</script>

 

2、

 

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

 

<p 

 

id="adv" 

 

style="position:absolute; 

 

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

 

 

 

方法示例:全选操作

 

 

 

核心代码如下:

 

1、

 

<script type="text/javascript">

 

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" onclick="isChecked(true)" />全选<input type="radio"  name="ischeck" onclick="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  

 

表达式模式

 

特殊字符

 

 

 

限定符

 

 

 

       定位符

 

 

 

  查找和替换

 

 

 

 常用正则表达式

 

需求

 

表达式

 

匹配身份证号码

 

^d{15}|d{18}$

 

验证电子邮件格式

 

^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$ 

 

验证一个月的天数

 

^([0-2])\d$|^3(0|1)$

 

验证合法的标识名

 

^[a-zA-Z]\w{4,15}$

 

匹配中文字符

 

[u4e00-u9fa5]

 

总结:

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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