一、JavaScript
Javascript是指运行在浏览器端的脚本语言，是由浏览器解释执行的，简称为js，它的主要功能是使网页和用户实现交互功能，增强用户的体验效果。
二、Javascript的使用方式
JavaSript主要有三种使用方式：
1.行内式（主要用于事件）
<body>
<!-- 行内式 -->
<!-- button 是按钮标签的意思，onclick是单击事件， alert是js中的打印，相当于python中的print -->
<!-- 即单击这个按钮 打印出hello world 也就是通过行内式的方式实现了交互效果-->
<input type="button" name="" id="" value="点我有惊喜" onclick='alert("hello world!")'>
</body>2. 内嵌式
<!-- 内嵌式 -->
<!-- 在head头标签中使用script，输出hello world ! -->
<script>
alert("hello world !")
</script>
3.外链式
<!-- 外链式 -->
<!-- 在head头标签中使用script，通过src属性导入其他js文件 -->
<!-- 即可使用其他js文件中的代码实现交互 -->
<script src="myjs.js"></script>
三、js的变量和数据类型
JS和python一样都是一种弱类型语言，所以在定义变量的时候不需要指定其数据类型，JS中变量的类型是由变量的值来决定的。
定义变量需要用关键字“var” 。
1.定义变量
var 变量名 = 值;
例：var iNum = 123;
var sStr = “hello”;
var iNum = 456, sStr = “world”, bBln = True;
2.变量的数据类型
JS中共有6种数据类型，包括五种基本数据类型和一种复杂的数据类型(object)。
五种基本数据类型:
- 数字类型 number
- 字符串类型 string
- 布尔类型 boolean
- 未初始化类型 undefined
- 空对象类型 null
另一种复杂类型Object在文章后面会详细姐介绍。
3.JS中的注释
-
<script> // 单行注释 /* 多行注释 1.*** 2.*** */ </script>
4.变量的命名规范
（1）变量名区分大小写
（2）第一个字符必须是字母、下划线(_)或者美元符号($)
（3）其他字符可以是字母、数字、下划线和美元符号
四、JS中的函数定义和使用
1.函数定义和调用
这里的函数和python中的函数意义相同，就是封装一段可以重复执行的代码。JS中使用关键字function定义函数。
函数的定义
function 函数名(参数[参数可选]){
// 函数的代码实现
...
}函数的调用
函数名(参数[参数可选])
这个比较简单，所以我们直接来定义一个有参数有返回值的函数。并且调用它。
<script>
// 定义一个有参数有返回值的函数
function fnAdd(inum1, inum2){
var is=inum1 + inum2;
return is;
alter("here!");
}
// 调用函数并传参，输出结果。
var iCount = fnAdd(10, 20);
alert(iCount);
</script>
2.变量的作用域
变量的作用域分为全局变量和局部变量，与python中大体相同。
全局变量：就是在函数外定义的变量，可以在不同的函数之间使用
局部变量：就是在函数内部定义的变量，只可以在函数内部使用
五、JS中的条件语句
1.分为三中判断语句
if
if ..else...
if ..else if .. else..
与python中使用方法相同，大家只需要了解一下语法即可。
2.比较运算符
假如 x = 5, 查看比较后的结果:
| 比较运算符 | 描述 | 例子 |
| == | 等于 | x == 8 为 false |
| === | 全等(值和类型) | x === 5 为 true; x === "5" 为 false |
| != | 不等于 | x != 8 为 true |
| > | 大于 | x > 8 为 false |
| < | 小于 | x < 8 为 true |
| >= | 大于或等于 | x >= 8 为 false |
| <= | 小于或等于 | x <= 8 为 true |
注：这里的
说明： == 只会比较值，默认会把等号两边的值转换为数字进行比较。这里的===会比较值和类型，也就是值和类型都完全相同时才为真。
2.逻辑运算符（与python中用法相同，语法略有不同）
假如 x=6, y=3, 查看比较后的结果:
| 比较运算符 | 描述 | 例子 |
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
六、获取标签的元素
1.获取标签的元素
使用内置对象document.getElementByid方法来获取页面中设置了id属性的标签元素，获取到的是一个html对昂，然后将这个对象赋给一个变量。比如：
<script>
var oBj = document.getElementById('div001');
alert(oBj);
</script>
<div id="div001">努力的人运气不会太差</div>注：这个代码把js代码写在了div元素的上面，运行时会出现错误，因为html代码是从上往下执行的，在获取标签对象的时候，div标签还没有被加载。
解决方法有两种：
- 是把js代码放在需要操作的div元素的下面，但是这种方法不建议。
- 是设置页面加载完成了才会执行的函数，在执行的函数里面获取元素。
<script>
window.onload = function(){
var oBj = document.getElementById('div001'); }
</script>注：onload是一个页面中所有元素都加载完成的事件，给onload设置函数的时候，当事件触发就会执行函数。
七、操作元素标签的属性
1.属性的操作
我们刚刚学习了获取标签的对象，那么获取了标签了对象是不是就可以对这个标签的属性进行操作了呢？
对的。我们可以对这个标签的属性、内容等都可以进行操作了。
属性的操作有两种：属性的读取和属性的设置
属性在js中的写法有两个需要注意的地方
- html的属性和js中的属性大部分的写法都是一样的，只有“class”更改为“className”。
- “style”中的属性，有横杠的（-）改为驼峰式，比如“font-size”改为“fontSize”
3．代码
<script>
Window.onload = function(){
// 获取标签对象
var oInput = document.getElementById(“input1”);
var oA = document.getElementById(“lin1”);
// 读取属性值
var sValue = oInput.value;
var sName = oInput.name;
var sLinks = oA.href;
// 操作class 属性，将其改写为“cls222”
oInput.className = “cls222”;
oA.style.color = “red”;
oA.style.fontSize = sValue;
// 通过innerHTML来获取标签元素的内容
// 读取
var sLinks = oA.innerHTML();
alert(sLinks);
// 更改
oA.innerHTML(“谷歌浏览器！”)
八、JS中的数组及其操作方法
1.数组
数组就是一组数据的集合，JS中的数组可以是不同类型的属性，跟python中的列表很像。
2.数组的定义
// 实例化对象方式创建
var aList_1 = new array(1,23,4,9,“text”,true,100)
// 字面量方式创建
var aList_2 = [1,2,22,false,“hello world”]3.多维数组
var aList_3 = [[1,2],[“sty”],10]4.数组的操作
（1）获取数组的长度
alert(aList_1.length); // 得出7
（2）根据数组的下标取值
var I = aList_2[4]; // 得出hello world
5.从数组的最后添加和删除数据
// 添加数据
aList_3.push(“end”); // 得出[[1,2],[“sty”],10,“end”]
// 删除数据
aList_3.pop(); // 得出 [[1,2],[“sty”],10]
6.根据下标进行添加和删除数据
array.splice(start, num, element1,…,elementN);
start:必有，开始删除的索引
num:可选，删除的元素个数
element1:可选，在start位置要插入的新元素
7.代码
var aList_101 = [1,2,3,4,5,6]
// 删除元素
aList_101.splice(1,3) //得出 [1,5,6]
// 添加元素
aList_101.splice(0,0,2,3,4) //得出[2,3,4,1,5,6]
// 删除并添加元素
aList_101.splice(1,3,“hello”,100) //得出[2,“hello”,100,5,6]
九、JS中的循环语句
1.循环语句的介绍
for
while
do-while
2.for循环使用
var aList_1 = [1,2,3,4,5]
for (index=0 ;index<aList_1.length;index++){
alert(aList_1[index]);} // 遍历列表aList_1
3.while循环使用
index = 0;
while (index < aList_1.length){
alert(aList_1[index]
index ++ ); // 遍历列表aList_14.do-while循环使用
index = 0;
do{
alert(aList_1[index]);
index++;
}while (index<aList_1.length); // 遍历列表aList_1
十、字符串拼接
1.字符串拼接使用“+”运算符
Var iNum1 = 22;
Var iNum2 = 5.1;
Var sStr1 = “text”;
//（1）数字之间相加
Var result = iNum1 + iNum2;
Alert(result) // 得出27.1
//（2）数字和字符之间拼接
var result_1 = iNum1 + sStr1;
alety(result_1) // 得出22text注：数字和字符串之间进行相加会有一个隐形转换，把数字转换成字符串再进行拼接。
十一、JS中定时器的使用
1.定时器介绍
定时器就是在一段设定的时间内后执行某段代码
2.定时器的创建有两种方式
- setTimeout(func,[,delay,param1,param2,..]) #以指定的时间间隔调用“一次”函数的定时器
- setInterval(func,[,delay,param1,param2,..]) #以指定的时间间隔调用“多次”函数的定时器
setTimeout函数的参数说明:
- 第一个参数 func , 表示定时器要执行的函数名
- 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
- 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
3.setTimeout的使用
// 在2.5秒后执行一次hello函数
<script>
var hello = setTimeout(function(){
Alert(“hello world”);},2500)
</script>
setInternal的使用
// 每隔2.5秒执行一次hello函数
<script>
var hello = setInterval(function(){
Alert(“hello world”);},2500)
</script>4.定时器的清除操作
- clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
- clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)
clearTimeout函数的参数说明:
- timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作。
1.setTimeout和setInterval的清除操作
<script>
// 创建一个输出hello world的函数
Function hello(){
Alert(“hello world”);}
// 使用setTimeout定时器在2.5秒后调用hello函数一次
var s1 = setTimeout(hello,2500);
// 使用setInterval定时器在3秒后重复调用hello函数一次
var s2 = setInterval(hello,3000);
// 设置个单击按钮 来分别停止单次定时器和多次定时器
<input type=”button” value=”停止单次定时器” onclick=“clearTimeout(s1)”>
<input type=”button” value=”停止多次定时器” onclick=“clearInterval(s2)”>
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
