JavaScript基础

最新推荐文章于 2021-11-16 11:35:37 发布

肖红

最新推荐文章于 2021-11-16 11:35:37 发布

阅读量990

点赞数

分类专栏： B/S

本文链接：https://blog.csdn.net/xh921/article/details/37772813

版权

B/S 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

一、概念：

JavaScript是一种脚本语言（解释性语言），通常和Jquery，Ajax,联合使用实现网页和用户之间实时性的，动态的，交互性的关系，提高了网页的浏览速度和交互能力，作为一种高级语言，JavaSript主要用来进行表单验证。

二、特点：

1）是一种脚本编写语言：JavaScript采取小程序段的方式实现编程，提供了一个简易的开发过程。

2）基于对象：JavaScript是一种基于对象的语言，同时也是面向对象的语言，它可以和其他面向对象的语言一样自己创建对象。

3）简单性：这种语言同样也是由三大结构组成，它所用到的流程控制语句简单，变量的数据类型也没有严格的定义。

4）安全性：它不允许访问本地硬盘，并不能将数据存入服务器，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效防止数据的丢失。

5）动态性：它的动态性表现在可以直接对用户或客户端输入做出响应，采用事件驱动方式进行。

6）跨平台性：JavaScript的编写与平台无关，一个JavaScript编写的程序拿到哪里都可以运行。这就是应用这种脚本语言最大的好处。

三、基本语法：

JavaScript的语法同样也是以三大结构为核心展开的，包括所支持的数据类型，运算符，对象和事件处理机制。

1）基本的架构：

<script language="javascript"type="text/javascript">

//javascript主体内容

</script>

2）对象、属性、方法：

一切东西皆对象，属性就是对象所具有的特性，方法就是对象的行为。同样，数组也是一个对象。

3）事件：这里的事件简单的说就是对象执行的一系列函数，包括系统函数和自定义的函数。

弹出框函数：alert(“”);

输入框函数：prompt(“请输入数据：”,”内容”)

获取文本框的值：document.表单名称.文本框名称.value;

四、三大结构

1）顺序结构：按照事情发生的先后顺序执行程序。（示例：银行取款）

2）选择结构：按照条件选择执行程序。（示例：登录）

3）循环结构：while循环和for循环

while循环结构：循环三要素，循环初始值，循环条件，改变循环初始值

for循环结构：for（循环初始值;循环条件;改变循环初始值）（示例：循环数组）

五、控件的简单操作：

1）文本框获得焦点：document.form1.name.focus();

onFocus=””表示得到焦点，οnblur=””表示失去焦点

2）表单跳转：document.form1.action="http://blog.csdn.net/xh921";

六、CSS样式：在前面的学习中已经详细的介绍了什么是CSS，这里简单的概况一下，

在这个示例中，将自己建立一个CSS文件，作为连接样式使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS初步</title>

<link href="css/css.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
	function bianse()
	{		
		document.getElementById("lanmu2").style.color="#0033FF";
	}
	function xiaoshi()
	{
		document.getElementById("lanmu5").style.display="none";
	}
	function chuxian()
	{
		document.getElementById("lanmu5").style.display="";
	}
</script>
</head>

<body>
<p style="display:block"class="STYLE1">栏目一</p>
<form id="form1" name="form1" method="post" action="">
  <label>
  <input name="button" type="button" id="button" value="变色" οnclick="bianse();" />
  </label>
  <label> 
  <input name="button2" type="button" id="button2" value="消失" οnclick="xiaoshi();" />
  </label>
  <label>
  <input name="button3" type="button" id="button3" value="出现" οnclick="chuxian();" />
  </label>
</form>
<p id="lanmu2" class="STYLE1">栏目二</p>
<p class="STYLE1">栏目三</p>
<p class="STYLE1">栏目四</p>
<p id="lanmu5" class="STYLE1">栏目五 </p>
</body>

</html>

其中document.getElementById("lanmu5");表示通过Id获得标签的名字，属性display表示消失和出现。display=”none”;表示隐藏，display=”block”;表示出现。每一个事件都是由onclick事件引起，在javascript中编写事件的具体过程。

下面应用控件消失和隐藏的属性简单做一个分栏的模块：

