要学JavaScript！进来看吧，反正不花钱！~
有一段时间没有更新自己的博客了，今天终于可以抽出时间和大家分享一下关于JavaScript了。有很多朋友在问我没有接触过会不会很难，不好理解
其实JavaScript的基本语法和Java的基本语法很相似，找到语法的不同点可以加快掌握知识的速度。我们步入正题！
JavaScript的优点：
一丶客户端表单验证
网站中，常常会遇到注册的页面，如果某项信息我们输入错误（如：昵称不合法，密码长度不符合等等...）表单页面将及时给出错误提示。这些错误
在没有提交到服务器之前，由客户端提前进行验证，称为客户端表单验证！
二丶页面动态效果
在JavaScript中我们经常会编写鼠标的响应事件代码，创建出动态的页面特效，从而有效的控制页面的内容，从而增加客户端的体验，从而使网站更
加有动感，有魅力！
JavaScript的概述：
1.JavaScript主要用来向HTML页面添加交互行为
2.JavaScript是一种脚本语言，语法和Java相似
3.JavaScript一般用来编写客户端的脚本
4.JavaScript是一种解释性语言，边执行边解释
JavaScript的基本结构：
//语法如下
<script type="txt/Javascript"> //JavaScript代码 </script>
JavaScript的变量和赋值：
//声明变量并赋值
var width = 20;
//声明多个变量的同时用逗号 “，”隔开
var x, y, z = 50;
补充一点：JavaScript区分大小写！！！所以大小写不同的变量名代表不同的变量！同样JavaScript中的关键字不允许作为变量名和函数名！，不知道JavaScript中
的关键字的朋友可以去差相关的文档，这里就不一个一个的给大家补充了！
//创建数组的语法
var 数组名称 = new Array (size );
//为数组中元素赋值
var fruit = new Array ("Apple","Peach","Orange");
//第二种赋值方式
var fruit = new Array(4);
fruit [0] = "apple";
fruit [1] = "Peach";
fruit [2] = "Orange";
//定义一个数组还可以使用“{”，“}”来定义
var fruit={"Apple","Peach","Orange"}；
2.数组的属性和方法：
| 类别 | 名称 | 描述 |
| 属性 | length | 设置或返回数组中元素的数目 |
| 方法 | join() | 把数组的所有元素放入一个字符串，通过一个分隔符进行分割 |
| sort() | 对数组排序 | |
| push() | 向数组末尾添加一个新的元素，并返回新的长度 |
3.运算符
| 类别 | 运算符号 |
| 算术运算符 | +，-，*，/，%，++，-- |
| 比较运算符 | >,<,>=,<=,==,!= |
| 逻辑运算符 | &&,||,! |
| 赋值运算符 | = |
4.逻辑逻辑控制语句：
javascript中的逻辑控制语除 for - in循环其余都与java中一样，所以只讲解for-in循环
//语法
for （变量 in 数组） { //JavaScript语句； }
//其中变量为数组的索引下标例如：
var fruit = {"apple","peach","orange"}; for(var i in fruit){
document.write(fruit[i])
} //同java一样，在循环中用来终止循环的有 break和continue
5.输入输出：
//警告（alert），该对话框有一个字符串和一个确定按钮
alert ("提示信息")
//提示(prompt)会弹出一个提示对话框，等待用户输入一行数据
prompt("提示信息","输入框的默认信息")
结合以上所讲要在浏览器中怎么做到以下效果：
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>统计a与A的字符串的个数</title>
<script type="text/javascript">
var country = new Array("America", "Greece", "Britain", "Canada", "China", "Egypt");
//定义一个变量保存统计的值
var count = 0;
document.write('在以下字符中：' + "<br/>");
//循环打出数组里的值 for (var i in country)
{
document.write(country[i] + "<br/>");
if(country[i].indexOf('a')!=-1||country[i].indexOf('A')!=-1)
{
count++
} }
document.write('共有' + count + '个字符串中包含a或A'); </script>
</head>
<body>
JavaScript函数：
//常用的系统函数
parseInt() //解析一个字符串并返回一个整数
parseFloat() //解析一个字符串并返回一个浮点数 //结合以上两个函数可以计算两个数的运算结果 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>统计a与A的字符串的个数</title>
<script type="text/javascript">
var num1 = prompt("请输入第一个数","");
var num2 = prompt("请输入第二个数","");
var n1= parseInt(num1) ;
var n2= parseInt(num2) ;
var = result = n1+n2;
document.write(n1+"+"n2+"="+result);
</script>
</head>
<body>
自定义函数：
在JavaScript中，自定义函数由关键字function，函数名，一组参数以及括号中执行的语句组成
function 函数名 (){
//JavaScript语句
[return 返回值]
}
//function是定义函数的关键字，必须有；小括号中有参数即为带参函数，否则为无参函数
----------------------------调用函数----------------------------------
1.通过添加事件来调用
function hello(){
//JavaScript语句
[return 返回值]
}
<input name= "btn" type ="button" value="调用函数" onclick="hello()"/>
2.匿名函数（不推荐使用，只要求能看懂）
function（）{
//JavaScript语句
[return 返回值]
}
//如果想调用匿名函数就得为匿名函数整个语句一个值：
var cot =function hello(){
//JavaScript语句
[return 返回值]
}
<input name= "btn" type ="button" value="调用函数" onclick="cot()"/>
JavaScript中window对象：
window对象是整个BOM的核心，我们可以使用它的对象实现如下功能：
弹出新的浏览窗口
移动，关闭浏览器窗口或者调整窗口的大小
在浏览器中实现页面的前进和后退功能
window对象的常用属性：
| 名 称 | 说 明 |
| history | 有关客户访问过的URL信息 |
| location | 有关当前URL的信息 |
| 名 称 | 说 明 |
| prompt() | 显示可提示用户输入的对话框 |
| alert() | 显示一个带有提示信息一个确定按钮的警告对话框 |
| confirm() | 显示一个带有提示信息，确定，取消的对话框 |
| close() | 关闭浏览器窗口 |
| open() | 打开一个新的浏览器窗口。加载给定的URL所指定的文档 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval() | 按照指定的周期（以毫秒计算）来调用函数或表达式 |
window对象常用的事件：
| 名 称 | 说 明 |
| onload | 一个页面或一幅图像完成加载 |
| onmouseover | 鼠标指针移动到某元素之上 |
| onclick | 鼠标单击某个对象 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
history 对象和location对象
history对象提供用户最近浏览的URL列表，但是出于用隐私方面不在允许脚本访问已经访问过的实际URL，可以使用histrory对象提供
的逐个返回访问过的页面方法，具体方法请去查详细文档
location对象提供当前页面的URL信息，并且可以重新装载当前页面或新页面，其对象属性方法请去查详细文档
document对象的属性与常用方法：
| 属性 | 描述 |
| referrer | 返回载入当前文档的前文档的URL |
| URL | 返回当前文档的URL |
| 方法 | 描述 |
| getElementById（） | 返回对拥有指定id的第一个对象的引用 |
| getElementByName（） | 返回带有指定名称的对象的集合 |
| getElementByTagName（） | 返回带有指定标签名的对象的集合 |
| write（） | 向文档写文本，HTML表达式或javascript代码 |
JavaScript内置对象：
在javascript中，系统的内置对象有Date对象，Array对象，String对象和Math对象等。
Arrya:用于在单独的变量名中存储一系列的值
String：用于支持字符串的处理
Math:使我们有能力执行常用的数学。包含若干个数字常量和函数
Date:用于操作日期和时间
//JavaScript中对象与Java中的类非常相似，需要使用“new 对象名（）“的方法创建 var 日期示例 ＝ new Date(参数)； //日期示例是存储Date对象的变量，可以省略参数，如果没有参数则表示当前日期和时间
//参数是字符串格式“MM DD,YYYY,hh:mm:ss”
Date对象有大量用于设置，获取和操作日期的方法，可以去相关文档去了解。
JavaScript中的Math对象：
Math的常用方法：
| 方法 | 说明 | 示例 |
| ceil() | 对数进行上舍入 |
Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
| floor() | 对数进行下舍入 |
Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
| round() | 对数四舍五入 |
Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
| random() | 返回0~1中的随机数 | Math.random();例如0.6273608814137365 |
JavaScript定时函数
没有定时函数之前时间是静止的，不能动态更新，JavaScript提供了两个定时函数setTimeout()和setInterval().还提供了用于清除
timeoout的两个函数：clearTimeout()和clearInterval();
//setTimeout()
setTimeout("调用的函数名称",等待的毫秒数)
//setInterval()
setInterval("调用的函数名称",周期性调用函数之间间隔毫秒数)
补充：使用定时函数写一个网页倒计时器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>数字倒计时器</title>
<script type="text/javascript">
window.onload = function () {
var time;
//锁定div对象
var dom = document.getElementById("msg");
var num = dom.innerText;
//给开始按钮注册事件
var btnStart = document.getElementById("btnStart"); btnStart.onclick = function () {
time = setInterval(step, 1000); }
function step() {
if(num>0){
num--;
dom.innerText = num;
}
}
//给停止按钮注册事件
var btnStop = document.getElementById("btnStop");
btnStop.onclick = function () {
clearInterval(time);
}
}
</script>
</head>
<body>
<input type="button" id="btnStart" value="开始" />
<input type="button" id="btnStop" value="停止" /><br />
<div id="msg">10</div>
</body>
</html>
//有启动暂停和复位的计时器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD> <BODY>
<input id='show' type="text" readOnly='true' value='0'>
<br/>
<button onclick="start()">开始</button>
<button onclick="stop()">暂停</button>
<button onclick="reset()">复位</button>
<script>
var show = document.getElementById("show");
var int = null; var start = function(){
int=self.setInterval("count()",1000)
}
var stop = function(){
int=window.clearInterval(int);
}
var reset = function(){
show.value = 0;
}
var count = function(){
show.value = show.value*1 + 1
} </script>
</BODY>
</HTML>
//使用定时函数制作动态时钟
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>时钟</title>
<script type="text/javascript">
function startTime() {
var today = new Date()
var h = today.getHours()
var m = today.getMinutes()
var s = today.getSeconds()
// add a zero in front of numbers<10
m = checkTime(m)
s = checkTime(s)
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s
t = setTimeout('startTime()', 500)
} function checkTime(i) {
if (i < 10)
{ i = "0" + i }
return i
}
onload = startTime;
</script>
</head>
<body>
<div id="txt"></div>
</body>
</html>
关于javascript的内容先就到这里结束，后续内容我会不断更新，如果对你有所帮助别忘了留下你的脚步与关注！谢谢
要学JavaScript！进来看吧，反正不花钱！~的更多相关文章
- 怎么学JavaScript？
作者:小不了链接:https://zhuanlan.zhihu.com/p/23265155来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 鉴于时不时,有同学私信问我( ...
- 统一回复《怎么学JavaScript？》
作者:小不了链接:https://zhuanlan.zhihu.com/p/23265155来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 鉴于时不时,有同学私信问我( ...
- 从头开始学JavaScript (三)——数据类型
原文:从头开始学JavaScript (三)--数据类型 一.分类 基本数据类型:undefined.null.string.Boolean.number 复杂数据类型:object object的属 ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- 从头开始学JavaScript (十一)——Object类型
原文:从头开始学JavaScript (十一)--Object类型 一.object类型 一个object就是一系列属性的集合,一个属性包含一个名字(属性名)和一个值(属性值). object对于在应 ...
- 从头开始学JavaScript (十二)——Array类型
原文:从头开始学JavaScript (十二)--Array类型 一.数组的创建 注:ECMAscript数组的每一项都可以保存任何类型的数据 1.1Array构造函数 var colors = ne ...
- 从头开始学JavaScript (十)——垃圾收集
原文:从头开始学JavaScript (十)--垃圾收集 一.垃圾收集 1.1javascript垃圾收集机制: 自动垃圾收集,执行环境会负责管理代码执行过程中的使用的内存.而在C和C++之类的语言中 ...
- 从头开始学JavaScript (九)——执行环境和作用域
原文:从头开始学JavaScript (九)--执行环境和作用域 一.执行环境:定义了变量或者函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有与之关联的变量对象. 变量对象:保存着环境中 ...
- 从头开始学JavaScript (八)——变量
原文:从头开始学JavaScript (八)--变量 一.变量分类: 基本类型值:null.undefined.number.string.Boolean: 引用类型值:保存在内存中的对象,如:Obj ...
- 从头开始学JavaScript (七)——函数
原文:从头开始学JavaScript (七)--函数 一.return 函数在执行完return之后停止并立即退出. return返回值:与return: 如下两个例子: function sum(n ...
随机推荐
- Testin
http://www.testin.cn/ http://news.ccidnet.com/art/66/20150416/5815927_1.html 百度百科上面的 Testin是全球最大的移 ...
- for循环的嵌套——7月24日
练习一:输入一个正整数,用for循环嵌套求阶乘的和 //输入一个正整数,求1!+2!+....+n! 用for循环嵌套 Console.Write("请输入一个正整数:"); ...
- SQL 创建索引的作用以及如何创建索引
SQL 创建索引的作用以及如何创建索引 SQL 创建索引的作用 一.使用索引的优点: 1.通过唯一性索引(unique)可确保数据的唯一性 2.加快数据的检索速度 3.加快表之间的连接 4.减少分组和 ...
- com组件接口
int main( int argc, char *argv[] ) { cout << "Initializing COM" << endl; ...
- js里面引入js
document.write('<script src="http://js.xcar.com.cn/bbs/sidebar/js/publicSidebar.js"> ...
- POJ 2762 tarjan缩点+并查集+度数
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 15494 ...
- WP8 独立存储 总结3(应用设置)
•可在独立存储中使用ApplicationSettings对象•在独立存储中存储键/值对的Dictionary方式存储 •存储的对象将永久保存 在应用设置中保存数据 void saveString(s ...
- Android Studio 配置JPush
1.在JPush官方下载 JPush SDK(jpush-android-arm-2.1.0.zip),我下载的是2.1.0: 2.解压下载好的压缩包(jpush-android-arm-2.1.0. ...
- android selector详解
--> 改变字体的颜色<selector xmlns:android="http://schemas.android.com/apk/res/android"> ...
- [windows操作系统]windows模块
smss.exe csrss.exe Client/Server Runtime Server Subsystem