前端——JavaScript

Posted 2021-02-15 小辉python

javascript 是一种脚本的语言（触发动作）；

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 html 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript引入方式

第一种直接在script标签内写代码（script标签写在body标签的最后面，因为代码从上到下加载后，才能得到元素）

<script>
  // 在这里写你的JS代码
</script>　

 

第二种是引入JS文件

<script src="myscript.js"></script>

　

JavaScript语言规范

注释（注释是代码之母）

// 这是单行注释

/*
这是
多行注释
*/

　

结束符

JavaScript中的语句要以分号（;）为结束符。

 

JavaScript语言基础

申明变量的时候必须在前面填上var;       var 变量名

变量名可以用_，数字，字母和$组成，不能以数字开头；

在JS里面推荐用驼峰式的命名规则；（var  nameElen）

 

JavaScript数据类型

1.变量

JS 的 数据 也是 动态类型（变量可以赋值（多种数据类型））（弱语言）

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串 

 

2.数据类型：

　　1.数字（Number）

　　　　1.NaN（not  a  number （不是一个数字））

　　　　2.parseInt("111")   --> 把字符串转成数字

　　　　3.parseFloat("111")   --> 把字符串转成小数

　　2. 字符串 （String）

　　　和Python一样的用法

　　字符串的常用的方法:

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

　　

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

　　

　　3.布尔值 (Boolean)

　　区别与python是，true,false是小写的

　　""(空字符串)、0、null 、undefined、NaN都是false。

　　4.数组   (Array)

　　　和python里面的 列表 相似；

　　　数组的常用的方法

.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

　　注意sort()排序是按照按照字符编码的顺序进行排序（即先看比较第一个的ascil码，相同则比较第二个）

var n= [11,522,369,6,8]
undefined
n.sort()
// [11, 369, 522, 6, 8]　　

　遍历数值中的元素，就和python中遍历列表相似;

var a = [11,22,66,9,6,8];
for (var i=0;i<a.length;i++){
    console.log(a[i]);
    }

　　5.null

　　表示值是空的；

　　6.undefined

　　是定义了变量，但是没有赋值；

类型查询：

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"　　

对象(Object)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

3. 条件判断

　　()括号里面是条件，当条件为True的时候，就执行{}大括号里面的内容；

　　1.if (){}；

　　　else{}；

　　

　　2.　if; else if; else; 多个条件的 注意没有 elif；

　　　if (){}；

　　　else{}；

　　

            if (){}；

　　　else{}；

　　

　　3. switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

　switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。当没有对应的值的时候就执行 default 的语句；

4. 循环
　　1. for循环
　　　　for (var i=0;i<值;i++){
　　　　　　console.log(i);
　　　　　　　　}
　　2. while循环
　　　　var i = 5;
　　　　　　while (i>0){
　　　　　　console.log(i);
　　　　　　i--;
　　　　　　}

 

5. 运算符
　　1. 算数运算符
　　　　+ - * / % ++ --
　　2. 比较运算符
　　　　== != > < >= <=
　　　　注意!!! 强等于 === !==
　　== 只是判断两者的数值是否相等； 而强等于（===）是判断 两者 数据类型和数值 都要 一样；

1 == “1”  // true
1 === "1"  // false

　

　　3. 逻辑运算符
　　　　||(或) &&(与) !(非)

　　4. 赋值运算符
　　　　= += -= *= /=

　　5.三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b

　　

函数

JS中的函数和python中的函数非常相似，只是用定义的关键字为function；

function  函数名(参数){函数体}

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2);

　arguments 参数 是函数中的 所有的参数

　

函数的全局变量和局部变量