javascript 是运行在浏览器端的脚本语言，javascript 主要解决的是前端与用户交互的问题，包括使用交互 和 数据交互，javascript 是浏览器解释执行的

前端三大块：

1. HTML：页面结构
2. CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3. JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

1）行间事件（主要用于事件）

2）页面 script 标签嵌入

3）外部引入（推荐使用）

嵌入页面时需注意

如果把 javascript 写到元素的上面，就会报错，因为页面是从上往下加载执行的，看下面的例子，js 去页面上获取元素 div1 的时候，元素 div1 还没有加载：

解决方法有两种：

1）理论上来说js标签放在html文档的任何位置都可以，规范起见，推荐放到body结束标签的末尾，包含到body标签内：

这样处理的好处是无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢造成页面卡死的问题。另外，Yahoo的前端优化指南里就有这一条

2）将javascript语句放到window.onload触发的函数里面，获取元素的语句会在页面加载完后才执行，就不会出错了：

javascript 是一种弱类型语言，变量类型由它的值来决定，定义变量需要用关键字 var

var iNum = 123;
var sTr = "hello";

//同时定义多个变量可以用","隔开，共用一个 var 关键字
var iNum = 45, sTr = "world", sCount="68";

变量类型（共6种）

5 种基本数据类型：

1. number
2. string
3. boolean
4. undefined    （变量声明未初始化，它的值就是 undefined）
5. null    （表示空对象，如果定义的变量准备保存对象，可以将变量初始化为 null，在页面上获取不到对象，返回的值就是 null）

1 种复合类型：

　　object

语句块

javascript 语句开始可缩进也可不缩进，缩进是为了排版，方便阅读；一条语句的结尾应该以 ";" 结尾

var iNum = 123;
var sTr = "hello world";

function fnAlert(){
alert(sTr)
};

fnAlert();

注释

//单行注释
var iNum = 123;

/*
多行注释
。。。
。。。
*/

变量、函数、属性命名规范

1. 区分大小写
2. 第一个字符必须是字母、下划线（_）或者美元符号（$）
3. 其它字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

• 对象 o (Object)：oDiv
• 数组 a (Array)：altems
• 字符串 s (String)：sUserName
• 整数 i (Integer)：iltemCount
• 布尔值 b (Boolean)：blsComplete
• 浮点数 f (Float)：fPrice
• 函数 fn (Function)：fnHandler
• 正则表达式 re (RegExp)：reEmailCheck

函数就是重复执行的代码块

函数的定义和执行

//函数定义
function fnAlert(){
alert("hello world")
}

// 函数执行
fnAlert();

变量和函数的预解析

javascript 解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将 function 定义的函数提前，并且将 var 定义的变量声明提前，将它赋值为undefined

fnAlert(); //弹出 hello world
alert(iNum); //弹出 undefined

function fnAlert(){
alert("hello world")
}

var iNum = 123;

函数中传递参数

//接收参数时不需要指明参数的类型
function fnAlert(sTr) {
alert(sTr)
}

fnAlert("hello world");

函数 return 关键字

return 关键字的作用：

1. 返回函数中的值或者对象
2. 结束函数的运行

demo：

function fnAdd(iNum1, iNum2) {
var iRs = iNum1 + iNum2
return iRs
alert("here!")
}

var iCount = fnAdd(2,4);
alert(iCount); //弹出 7

通过条件来控制程序的走向，就需要用到条件语句

条件运算符

==、===、>、>=、<、<=、!=、&&(与)、||(或)、!(非)

demo（比较两个数字的大小）：

var iNum01 = 1, iNum02 = 2;
var sTr;

if (iNum01 > iNum02) {
sTr = "greater than"
}
else if (iNum01 < iNum02){
sTr = "less than"
}
else {
sTr = "equality"
}
alert(sTr);

可以使用内置对象 document 上个 getElementById() 方法来获取页面上设置的 id 属性的元素，取到的是一个 html 对象，然后将它赋值给一个变量，如下：

获取了页面元素，就可以对页面的属性进行操作，属性的操作包括属性的读和写

操作元素属性：

• 读取：var 变量 = 元素.属性名
• 修改：元素.属性名 = 新属性值

属性名在 js 中的写法：

1. html 的属性和 js 里面的属性写法一样
2. class 属性写成 className
3. style 属性里面的属性，有横线（-）的改成驼峰式，比如：font-size 改成 style.fontSize

demo：

百度一下