前端学习之JavaScript基础（一）
临近考试，还是像打了鸡血一般，决定写一篇关于JavaScript的学习笔记。
- JavaScript的简单概述
- JavaScript的基本语法
- 使用JavaScript完成表单校验
- 使用JavaScript完成图片轮播效果
- 使用JavaScript完成页面定时弹出广告
JavaScript的简单概述
什么是JavaScript？
JavaScript是浏览器端脚本语言,是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。啥意思呢？就是不用编译，有浏览器解释执行。
JavaScript的组成：
- ECMAScript：JavaScript的核心；
- BOM（Browser Object Model）：浏览器对象；
- DOM（Document Object Model）:操作文档的元素和内容。
JavaScript的作用：
- 使用JavaScript添加页面动画效果
- 嵌入动态文本于HTML页面
- 对浏览器事件做出响应
- 读写HTML元素
- 验证提交数据
- 检测访客的浏览器信息等
JavaScript的引入
引入JavaScript的方式有两种：内嵌式和外联式。
- 内嵌式：HTML文档直接嵌入JavaScript脚本。
<script type="text/javascript">
//javascipt代码
</script >- 外联式：HTML链接外部的JavaScript文件
<script src="javascript.js" type="text/javascript" charset="utf-8">script>基本语法
变量
- JavaScript的变量是弱类型，也就是说在JavaScript中，一个变量可以存放不同类型的数据。
-JavaScript的变量可以不声明，直接使用。默认值为：undefined。
数据类型
JavaScript的数据类型分为:基本类型和引用类型。
基本类型（五种）
Undefined 类型
- 只有一个值undefined
- 当声明的值为初始化时，变量的默认值就是Undefined。
- 函数无明确的返回值时，返回Undefined。
String 类型
var Color = "blue";- 支持转义字符，
\n、\r等。 - 转换为字符串
toString()方法。
Null 类型
- 只有一个专用值Null，表示尚未存在的对象。
- 如果定义的变量准备用于保存对象，最好将其设置赋值为Null。
Boolean 布尔类型
- true 和 false
Number 类型
- 可以表示32位整数和64位浮点数
- NaN（Not a Number）：非数值，表示本来要返回数值但没有返回熟知的情况。
- alert(NaN == NaN); //false，NaN与任何值不相等，包括NaN。
- 三个函数可以将非数值转化为数值：
Number()、parseInt()、parseFloat()。
引用类型
Array 类型（一组值的有序列表）
- 同一个数组的每个单元都可以保存不同类型的值，如{“blue”, 3, true, null}。
- 动态数组，长度可以动态调整。
- 功能强大，提供栈、队列、排序等功能。
- 创建方法包括以下三种方式：
1）new Array();
2）new Array(size);（size 是期望的数组元素个数）
3）new Array(element0, element1, …, elementn); - Array对象包含的主要方法：
Date 类型
- Date 对象用于处理日期和时间，使用自UTC（Coordinated Universal Time,国际协调时间）1970年1月1日午夜（零时）开始经过的毫秒数来保存日期。
- Date 对象常用的方法：
RegExp 类型。RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具，用来被检索、替换那些符合某个模式的文本。
- 语法：new RegExp(pattern, attributes);
pattern：是一个字符串，指定了正则表达式的模式或其他正则表达式。
attributes：是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。 - 方括号用于查找某个范围内的字符：
- 元字符（Metacharacter）是拥有特殊含义的字符。
- RegExp对象属性：
- RegExp对象方法：
- 语法：new RegExp(pattern, attributes);
JavaScript运算符
其他运算符和Java等其他语言大体一样。唯一需要注意的就是 等性运算符。
==它在作比较的时候会进行自动转换。
===他在作比较的时候不会进行自动转换。
JavaScript的语句
这玩意和Java也差不多，没什么好说的。
JavaScript的基本操作
- 获取元素内容：
- 获取元素：
document.getElemenById("id 名称")； - 获取元素里面的值：
`document.getElemenById(“id 名称”)。
- 获取元素：
- JavaScript 事件：
- 表单提交事件：
onsubmit
- 表单提交事件：
- JavaScript的输入：
- 警告框：
alert(); - 向页面的指定位置写入内容：
innerHTML(属性); - 向页面写入内容：
document.write("");
- 警告框：
使用JavaScript完成表单校验
下面简单做一下步骤分析：
1. 确定事件onsubmit并为其绑定一个函数。
2. 书写这个函数(获取用户输入的数据)。
3. 对输入的数据进行判断。
4. 如果输入的不正确，给出错误提示 alert
5. 如果输入合法，表单提交。
代码实现
HTML部分
为表单绑定一个事件：
对需要校验的 定义id
JavaScript部分代码：
"> function checkForm(){
/*校验用户名*/
var uValue = document.getElementById("user").value;
if(uValue==""){
alert("用户名不能为空！");
return flase;
}
/*校验邮箱*/
var Evalue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(Evalue)){
alert("邮箱格式不正确！");
return false;
}
}
完整版代码：
<html>
<head>
<meta charset="UTF-8">
<title>使用JavaScript完成表单校验title>
<script>
function checkForm(){
/**校验用户名*/
var uValue = document.getElementById("user").value;
if(uValue=="")
alert("用户名不能为空!");
return false;
}
/*校验密码*/
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空!");
return false;
}
/**校验确认密码*/
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致!");
return false;
}
/*校验邮箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}
}
script>
head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<tr>
<td height="600px">
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td>
用户名
td>
<td>
<input type="text" name="user" size="34px" id="user"/>
td>
tr>
<tr>
<td>
密码
td>
<td>
<input type="password" name="password" size="34px" id="password"/>
td>
tr>
<tr>
<td>
确认密码
td>
<td>
<input type="password" name="repassword" size="34px" id="repassword">input>
td>
tr>
<tr>
<td>
Emaile
td>
<td>
<input type="text" name="email" size="34px" id="eamil"/>
td>
tr>
<tr>
<td>
姓名
td>
<td>
<input type="text" name="username" size="34px"/>
td>
tr>
<tr>
<td>
性别
td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
td>
tr>
<tr>
<td>
出生日期
td>
<td>
<input type="text" name="birthday" size="34px"/>
td>
tr>
<tr>
<td>
验证码
td>
<td>
<input type="text" name="yzm" />
<img src="yanzhengma.png" />
td>
tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
td>
tr>
table>
form>
td>
tr>
tr>
table>
body>
html>今天就写到这吧，剩下的明天再写。