JavaScript 概述

JavaScript 是运行在浏览器端的脚步语言，JavaScript 主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

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

1. HTML 引入 JavaScript 的方式

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

1	<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

1
2
3

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入2

1	<script type="text/javascript" src="js/index.js"></script>

2. 变量、数据类型及基本语法规范

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

var iNum = 123
var sTr = 'asd'

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

基本数据类型

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：

object

javascript语句与注释

1、javascript语句开始可缩进也可不缩进，缩进是为了方便代码阅读，一条javascript语句应该以“;”结尾;

<script type="text/javascript">    
    var iNum = 123;
    var sTr = 'abc123';
    function fnAlert(){
        alert(sTr);
    };
    fnAlert();
</script>

2、javascript注释

<script type="text/javascript">    
    // 单行注释
    var iNum = 123;
    
    /*  
        多行注释
        1、...
        2、...
    */
    var sTr = 'abc123';
</script>

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

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

匈牙利命名风格：

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

3.函数

函数就是重复执行的代码片段。

1. 函数定义与执行

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
	 alert('hello!');
    }
    // 函数执行
    fnAlert();
</script>

变量与函数预解析

JavaScript 解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义

的变量声明提前，将它赋值为 undefined。

<script type="text/javascript">    
    
    fnAlert();       // 弹出 hello！
  
    function fnAlert(){
        alert('hello!');
    }
    

	alert(iNum);  // 弹出 undefined
    var iNum = 123;
    
</script>

2. 函数传参

Javascript 的函数中可以传递参数。

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

3. 函数的返回值

JavaScript 中函数使用 return 返回内容

函数中 ‘return’ 关键字的作用：

返回函数中的值或者对象

结束函数的运行

<script type="text/javascript">
    // 函数的定义
    function addFunc(num1, num2){
        var result = num1 + num2;
        return result;
        alert('here!');
    }
	
    // 函数的调用
    var result = addFunc(3,4);
    // 弹出7
    alert(result);  
 
</script>

4. 条件语句

想要控制程序的走向，一般使用条件语句。

1) 条件运算符和逻辑运算符:

条件运算符	说明	举例
==	只要求值相等(在比较时会转换数据类型)	“1” == true (结果为true)
===	要求值和类型都相等	“1” === true (结果为false)
>	大于	3 > 5 (结果为false)
<	小于	3 < 5 (结果为true)
>=	大于等于	3 >= 5 (结果为false)
<=	小于等于	3 <= 5 (结果为true)
!=	不等于	3 != 5 (结果为true)
&&(逻辑与)	同真为真,一假则假	x && y (同真为真,一假则假)
\	\	(逻辑或)	全假为假, 一真则真	x \	\	y (全假为假, 一真则真)
! (逻辑非)	非眞则假,非假则真 (取反)	! x (非眞则假,非假则真)

2) 条件语句表达式

if 语句单独使用:

使用时机: 满足一个条件时,进行处理, 其他情况不考虑的.

使用格式: 

if (判断条件) {
    // 如果条件为 true, 进入这里执行
    执行的语句01
    ...
}

if…… else…. 语句:

使用时机: 针对一个条件, 满足处理, 不满足也处理. 只针对一个条件, 互为互斥事件.

使用格式: 

if (判断条件) {
    // 如果条件为 true, 进入这里执行
    执行的语句01
    ...
} else {
    // 如果条件为 false, 进入这里执行
    执行的语句01
    ...
}

if….. else if ….. 语句

使用时机: 针对不同的条件, 进行不同的处理. 需要注意是针对多个条件, 条件间没有必然联系

注意: else if 可以有无限个

使用格式: 

if (判断条件01) {
    // 如果第一个条件为 true, 进入这里执行
    执行的语句01
    ...
} else if (判断条件02) {
    // 如果第二个条件为 true, 进入这里执行
    执行的语句01
    ...
}

if….. else if …… else…… 语句

使用格式: 

if (判断条件01) {
    // 如果第一个条件为 true, 进入这里执行
    执行的语句01
    ...
} else if (判断条件02) {
    // 如果第二个条件为 true, 进入这里执行
    执行的语句01
    ...
} else {
	// 如果上面两个条件都不满足, 进入这里执行
	执行的语句01
	...
}

举例:

