JavaScript基础语法

1、JavaScript简介

1.1、JavaScript的出现

JavaScript与Java不同，JavaScript早期的主要目的是处理一些用户的输入验证操作，没有JavaScript之前，所有数据都是提交到网站后台来进行检测，速度慢用户体验不好，所以出现了JavaScript脚本语言。

1.2、JavaScript的功能

JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
javascript运行必须依赖于宿主环境语言，即页面语言HTML。JavaScript是解释型的语言，解释型：不需要编译，解释器程序会每读取一条语句就执行。运行速度慢，浏览器中默认内置了javascript的解释器程序。
常见的脚本语言：
ECMASCRIPT主要进行所有脚本语言的标准制定。

• JavaScript
• JScript
• VBScript
• ActionScript

JavaScript是基于对象和事件的脚本语言

一个完整的JavaScript由以下三个部分组成

• ECMAScript
• DOM(全称Document Object Model，即文档对象模型)
• BOM(全称 Browser Object Model，浏览器对象模型)

1.3、JavaScript特点

1. 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
2. 跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）

2、JavaScript基本语法

2.1 语法

2.1.1 引入方法

向HTML页面插入JavaScript的主要方法，就是使用标签对<script>．．．</script>。有两种使用方法：

• 直接在HTML中嵌入JavaScript代码，在标签对<script>．．．</script>中写JavaScript代码
• 1. 使用script标签的src属性引入一个js文件。（方便后期维护，扩展）
     例：<script src="test.js" type="text/javascript"></script>

2.1.2 注意

1. 页面上可以有多个<script>标签
2. <script>标签按顺序执行
3. <script>标签可以出现在任意的页面位置
4. <script>标签一定要写</script>关闭，而不能<script/>这样关闭。否则没有任何错误信息，但是没有运行结果。
5. 区分大小写

2.1.3 注释

单行注释以双斜杠开头（//）
多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）

2.1.4 常用函数

window.alert() 或写为 alert() ：显示一个提示框显示内容。
window.document.write() ：在网页的当前位置处写内容。

2.2 JavaScript数据类型

基本类型：number，string，boolean
变量是弱类型的，与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。因此，可以随时改变变量所存数据的类型（尽量避免这样做）

例如：

<script type="text/javascript" >    var color = "red";    var num = 25;    var visible = true;    // 尽量避免这样做    var message = "hello";    message = 100;</script>

2.2.1 typeof操作符

ECMASCRIPT 中有4种基本数据类型: Undefined, Boolean,Number和String
关键字typeof可以获取一个变量的类型。

<script type="text/javascript" >    var a = 100;    var b = 3.14;    var c = true;    var d = 'a';    var e = "hello";    document.write( typeof a + "<br/>");    document.write( typeof b + "<br/>");    document.write( typeof c + "<br/>");    document.write( typeof d + "<br/>");    document.write( typeof e + "<br/>");    document.write( typeof f + "<br/>");    </script>

类型的总结：

• 所有的数值都是number类型
• 字符和字符串都是string类型
• 布尔是boolean类型
• 如果一个变量没有初始化值的时候，其类型为undefined类型

2.3 流程控制语句

2.3.1 判断

if (condition) statement1 else statement2

判断的条件会发生自动类型转换：

number：如果非0为true，0为false
string：如果非null或非空为true，否则为false
undefined：false
NaN: false
对象类型：非null为true，否则为false。

2.3.2 选择

switch 语句的语法：switch (expression)  case value: statement;    break;...  default: statement;

ECMAScript 和 Java 中的 switch 语句有两点不同。在 ECMAScript 中，switch 语句可以用于字符串，而且能用不是常量的值说明情况

var color = "xx";var value1 = "red", value2 = "green";switch(color) {    case value1:        alert("红色");        break;    case value2:        alert("绿色");        break;    default:        alert("执行默认default");}

var num = 20;switch(true) {    case num >= 0 && num <= 10:        alert("大于0小于等于10");        break;    case num>10&&num<=20:        alert("大于10小于等于20");        break;}

2.3.3 循环

while循环

while (expression) statement

do while循环

do {statement} while (expression);

for 语句

