Python day33_前端_Javascript

JavaScript 介绍

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

前端三大块

1、HTML：页面结构

2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果

3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

HTML 引入 JavaScript 的方式

1、行间事件（主要用于事件）(几乎不用)

2、页面script标签嵌入

`
 
 
3、外部引入
 
 

 
 
JS 中变量、数据类型及基本语法规范
 
 
定义变量需要用关键字 '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
 
 
6、1种复合类型：
 
 
object
 
 
变量、函数、属性、函数参数命名规范
 
 
1、区分大小写
 
 
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
 
 
3、其他字符可以是字母、下划线、美元符或数字
 
 
JS 注释
 
 

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

....
这是一个div元素
 
 
注意！！
 
 
如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载
 
 
解决方案：
 
 
1、将javascript放到页面最下边
 
 
2、将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。(一般都用第二种方法)
 
 

 
 
操作元素属性
 
 
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写
 
 
属性写法
 
 
1、如果能够在 HTML 页面正常看到的属性, 我们在 JS 中可以同名获取
 
 
2、“class” 属性写成 “className”
 
 
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
 
 
读取属性:
 
 
var 变量 = 元素.属性名
 
 
改写属性:
 
 
元素.属性名 = 新属性值
 
 
innerHTML:
 
 
innerHTML 可以读取或者写入标签的文本部分
 
 
JS部分: 

这是一个div元素
 
 
​
 
 
事件属性
 
 
标签上除了可以添加 样式, id, class等属性之外, 还可以添加事件属性
 
 
最常用的事件属性有:
 
 
 
  
鼠标单击事件 onclick
 
  
鼠标双击事件 ondblclick
 
  
鼠标移入事件 onmouseover
 
  
鼠标移除事件 onmouseout
 
 
 
 
函数
 
 
1. 函数定义与执行
 
 

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

 
 
​
 
 
2. 函数传参
 
 
Javascript 的函数中可以传递参数
 
 

 
 
3. 函数的返回值
 
 
JavaScript 中函数使用 return 返回内容
 
 
函数中 'return' 关键字的作用：
 
 
 
  
返回函数中的值或者对象
 
  
结束函数的运行
 
 
 
 
4.匿名函数
 
 
没有名字的函数, 称为匿名函数
 
 
我们可以通过将函数名赋值给事件属性的形式, 将事件和函数关联起来，这样可以减少函数命名，并且简化代码。函数如果做公共函数，就可以写成匿名函数的形式
 
 
举个栗子：
 
 

 
 
​
 
 
条件语句
 
 
1、运算符
 
 
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
 
 
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
 
 
3、条件运算符：==、===、>、>=、<、<=、!=、&&(逻辑与 同真为真，一假则假)、||(逻辑或 全假为假 一真则真)、!(逻辑非 取反)
 
 
注意！！
 
 
==：只要求值相等(在比较时会转换数据类型) 如："1" == true (结果为true)
 ===：要求值和类型都相等 如："1" === true (结果为false)
 
 
2、条件语句表达式
 
 
使用格式一: 

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

使用格式二: 

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

使用格式三: 

if (判断条件01) {
    // 如果第一个条件为 true, 进入这里执行
    执行的语句01
    ...
} else if (判断条件02) {
    // 如果第二个条件为 true, 进入这里执行
    执行的语句01
    ...
}
 
 
数组及操作方法
 
 
数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的, 这里的数组就相当于python 中的列表
 
 
1.定义数组的方法
 
 
数组定义形式: 
第一种: 
var 数组名 = new Array(元素一, 元素二, 元素三...)

第二种: 
var 数组名 = [元素一, 元素二, 元素三...]
 
 
2.数组常见的操作方法
 
 
1、获取数组的长度
 
 
一般我们获取数组长度使用: length
 
 
var aList = [1,2,3,4];

// 打印输出数组 aList 的长度
console.log(aList.length)
 
 
2、下标索引的使用
 
 
var aList = [1,2,3,4];

console.log(aList[0]);
 
 
3、join(分隔符)
 
 
var aList = [1, 2, 3, 4]
var newList = aList.join('-') //使用-将数组中的每个元素分隔
console.log(newList) //获取新的一个值
console.log(typeof(newList)) //这个值的类型是string '1-2-3-4'
 
 
4、push( ) 和 pop( )
 
 
从数组最后增加成员或删除成员
 var aList = [1,2,3,4];
 aList.push(5); //在数组最后增加一个元素
 console.log(aList) //打印结果是[1,2,3,4,5]
 aList.pop()；//在数组最后移除一个元素
 console.log(aList) //打印结果为[1,2,3,4]
 
 
5、reverse( )
 
 
将数组反转
 
 
var aList = [3,2,1,4];

aList.reverse();//反转数组
console.log(aList) //打印结果为[4,1,2,3]
 
 
6、indexOf( )
 
 
返回数组中元素第一次出现的索引值:
 
 
 
  
如果有, 则正常返回索引值
 
  
 
如果检索的内容不存在于数组中, 则返回 -1
 
var aList = [1,2,3,4,1,3,4];
 
console.log( aList.indexOf(4) ) //第一次出现元素4的下标为3
 console.log( aList.indexOf(5) ) //不存在元素5，打印结果为-1
 
 
 
 
 
7、splice( )
 
 
在数组中增加或删除成员（任意位置）
 
 
使用格式: 

数组名.splice(index,howmany,item1,.....,itemX)

index:必需。整数（可正可负（数组中最后一个元素下标为-1），都是从指定位置向后删除），规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany:必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX:可选。向数组添加的新项目
 
 
举个栗子：
 
 
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从下标为2的开始（包含2），删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
 
 
8、多维数组
 
 
也就是列表的嵌套
 
 
var aList = [[1,2,3],['a','b','c']];    
alert(aList[0][1]); //弹出2;
 
 
循环
 
 
for 循环
 
 
使用格式:

for(var i=0;i<5;i++)
{
    console.log(i)
}
 
 
小练习：数组去重
 
 
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i
 
 
字符串处理方法
 
 
1、+ 运算符
 
 
如果是两个数字进行相加运算, 得到的是 两个数的和
 
 
如果是两个字符串进行相加运算, 得到的是 两个字符串的拼接
 
 
如果是一个字符串, 一个数字的相加运算, 得到的是 拼接的结果 字符串
 
 
例如：
 
 
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';

alert( iNum01 + iNum02 );  // 弹出36
alert( iNum01 + sNum03 );  // 弹出1212 数字和字符串相加等同于字符串相加
alert( sNum03 + sTr );     // 弹出12abc
 
 
2、parseFloat( )
 
 
将数字字符串转化为小数
 
 
var sNum03 = '12.32'
alert( parseFloat(sNum03) );  // 弹出 12.32 将字符串小数转化为数字小数
 
 
3、parseInt( )
 
 
将 数字字符串 转化为 整数
 
 
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';

alert( sNum01+sNum02 );                       // 弹出1224
alert( parseInt(sNum01) + parseInt(sNum02) )  // 弹出36
alert( parseInt(sNum03) )                     // 弹出数字12 将字符串小数转化为数字整数
 
 
4、split( )
 
 
把 一个字符串 分隔成 字符 组成的 数组
 
 
var sTr = '2017-4-22';
var aStr1 = sTr.split("-");
var aStr2 = sTr.split("");
var aStr3 = sTr.split();

console.log(aStr1); //['2017','4','22']  
console.log(aStr2);  //['2','0','1','7','-','4','-','2','2'] 
console.log(aStr3) //['2017-4-22']
 
 
5、indexOf()
 
 
方法可返回某个指定的字符串值在字符串中首次出现的位置。
 
 
如果要检索的字符串值没有出现，则该方法返回 -1(和数组的indexof功能一样)
 
 
6、substring( )
 
 
截取字符串
 
 
左闭右开 [start, stop) start <= x < stop
 
 
start: 必需。一个非负的整数，规定要提取的子串的第一个字符在 字符串 中的位置。
 
 
stop: 可选。一个非负的整数，比要提取的子串的最后一个字符在 字符串 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾
 
 
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); // 弹出 de
alert(sTr3); // 弹出 bcdefghijkl
 
 
7、字符串反转
 
 
将字符串的内容颠倒过来, 不是排序
 
 
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
//先将字符串分割成数组，然后数组反转，之后再将数组分割成字符串
console.log(str2); //结果为：890fkdslj21jfdsa
 
 
调试程序的方法
 
 
 
  
alert
 
  
console.log
 
  
document.title
 
  
document.write( )：用的很少
 
 
 
 
定时器
 
 
定时器在 javascript 中的作用
 
 
 
  
定时调用函数
 
  
制作动画
 
  
模拟网络延时的情况
 
 
 
 
1. 定时器的种类:
 
 
 
  
执行一次的定时器: setTimeout
 
  
执行多次的定时器: setInterval
 
  
关闭只执行一次的定时器: clearTimeout
 
  
关闭反复执行的定时器: clearInterval
 
 
 
 
定时器的使用方式: 

setInterval(code（或者写func）,millisec)
 
 
举个栗子：
 
 
使方框左右移动:
 
 
CSS部分: 


JS部分: 


    

    HTML部分:

    

 
 
变量作用域
 
 
全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
 
 
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问
 
 
封闭函数
 
 
封闭函数是 javascript 中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数
 
 
写法一：
 
 
(function(){
    alert('hello!');
})();
 
 
写法二：
 
 
!function(){
    alert('hello!');
}()