一、js的简介
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
交互性（信息的动态交互）
安全性（不可以直接访问本地硬盘）
跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）
二、JavaScript与Java不同
NetScape公司开发的一种脚本语言，并且可以在所有主要浏览器上运行。
JavaScript是基于对象的，Java是面向对象的。
JavaScript只需要解析就可以执行了，而Java需要先编译成字节码文件，再执行。
JavaScript是一种弱类型语言，Java是一种强类型语言。
三、JavaScript语言组成
一个完成的JavaScript实现由以下3个部分组成：
核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）
四、js与HTML的结合方式
js与HTML的结合方式一：
<!DOCTYPE html>
<html>
<head>
<title>js和HTML的结合.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--
js和HTML的结合
HTML提供了一个标签
<script type="text/javascript">
</script>
-->
<script type="text/javascript">
window.alert("哈哈");
</script>
</head>
<body>
</body>
</html>js与HTML的结合方式二：
main.js
window.alert("哈哈");<!DOCTYPE html> <html> <head> <title>js和HTML的结合.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入外部的文件，有一个外部的文件，编写js的文件。 <script type="text/javascript" src="js的相对路径"> </script> 如果<script>通过src属性引入了外部的文件，里面的js代码就不会执行了 --> <script type="text/javascript" src="js/main.js"> </script> </head> <body> </body> </html>
五、js的基本数据类型
JavaScript和Java一样存在两种数据类型
原始值（存储在stack中的简单数据）。
引用值（存储在堆heap中对象）。
5种原始数据类型
Undefined、Null、Boolean、Number和String
JavaScript中字符串是原始数据类型。
通过typeof运算符，查看变量类型
所有的引用类型都是Object。
通过instanceof运算符解决typeof对象类型判断问题
区分undefined和null?
变量定义了，没有初始化；访问对象不存在属性--undefined。
访问的对象不存在--null。
六、JavaScript的语法种类
关键字：被赋予了特殊含义的单词。
标识符：用于标志数据和表达式的符号。（变量、函数名）
注释：说明解释程序。
变量：标识内存中一片空间，用于存储数据，数据是可以变化的。
运算符：可以让数据进行运算的符号。
语句：对程序的运行流程进行控制的表达式。
函数：用于对功能代码进行封装，便于提高复用性。
数据：对多数据进行存储，便于操作。
对象：封装体，既可以封装数据，又可以封装函数。
七、JavaScript的变量
JavaScript是采用一个关键字var来声明变量的。
JavaScript的变量非严谨的 var x = 4;中的var和;都可以省略不写。
JavaScript是弱类型的语言，定义的变量什么类型的数据都可以赋值。
字符串类型中使用""和‘‘号都是String类型的数据。
八、JavaScript的运算符
JavaScript中小数和整数都是数字类型，所以除法中没有整数，会出现小数。
字符串与数字相加，是字符串连接，如果相减，字符串直接装换成数字再相减。
Boolean类型可以进行运算，false就是0或null,非0非null是true,默认为1。
++--和Java一样哦。
九、JavaScript的语句
判断语句中，条件如果直接写=号,那就是赋值操作。
switch和Java中一样。
for循环也和Java中的一样，但是要注意定义变量的时候使用var，而不是java中的int。
十、JavaScript的数组
数组有两种定义方式：
var arr = [1,2,3];定义一个数组，包含三个元素。
var arr = new Array(5);定义一个数组，数组的长度是5。
var arr = new Array(1,2,3);定义一个数组，包含三个元素。
数组有属性length。
数组的长度是可变的。
数组可以存放不同的数据类型的数据。
十一、JavaScript函数
函数定义的格式，关键字function。
函数需要调用才能执行。
定义函数参数列表的时候，不必使用var关键字。
JavaScript中不存在重载形式。
在每个JavaScript的函数中，都存在一个数组arguments，用于存储参数列表。
如果调用方式的时候，忘记写()，则会把函数对象的引用传递给接收的变量，而打印出函数体的内容。
<!DOCTYPE html>
<html>
<head>
<title>js的函数</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" >
function add(a,b){
return a + b;
}
var result = add(2,5);
document.write(result);
</script>
</head>
<body>
</body>
</html>十二、js的动态函数、匿名函数以及全局变量和局部变量
动态函数是通过js的内置对象Function，通过new Function(参数1，参数2)来创建动态函数。
<!DOCTYPE html>
<html>
<head>
<title>js的动态和匿名函数.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var add = new Function("x,y","var sum;sum=x+y;return sum;");
var result = add(1,2);
alert(result);
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>匿名函数就是没有名称的函数，通常是函数的简写形式。
<!DOCTYPE html>
<html>
<head>
<title>js的动态和匿名函数.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var result = function(){
return 100;
};
alert(result());
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html> 全局变量：在<script>标签中定义的变量，在该标签内乃至整个页面都有效。
局部变量：在函数体内定义的变量。
十三、js的对象之String对象
String对象的方法分为两类，一种是关于与HTML相关的方法；一种和Java中的String相似的方法。
<!DOCTYPE html> <html> <head> <title>01-js之String.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* bold()方法 定义的用法：bold()方法用于把字符串显示为粗体 语法： stringObject.bold() */ var str = "Hello World!"; document.write(str.bold()); </script> </head> <body> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>01-js之String.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
/*
fontcolor()
定义和用法：fontcolor()方法用于按照指定的颜色来显示字符串
语法：
stringObject.fontcolor(color)
*/
var str = "Hello World!";
document.write(str.fontcolor("red"));
</script>
</head>
<body>
</body>
</html><!DOCTYPE html> <html> <head> <title>01-js之String.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* italics() 定义和用法：italics() 方法用于把字符串显示为斜体。 语法： stringObject.italics() */ var str = "Hello World!"; document.write(str.italics()); </script> </head> <body> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>01-js之String.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
/*
link()
定义和用法：link() 方法用于把字符串显示为超链接。
语法：
stringObject.link(url)
*/
var str = "baidu一下 我就知道";
document.write(str.link("http://www.baidu.com/"));
</script>
</head>
<body>
</body>
</html><!DOCTYPE html> <html> <head> <title>01-js之String.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* fontsize() 定义和用法：fontsize() 方法用于按照指定的尺寸来显示字符串。 语法： stringObject.fontsize(size) */ var str = "Hello World!"; document.write(str.fontsize(7)); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <title>01-js之String.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* charAt() 定义和用法：charAt() 方法可返回指定位置的字符。 请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。 语法： stringObject.charAt(index) */ var str = "Hello World!"; document.write(str.charAt(1)); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <title>01-js之String.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* toLocaleLowerCase() 定义和用法：toLocaleLowerCase() 方法用于把字符串转换为小写。 语法： stringObject.toLocaleLowerCase() */ var str = "Hello World!"; document.write(str.toLocaleLowerCase()); </script> </head> <body> </body> </html>
十三、js的对象之Array对象
Array对象用于在单个的变量中存储多个值。
创建Array对象的语法：
new Array(); new Array(size); new Array(ele1,ele2,ele3,……,elen)
<!DOCTYPE html> <html> <head> <title>01-js之String.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* concat() 定义和用法：concat() 方法用于连接两个或多个数组。 语法： arrayObject.concat(arrayX,arrayX,......,arrayX) */ var a = [1,2,3]; document.write(a.concat(4,5)); </script> </head> <body> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>01-js之String.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
/*
join()
定义和用法：join() 方法用于把数组中的所有元素放入一个字符串。
语法：
arrayObject.join(separator)
*/
var a = [1,2,3];
document.write(a.join("-"));
</script>
</head>
<body>
</body>
</html>十三、js的对象之Math对象
Math对象中的方法全都是静态方法，所以不用new直接调用即可。
<!DOCTYPE html> <html> <head> <title>01-js之Math.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* ceil() 定义和用法：ceil() 方法可对一个数进行上舍入。 语法： Math.ceil(x) */ document.write(Math.ceil(0.60)); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <title>01-js之Math.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* floor() 定义和用法：floor()方法可对一个数进行下舍入。 语法： Math.floor(x) */ document.write(Math.floor(0.60)); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <title>01-js之Math.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* round() 定义和用法：round() 方法可把一个数字舍入为最接近的整数。 语法： Math.round(x) */ document.write(Math.round(0.60)); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <title>01-js之Math.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> /* random() 定义和用法：random() 方法可返回介于 0 ~ 1 之间的一个随机数。 语法： Math.random() */ document.write(Math.random()); </script> </head> <body> </body> </html>
本文出自 “11831428” 博客，请务必保留此出处http://11841428.blog.51cto.com/11831428/1903377
原文：http://11841428.blog.51cto.com/11831428/1903377