前端之JavaScript基础学习

一、JS代码引入以及基本代码规范

# 1.js代码书写格式
           <script>
                    ....js的代码
           </script>

#2.script标签写在页面那个位置
        1）页面的head标签中和body标签之后
        2）建议写在body标签之后(推荐：html读取顺序由上至下)

# 3.引入第三方文件
    <script src="js的资源路径"></script>
    例：<script type='text/javascript' src='/path/to/js文件'></script>

# 4.JS的注释方式
    //  单行注释
    /**
    多行注释
    **/

# 5.JS的结束符号,以分号为结束符号，如果没有的话，js引擎会自动加上

# 6.写JS代码选择
　　a.编辑器 (pycharm) (永久生效)
　　b.chrome浏览器console 开发者平台编写 (临时测试的js代码)

二、变量声明

# a.变量名命名的时候:
           1)可以使用 _，数字，字母，$ 组成，且不能以数字开头
           2)声明变量使用 var 变量名 来进行声明
                var a=34
注意：变量名区分大小写str和Str不是一个变量，也就是js对变量名的大小写是敏感的

# b.JS变量类型
字符串str: var a="hello";
整型:int: var a=10;
浮点型float: var a=3.14;
布尔型bool:  true/false;(必须都是小写)
数组array：
　　# 获取数组内容：
　　var list=['simon',22,'xc'];
　　console.log(list[2]);

　　　　# 读取　　　　

　　　　for(var i = 0; i < arr.length; i++){

　　　　　　　　console.log(arr[i]);

　　　　}

对象型(字典)dict:json数据格式，python字典
# 读取：
var info = {"name":'simon',"age":30}
console.log(info.name);
console.log(info['name']);

# c.null和undefined
undefined 是声明了变量但未对其赋予值
null 则用于表示尚未存在的空值

# str字符串常见操作方法
var obj="simon-xc"

obj.length　　　　　　　　　　　　　　长度
obj.trim()　　　　　　　　　　　　　　  移除空白
obj.trimLeft()
obj.trimRight()
obj.charAt(n)　　　　　　　　　　　　返回字符串中的第n个字符
obj.concat(value, …)　　　　　　　　 拼接
obj.indexOf(substring,start)　　　　 子序列位置
obj.substring(from, to)　　　　　　　根据索引获取子序列
obj.slice(start, end)　　　　　　　　  切片
obj.toLowerCase()　　　　　　　　　大写
obj.toUpperCase()　　　　　　　　　小写
obj.split(delimiter, limit)　　　　　     分割

# list数组的常用方法
var obj = ['simon', 12, 'xc'];

obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序

三、运算符介绍

# 算术运算符
+ —— * % ++ --
例：
a++   ----> a += 1
a--     ----> a -= 1

# 比较运算符
>   >=   <    <=    !=  ==  ===   !==
例：
=== 全等：
var a = 10;
var b = "10";

a == b
true
a === b
false

!==  全不等：都不符合才行

# 赋值运算符
= += -= *= /=

# 逻辑运算符
&& || ！

四、流程控制

# 流程控制分为3大类：顺序、分支、循环

# 分支
#  if..else..语句
if (条件){
  当条件为 true 时执行的代码
}else{
  当条件不为 true 时执行的代码
}

# if..else if ..else语句
if (条件 1){
  当条件 1 为 true 时执行的代码
}else if (条件 2){
  当条件 2 为 true 时执行的代码
}else{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

# 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";
}

# 循环
# for 循环
# 数组
var arr = ['simon', '龙哥', 'xc']
#第一种循环:
for (var i in arr){
    console.log(arr[i]);
}
# 第二种循环
for (var i=0; i<arr.length; i++){
    console.log(arr[i]);
}

# 字典
var d = {"name":'simon', 'age':18};
# 只有一种循环
for (var i in d){
    console.log(d[i]);
}

# while循环
while (i<5){
  x=x + "The number is " + i + "<br>";
  i++;
}

# 三元运算符
var a = 3;
var b = 5;
c = a > b ? a : b
console.log(c); # 结果：5

五、函数

# 1.函数的定义
注意：javascript中的函数和python的中函数大同小异，唯一不同的是函数的定义方式

# a.正常的定义方式  ----  普通青年
function test(a,b){
    return a + b;
}
# b.匿名函数的定义方式 ---- 2B青年
var sum = function(a, b){
    return a + b;
}
# c.立即调用函数方式 ----- 文艺青年
(function(a, b){
    return a + b;
})();

ps: 阮一峰：http://www.ruanyifeng.com/home.html

# 2.函数的全局变量和局部变量
全局变量：定义在函数外部，并且推荐使用var进行显式声明
局部变量：定义在函数内部，并且必须使用var进行显式声明

// 全局变量
var age = 73;
function test(){
    // 局部变量
    var height = 178;
    // 默认全局变量
    leg = 4;
}

# 3.函数的作用域
# 首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层即window对象，并操作window对象上的属性

console.log(window.a, window.b);
function test(){
    var a = "local";
    b = "global";
}
console.log(window.a, window.b);

六、常见的模块与常用的方法

# 1.日期类Date
var d = new Date();

getYear() 　　　　　　　从 Date 对象返回一个月中的某一天 (1 ~ 31)
getFullYear()　　　　　从 Date 对象以四位数字返回年份
getMonth() 　　　　　　从 Date 对象返回月份 (0 ~ 11)
getDate() 　　　　　　　从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() 　　　　　　　从 Date 对象返回一周中的某一天 (0 ~ 6)
getHours() 　　　　　 返回 Date 对象的小时 (0 ~ 23)
getMinutes()　　　　　返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 　　　　返回 Date 对象的秒数 (0 ~ 59)

# 案例
当前时间：<input type='text' value='' id='time'/>
function change(){
    var time = document.getElementById("time");
    var d = new Date();
    time.value = d;
}
setInterval(change, 1000);

# 2.Math数学对象
Math.ceil(数值) 　　　　向上取整
Math.floor(数值) 　　　向下取整
Math.round(数值) 　　　把数四舍五入为最接近的整数
Math.min(数值1,数值2)　　　返回最小值
Math.max(数值1,数值2) 　　返回最大值
Math.random() 　　　　　获得0-1之间的随机数

# 3. 常见的其他函数
# 在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键

# 例如：
# Json字符串
var str1 = {"name":"simon","age":18,"gender":"male"};

# Json 对象
var str1 = {"name":"simon","age":18,"gender":"male"};

# JSON字符串转换成JSON对象：
var obj = JSON.parse(str); // 序列化

# JSON对象转换成JSON字符串：
var str = JSON.stringify(obj); // 反序列化

# 4.evalpython中的eval执行的是表达式，exec执行的是代码，而js中的eval既能执行的表达式，也能执行代码

#5.URL转义
decodeURI()     解码URI
decodeURIComponent()  解码URI中的组件部分
encodeURI()     编码URI
encodeURIComponent()  编码URI中的组件部分
escape()        对字符串进行转义
unescape()      对字符串进行解码