iCount = 6;for (var i = 0; i < iCount; i++) {  alert(i);}

for in 用于枚举对象的属性或者遍历一个数组的元素

for (property in expression) statement

2.3.4 With语句

有了 With 语句，在存取对象属性和方法时就不用重复指定参考对象

with(obj){    操作obj的属性语句;}

<script type="text/javascript">          with(document){             write("您好 !");             write("<br>这个文档的标题是 : \"" + title + "\".");             write("<br>这个文档的 URL 是: " + URL);             write("<br>现在您不用每次都写出 document 对象的前缀了 !");          }</script>

2.4 JavaScript函数

JS中有三种定义函数的方式
1、正常方式：function mysum(num1,num2){return num1+num2;}

function mysum(num1,num2){        return num1 + num2;    }var myresult = mysum(100,200);alert("myresult="+myresult);

2、构造器方式：new Function("num1","num2","return num1+num2;")

var youresult = new Function("num1","num2","return num1+num2");alert( youresult(1000,2000) );

3、直接量或匿名或无名方式：var mysum = function(num1,num2){return num1+num2;}

var theyresult = function(num1,num2){        return num1 + num2;      }alert( theyresult(10000,20000) );

2.5 JS中有四种对象

2.5.1 内置对象 ：Date，Math，String，Array

Date对象

var str = new Date().toLocaleString();window.document.write("<font size='44' color='red'>"+str+"</font>");

String对象

常见的方法：Anchor（） 生产锚点Blink（）   为元素添加blink标签 charAt()    返回指定索引位置处的字符。charCodeAt() 回一个整数，代表指定位置上字符的 Unicode 编码。Concat()    回字符串值，该值包含了两个或更多个提供的字符串的连接。Fontcolor()  把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端indexOf()    返回 String 对象内第一次出现子字符串的字符位置italics()    把 HTML <I> 标记放置在 String 对象中的文本两端。 Link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。Replace()      返回根据正则表达式进行文字替换后的字符串的复制Split()        切割   Substr()       截取子串toUpperCase()  转大写toLowerCase    转小写

document.write("第五章".anchor("ch1"));document.write("第五章".charAt(0));document.write("第五章".fontcolor("#ff0000"));

Array对象

var arrs=new Array()；//不指定长度var arrs=new Array(20);//指定长度var arrs=new Array("hello");//会创建一个元素的数组var arrs=["aa","bb","cc"];//创建一个包含3个字符串的数组// 遍历数组for(var i = 0; i < arr.length; i++){    alert(arr[i]);}   for( var i in arr ){    // i 是遍历出的数组中的索引，从0开始，一直到最大索引。    // 如果有其他属性，也会遍历出来，其实索引就是数组对象的属性。    alert(arr[i]);}//下标越界时：var arr = ["aa", "bb"];document.write(arr[200]);// 显示undefined

2.5.2 自定义对象（两种方式）

function Student(id,name,sal){    //this指向s引用    this.id = id;    this.name = name;    this.sal = sal;}var s = new Student(1,"abc",7000);document.write("编号:" + s.id + "<br/>");/* * 自定义对象Object方式 * *  */var person = new Object();person.name = "jack";person.age = 28;person.sayHello = function() {    document.write(this.name + ":" + this.age);}person.sayHello();

2.5.3 浏览器对象： window，document，status，location，history

2.5.4 ActiveX对象　

2.6 prototype

“prototype”字面翻译是“原型”，是javascript实现继承的主要手段。prototype是javascript中的函数(function)的一个保留属性，并且它的值是一个对象

Prototype注意的细节：

1. prototype是函数(function)的一个必备属性(书面一点的说法是”保留属性”)(只要是function,就一定有一个prototype属性)
2. prototype的值是一个对象
3. 可以任意修改函数的prototype属性的值。
4. 一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。
   例：如果我们想给Array数组对象添加一个方法

    <script type="text/javascript">        var arr = new Array(1,2,3,4,5,6);        Array.prototype.getMax = function(){            var max = this[0];            for(var index=1;index<this.length;index++){                if(max<this[index]){                    max = this[index];                }            }            return max;        }        window.document.write("最大值："+arr.getMax());        window.alert(arr.getMax());    </script>