JavaScript简介和基础语法

本学期又进入到了web前端开发的学习当中，这一次我们接触的是JavaScript，一种原则性不那么强的语言，虽然它不像java语言那么的规范严谨甚至连创造它的人都嫌弃这门语言但就是这样一门“毫无原则”可言的一门轻量级脚本语言在之后的web发展中起到了一个里程碑一样的作用(个人观点).
先简单的回顾一下本学期“使用JS&jQuery改善用户体验”这本书前五章告诉我们的内容:
第一章《JavaScript基本语法》
第二章《JavaScript函数和事件》
第三章《javaScript浏览器对象》
第四章《javaScript对象》
第五章《指导学习:JavaScript》
还是按照流程来一章一章的进行总结.
第一章:

1.1什么是javaScript?

image.png

这是我在百度百科上找到的解释，用我自己的理解就是JavaScript它是一门为了给原本HTML静态的页面增加一些动态效果以及对HTML和CSS的一些标签元素进行动态的操作(删除、修改、等)从而实现增加用户的交互，控制浏览器以及动态创建页面等功能的一种轻量级脚本语言，使用JavaScript我觉得还有一个最大的两个好处1.是能够规范化web开发的代码，能够使得代码更加的清晰，配合上必要的注释使得代码让人更易理解2.解决了在更早些年带宽并不那么好的时期，表单验证需要非常长的缓冲时间的问题JavaScript在引入后很好的改善了这样一个问题，实现了不通过服务器对网页进行一些简单的表单验证。这在很大程度上减轻了服务器端的压力也让用户能够更加及时的获取到反馈信息。

1.2 JavaScript的成长史。

1995年JavaScript诞生于网景公司的一名程序员手中，他的名字叫做布兰登·艾奇。

image.png

而在开发初期JavaScript并不叫这个名字，最初的名字叫做LiveScript，而当时的网景公司（Netscape）为了蹭一波Java的热度临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。
1997年7月，ECMAScript 1.0发布。
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。到了2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能。
2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。
2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。这是因为TC39委员会计划，以后每年发布一个ECMAScirpt的版本，下一个版本在2016年发布，称为“ECMAScript 2016”。
除了ECMAScript的版本，很长一段时间中，Netscape公司（以及继承它的Mozilla基金会）在内部依然使用自己的版本号。这导致了JavaScript有自己不同于ECMAScript的版本号。1996年3月，Navigator 2.0内置了JavaScript 1.0。JavaScript 1.1版对应ECMAScript 1.0，但是直到JavaScript 1.4版才完全兼容ECMAScript 1.0。JavaScript 1.5版完全兼容ECMAScript 3.0。目前的JavaScript 1.8版完全兼容ECMAScript 5。

1.3 JavaScript的执行原理

javaScript的执行原理相比Java来说有一个很明显的区别，那就是这么语言没有编译器，也就是说它不需要被编译，javaScript是由javascript引擎直接解释执行的，从上至下依次读取解析HTML或脚本代码。

1.4 JavaScript脚本代码

JavaScript脚本代码作用嵌入HTML代码中的方法有三种：
1.4.1 HTML文件混合方式
利用<script></script>这对标签直接嵌入在html页面当中例如

image.png

1.4.2 JS文件引用
在外部定义一个js文件对象:

image.png

在html代码中引用:

image.png

效果图:

image.png

1.4.3 HTML代码嵌入方式

image.png

点击图中的a标签联接将会跳转：

image.png

1.5JavaScript语法

image.png

1.5.1 变量
JavaScript是一种弱类型的语言，它只有四种变量类型：1.数字 number 2.字符串 String 3.布尔值 booleam 4.数组 array
1.5.2 基本数据类型
javaScript 中的基本数据类型也只有五种:1.undefined 未定义类型 2. null 空类型 3.boolean 布尔值类型 4. number 数字类型 5.String 字符串类型
1.5.3 运算符号

类型	运算符
算数运算符	+ - % / ++ --
赋值运算符	= += -= *= /= %=
比较运算符	> < = >= <= == === != !==

JavaScript有四大类型的运算符类型,除了这四大类之外还有三类：位运算符、条件运算符、字符串运算符
1.5.4 控制语句
因为javaScript是基于java而产生的一门脚本语言，所以在很多方面其实都是相通的，就比如在控制语句方面你会发现其实和java基本一模一样。

while和do...while都能实现固定次数和不固定次数的循环，但是while和do...while更适合做不固定次数的循环。
while循环，先进行条件判断，再做代码的执行。而do...while先执行代码，再做条件判断。因此，do...while至少会执行一次代码
for循环适用于固定次数的循环。
break和continue可以修改循环的执行次序。
1.5.5 函数function
javaScript函数类似于java中的方法，它的函数声明定义必须通过function关键字，具体语法如下

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}//其中name即代表函数名，小括号中的便是形参

1.5.6 css样式
js可以修改HTML页面的中的元素，对元素进行动态的操作，并且也可以通过节点或者id名class名等找到指定对像并修改其css样式.

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>上面的段落已被脚本改变。</p>

</body>
</html>

1.5.7 事件驱动
javaScript事件驱动原理：当用户在网页客户端点击一个按钮或者点击某一个文本框，在键盘上敲击某一个键时，这些过程便我们的事件源，而被我们点击的按钮，文本框，或者按键这些具体详细的一些信息和值便是我们所说的事件对象，与java一样当javaScript引擎监听到这些事件发生时便会调用对应的事件处理程序.
而javaScript事件的类型大致我分为了一下四种:

鼠标事件：
当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件，主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。
键盘事件：
当用户用键盘输入信息时，会触发键盘操作事件。主要包括keydown、keypress、keyup三个。
HTML事件：
在html节点加载变更等相关的事件，比如window的onload、unload、abort、error，文本框select、change等等。
其它事件：
页面中一些特殊对象运行过程中产生的事件，比如xml http request对象的相关事件。

当我们给网页的body部门添加一个宽和高，我们事先在html代码块中定义标签然后添加对应的事件，再在js代码块中创建监听此事件的处理函数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <script type="text/javascript">
        function test(e) {
            window.alert("x = "+ e.clientX + " y =" + e.clientY);
        }
    </script>
</head>
<body style="width: 1000px; height: 800px; border: 1px solid red;" onmousedown="test(event)">
    //给body添加一个宽高并添加onmousedown事件
</body>
</html>

1.5.8 表单验证
在之前介绍JavaScript时，就有提到了js怎样解决因带宽问题，用户不能及时接收反馈信息的这样一个表单验证问题，js在用户数据在传送至服务端之前，会通过自己的一些简单的逻辑判断进行先验证，而这些逻辑判断语句就与我们之前Java学习到的一样，通过在脚本中嵌入逻辑验证语句来实现这样一个验证。例如我们验证一个Email邮箱，我们只需要在Script代码块中创建这样一个验证的函数，而在HTML页面里找到我们需要用到验证文本框或者按钮给它添加一个事件监听并且调用我们之前的方法。

<html>
<head>
<script type="text/javascript">
//在Script代码块中实现具体的代码操作并调用
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

JavaScript简介和基础语法

1.1什么是javaScript? image.png

1.2 JavaScript的成长史。

1.3 JavaScript的执行原理

1.4 JavaScript脚本代码

1.5JavaScript语法

1.1什么是javaScript?

image.png