var iNum01 = 3;
var iNum02 = 5;
var sTr;
if ( iNum01 > iNum02 ){
    sTr = '大于';
} else {
    sTr = '小于';
}
alert(sTr);

语句嵌套:

var a = 100
if (a > 10) {
    if (a > 20) {
    	alert('大于20啦')
    }
} else {
    alert('没有10大')
}

3) 总结:

&& (同真为真, 一假为假)

True && True ==> True

False && True ==> False

True && False ==> False

False && False ==> False
|| (全假为假, 一真则真)

True || True ===> True

False || True ===> True

True || False ===> True

False || False ===> False
! (非, 取反)

! True ===> False

! False ===> True

5. 获取元素方法

我们可以通过一些方法, 来获取 HTML 中的元素

通过内置对象 document 的 getElementById 方法来获取页面上设置了id属性的元素

获取到的是一个 html 对象，然后将它赋值给一个变量，比如：

JS部分:
<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>

HTML部分:
<div id="div1">这是一个div元素</div>

注意: 上面的语句，如果把 javascript 写在元素的上面，会获取不到当前的 HTML 元素:

因为页面是从上往下加载执行的，javascript 从页面上获取元素 div1 的时候，元素 div1 还没有加载.

解决方法:

第一种方法：将 javascript 放到页面最下边

<body>
    <div id="div1">这是一个div元素</div>
    
    <script type="text/javascript">
        var oDiv = document.getElementById('div1')
        alert(oDiv)
     </script>
</body>

第二种方法：将 javascript 语句放到 window.onload 触发的函数里面

window.onload 方法会在当前页面加载完成之后触发

获取元素的语句放在这个方法中执行，就可以正常获取了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>



<div id="div1">这是一个div元素</div>

6. 操作元素属性

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

操作元素属性

读取属性:

var 变量 = 元素.属性名

> JS部分:
> var oInput = document.getElementById('input1');
> var oA = document.getElementById('link1');
> // 读取属性值
> var sValue = oInput.value;
> var sType = oInput.type;
> var sName = oInput.name;
> var sLinks = oA.href;
> 
> HTML部分:
> <input type="text" name="setsize" id="input1" value="20px">
> <a href="http://www.itcast.cn" id="link1">传智播客</a>
>

改写属性:

元素.属性名 = 新属性值

> JS部分:
> var oA = document.getElementById('link1');
> // 写(设置)属性
> oA.style.color = 'red';
> oA.style.fontSize = sValue;
> 
> HTML部分:
> <a href="http://www.itcast.cn"  id="link1">传智播客</a>
>

如果在 JS 中获取 HTML 的相关属性, 有如下注意点:

如果能够在 HTML 页面正常看到的属性, 我们在 JS 中可以同名获取
如果在 JS 中想要获取 HTML 元素的 class 属性, 我们需要使用 className 来获取
对于 style 里面的属性, 如果使用 ‘-‘ 链接的, 我们要改成驼峰式, 例如: font-size 改成: style.fontSize

上面修改的是标签的属性, 如果我们想要通过 JS 修改标签中的文本内容, 应该怎样修改呢?

我们可以通过: innerHTML 来进行修改:

innerHTML 可以读取或者写入标签的文本部分

JS部分: 
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
    }
</script>


<div id="div1">这是一个div元素</div>

7. 事件属性及匿名函数

1) 事件属性

标签上除了可以添加样式, id, class等属性之外, 还可以添加事件属性.

最常用的事件属性有:

鼠标单击事件 onclick
鼠标双击事件 ondblclick (double)
鼠标移入事件 onmouseover
鼠标移除事件 onmouseout

说明: 我们可以通过将函数名赋值给事件属性的形式, 将事件和函数关联起来

<script type="text/javascript">
    window.onload = function(){
    
        var oBtn = document.getElementById('btn1');
        oBtn.onclick = myalert;

        function myalert(){
            alert('ok!');
        }
    }
</script>

2) 匿名函数

没有名字的函数, 称为匿名函数

可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式。

<script type="text/javascript">
    window.onload = function(){
    
    	// 正常的函数赋值调用
        var oBtn = document.getElementById('btn1');
        oBtn.onclick = myalert;
        function myalert(){
            alert('ok!');
        }
        
       
       // 匿名函数的使用
        oBtn.onclick = function (){
            alert('ok!');
        }
    }
</script>

不忘初心

JavaScript简明教程（一）