十三、前端之Javascript基础
JavaScript基础学习目录 [TOC] 一、JS如何引入及基本语法规范
1.页面内的script代码书写格式
<script>
code...
</script>
2.script标签写在页面的哪个位置？
2.1.页面head里和body后都可以写
2.2一般我们建议写在body之后，因为页面加载防止先加载javascript有问题，影响页面显示速度
3.是否可以引入第三方js文件？
<script type='text/javascript' src='/path/to/js文件'></script>
4.JS的注释方式
//单行注释
/*
这个是多行注释
*/
5.JS的结束符号，以分号为结束符号，如果没有的话，js引擎会自动加上
二、变量声明
命令规范
1.JS的变量名可以是_，数字，字母，$组成，且不能以数字开头
2.声明变量使用var 变量名 来进行声明
var a = 34; //var是局部变量，推荐使用，默认是全局变量
var b = 45;
console.log(a + b); //输出，相当于python里的print
var $='jquery';
alert($);
c=56
alert(c)
注意：变量名区分大小写str和Str不是同一个变量，也就是js对变量名的大小写是敏感的
三、JS变量类型
js的变量类型主要包括：
- 数值
- 字符串
- 布尔(true,false)
- null
- undefined
- 数组
- 对象
1）数值类型
js不区分整型和浮点型
var a = 23;
var b = 23.5;
console.log(a);
console.log(a + b); //结果46.5
常用方法
-- parseInt(..) 将某值转换成数字，不成功则NaN
-- parseFloat(...) 将某值转换成浮点数，不成功则NaNparseInt('3.5') //数字必须在首位
parseFloat('2.3dd') //数字必须在首位
2）字符串类型
var a = 'hello';
var b = 'world';
var str = a + b; //字符串拼接
console.log(str);
- 常用的方法
-- obj.length 长度
-- obj.trim() 移除空白
-- obj.trimLeft() 移除左空白
-- obj.trimRight() 移除右空白
-- obj.charAt(n) 返回字符串中的第n个字符
--obj.concat(value,...) 拼接字符串，value无视数据类型
--obj.indexOf(substring,start) 子序列位置
--obj.substring(from,to) 根据索引获取子序列
--obj.slice(start,end) 切片
--obj.toLowerCase() 小写
--obj.toUpperCase() 大写
--obj.split(delimiter,limit)分割，如:'hello,world'.split(',')
注意:拼接可以无视数据类型
console.log(3 + 2 + 'hello' + 'world') //结果5helloworld
4) 数组类型
javascript中的数组类似于我们python中的列表
var arr = ['lisl','唐三','小舞'];
console.log(arr[0]); //结果lisl
- 常用方法
-- obj.length 数组的长度
-- obj.push(ele) 尾部追加元素
--obj.pop() 尾部获取一个元素
--obj.unshift(ele) 头部插入元素
--obj.shift()头部移除元素
--obj.slice(start,end) 切片
--obj.reverse() 反转
--obj.join(sep) 将数组元素连接起来以构建一个字符串，sep为分隔符
--obj.concat(val,..) 连接数组,val可以是一个数组，也可以是一个元素
--obj.sort() 对数组元素进行排序
小练习：将每个数组元素打印出来
var arr = ['lisl','唐三','小舞'];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
5)对象型
javascript中的对象类似于python中的字典,json数据格式
var info = {'name':"lisl","age":18}
console.log(info.name); //取值方式一
console.log(info['name']); //取值方式二
6)null和undefined
1.undefined表示的是当声明的变量未初始化时，该变量的默认值是undefined
2.null表示的是值不存在
四、运算符介绍
1)算数运算符
+ - * / % ++ --
2）比较运算符
> >= < <= != == === !==
注意： ==比较的是值相等，类型可以不同 ===比较的是值相等，类型也要相等，与python的==相同
3）逻辑运算符
&& || !
- 与python对应符号：
&& ==>and
|| ==>or
! ==>not
4）赋值运算符
= += -= *= /=
5）三元运算符
var a = 3;
var b = 5;
c = a > b ? a : b //将大的值赋值给c
console.log(c)
五、流程控制
1) if-else语句
if(条件){
当条件为true时执行的代码
}else{
当条件不为true时执行的代码
}
2）if-else if -else语句
if(条件1){
当条件1为true时执行的代码
}else if(条件2){
当条件2为true时执行的代码
}else{
当条件1和条件2都不为true时执行的代码
}
3）switch语句
var day=new Date().getDay()
switch (day){
case 0
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
default:
x="Looking forward to the Weekend";
}
4）while循环语句
var i = 0; var x="";
while(i < 5){
x=x + "The number is " + i +"<br>";
i++;
}
console.log(x)
//结果：The number is 0<br>The number is 1<br>The number is 2<br>The number is 3<br>The number is 4<br>
六、函数
1.函数的定义
注意:javascript中的函数和python的中函数大同小异，唯一不同的是函数的定义方式
1.一般定义方式
function test(a,b){
return a + b;
}
2.匿名函数的定义方式
var sum = function(a,b){
return a + b;
}
3.自动调用函数的方式
(function(a,b){
return a + b;
})();
2.函数的全局变量和局部变量
全局变量：定义在函数外部，并且推荐使用var进行显示声明
局部变量：定义在函数内部，并且必须使用var进行显示声明
var name = 'lisl'; //全局变量（推荐）
age = 18; //全局变量(不推荐)
function test(){
console.log(name) //打印name为lisl
//局部变量
var height = 180;
//默认全局变量,即便是在函数体内定义
leg=4;
}
console.log(leg) //打印leg为4
3.函数的作用域
查找顺序：最内层函数--->外层函数--->最外层，即windows对象
var a = 'global'
console.log(window.a,window.b); //结果：undefined undefined
function test(){
var a = "local";
b = "global"
}
test();
console.log(window.a,window.b); //结果：undefined "global"
