标号（11）：python(就业阶段)——javascript入门及进阶

<1>javascript介绍

1、JavaScript是运行在浏览器端的脚本语言
2、JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的。
3、浏览器弹窗

<script>
	alert("helloworld")
</script>

4、控制台输出

<script>
	console.log('吃了么?')
</script>

<2>javascript嵌入页面的方式

1、内嵌式（学习用）

<script>
		alert("你好!")
</script>

2、外链式（开发用）

外链式：一个从外部引入的js,后写的内容不显示

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

3、行内式（行间事件，用这种类型的多用于事件）

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

<3>变量、数据类型及基本语法规范

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定

1、变量

定义变量需要用关键字 ‘var’，同时定义多个变量可以用","隔开，公用一个‘var’关键字

<script>
	var iNum = 45,sTr='qwe',sCount='68';
</script>

2、数据类型

基本数据类型：

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

复杂数据类型

（1）object（dict）
（2）array（list）
（3）function（def）

查看数据类型

<script>
	typeof()
</script>

3、javascript语句与注释

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

单行注释

   // 注释1: 单行注释;

多行注释

 /* 
     注释2: 
      多行注释
      多行注释
      多行注释
*/

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

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
4、习惯小驼峰命名
5、匈牙利命名风格：

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

<4>函数

含义：函数就是重复执行的代码片。

1、函数的定义

<script>
	function 函数名（）{ 代码块  }  // 函数的定义
	函数名（）  // 函数的执行
</script>

2、变量与函数预解析

（1）JavaScript解析过程分为两个阶段

编译阶段

编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined变量只提升变量名，不提升变量值，函数整体提升（能在定义之前能用函数，不能用变量）

执行阶段

3、函数传参及返回值

（1）函数传参 javascript的函数中可以传递参数。

（2）函数’return’关键字

函数中return关键字的作用：

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

<5>运算符

1、条件运算符

（1） == 不判断类型 === 需要判断类型
（2）>、 >=、 <、 <=、 !=

2、逻辑运算符

&& 、||、!

3、算术运算符

+ 、 -、 * 、 / 、 %

4、赋值运算符

=、 +=、 -= 、 *= 、 /= 、 %=

5、幂函数

Math.pow(x,y)

<6>条件语句

通过条件来控制程序的走向

if else

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

多重if else语句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

<6>获取元素方法

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量。id是唯一的，出现重名时，取前面的。

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

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

window.onload：整个窗口说有标签全部加载完毕，就会执行后面的函数（入口函数）

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

....

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

<7>操作元素属性

1、读取属性

（1）var 变量 = 元素.属性名
（2）普通属性：id href title name src （input中的value属性，也是普通属性----经常使用）
（3）获取双标签内部的内容： innerHTML

2、改写属性

元素.属性名 = 新属性值

3、属性名在js中的写法

（1）html的属性和js里面属性写法一样
（2）“class” 属性写成 “className”
（3）“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
（4）innerHTML 可以读取或者写入标签包裹的内容,可以获取值，也可以赋值(可以识别标签的)

<8>事件属性及匿名函数

1、常用的事件属性

将函数名称赋值给元素事件属性，可以将事件和函数关联起来

（1）鼠标点击事件属性(onclick)
（2）鼠标移入事件属性(onmouseover)
（3）鼠标移出事件属性(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 = function (){
	       alert('ok!');
	   }
	}

</script>