示例功能：单击向左的图片，栏目模块隐藏，同时图片变为向右的图标，单击向右的图标，栏目模块显示，同时图标变为向左：

首先页面设计：

栏目模块应用前面的CSS样式进行设计。

<td id="lanmu" width="89" height="263">
	<p><a href="#">栏目一</a></p>
    <p><a href="#">栏目二</a></p>
    <p><a href="#">栏目三</a></p>
    <p><a href="#">栏目四</a></p>
<p><a href="#">栏目五</a></p></td>

在建立的站点中准备好需要用到的图片。

<span id="img"><img src="测试/left.png" width="167" height="173" οnclick="yc();" /></span>	</td>

在JavaScript中编写yc()函数：

function yc()
{
	document.getElementById("lanmu").style.display="none";
	document.getElementById("img").innerHTML="<img src='测试/right.png' οnclick='xs();' />"
}

.getElementById表示通过Id找到对应的标签，.display属性为“none”表示隐藏，.innerHTML属性表示我们可以自己更改<img……/>中的内容，上面的意思就是将图片的根路径改为向右图片的路径，同时带有一个单击事件。此时同样在脚本中编写xs()的函数：

function xs()
{
	document.getElementById("lanmu").style.display="";
	document.getElementById("img").innerHTML="<img src='测试/left.png' οnclick='yc();' />";
}

（代码的含义同上，道理是一样的）

当在通过Id查找图片信息的时候，要自己给图片添加一个“span”标记

七、正则表达式：

1、正则表达式的两个方法：replace()和match()

前者表示替换，将满足条件的整句话中包含的替换文字都替换掉，后者的意思是查找替换后的文字。

2、基础的正则表达式的用法：所有的表达式均是放在//g;的“//”中，“g”表示全局，“gi”表示忽略大小写。

1）以xxx开头，以xxx结尾（^$）

varreg=/^$/g;

2）表示任意一个字符（内容.内容）

varreg=/想.想/g;

3）匹配特殊字符（\.）

var reg=/\./g;输出一个“.”

4）字符集表示多选一（[….]）

var reg=/g[eo]t/g;

5）表示表示从a到z的字母,注意大小写（[a-z]）

var reg=/^[a-z]$/gi

6）表示只能输入数字（\d）

var reg=/^\d\d\d$/g;

7）规定只能输入特定的位数（\d{n}）

var reg=/^\d{6}$/g;

8）规定输入的位数为一个范围（{n,m}）

var reg=/^\d{6,18}$/g;

9）输入三个字母以上,字母数字下划线（\w{3,}）

var reg=/^\w{3,}$/g;

10）表示一个都不能选（[^...]）

var reg=/g[^eo]t/g ;

11）最多输入一个字符 +相当于前面有1个以上匹配 *相当于前面0个以上匹配 ?相当于0个或者1个匹配

varreg=/(12)?3/g;

12）选择符（|）

varreg=/get|got/g;

13）验证电话号码（(\d{3}|\d{4})-\d{7}/）

varreg=/(\d{3}|\d{4})-\d{7}/g；

14）验证邮箱（\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*）

varreg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/g;

15）只能输入中文（[\u4e00-\u9f5a]+）

varreg=/^[\u4e00-\u9f5a]+$/g;

16）只能输入数字（\d+(\.\d+)?）

varreg=/^\d+(\.\d+)?$/g;

17）不能输入空格（^ +$）

varreg=/^ +$/g;

18）去除空格的函数编写（(^\s+)|(\s+$)）

functiontrim(str)

{

returnstr.replace(/(^\s+)|(\s+$)/g,"");

}

以上就是JavaScrip的基础部分，这些简单的语法基础是我们后续学习的铺路石，接下来的博客就重点介绍JavaScript在项目中的具体应用。

肖红

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
8
评论
JavaScript基础

一、概念：JavaScript是一种脚本语言（解释性语言），通常和Jquery，Ajax,联合使用实现网页和用户之间实时性的，动态的，交互性的关系，提高了网页的浏览速度和交互能力，作为一种高级语言，JavaSript主要用来进行表单验证。二、特点：1）是一种脚本编写语言：JavaScript采取小程序段的方式实现编程，提供了一个简易的开发过程。2）基于对象：JavaScript是一
复制链接

扫一扫

专栏目录