###############    JS简介和JS引入     ################

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--

js简介

英文：javascript

这是一门编程语言，

要学习什么？

1，js的核心语法：

    1，基础语法

    2，数据类型

    3，函数

    4，面向对象(ES6)

2，BOM：这是操作浏览器的，比如浏览器弹窗

3，DOM：这是操作浏览器上面html内容的，

就是这三部分

js是一个解释性语言，是需要一个解释器的，但是解释器比较特殊，只要有浏览器就可以解释js，

-->

<!--

如何引入js文件

-->

<!--第一种方式，通过script标签-->

<!--<script>-->

    <!--alert(121212)-->

<!--</script>-->

<!--第二种方式，写一个js文件，-->

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

<div id="d1">sss</div>

</body>

</html>

###############    JS的基本语法和数据类型（数字和字符串）      ################

/*

js基础语法：

1，注释：

单行注释：//

多行注释：

####################

2，语句必须以分号结尾

3，变量生命的关键字：var 变量名 = "值"

    js是属于动态类型，就是同一个变量可以存储不同类型的值，类似python，

4，变量

    变量命名的规则，js中$也可以作为变量名，

    1，变量区分大小写

    2，推荐使用驼峰命名法

    3，保留字不能用作变量名

*/

//变量声明

var name = "小明";

var age = 10;

var $ = "女";

console.log("name",name);

console.log("age",age);

console.log("$",$);

/*

5，数据类型：

整数，浮点数，科学计数法

还有一种NaN，表示不是一个数字，not a number

* */

//数字类型

var n1 = 18;

var n2 = 18.1;

var n3 = 1.8e5;

//字符串类型

var s1 = "123";

var s2 = "234";

var s3 = s1+s2; // 字符串拼接

console.log(s3)

/*

字符串常用方法：

.length    返回长度

.trim()    移除空白

.trimLeft()    移除左边的空白

.trimRight()    移除右边的空白

.charAt(n)    返回第n个字符

.concat(value, ...)    拼接，eg:  concat(1) 在后面拼接1，concat(1,2,3) 在后面拼接1,2,3

.indexOf(substring, start)    子序列位置，返回的是子字符串的起始位置，

.toLowerCase()    小写

.toUpperCase()    大写

.split(delimiter, limit)    分割，第一个参数是根据什么分割，第二个参数是限制分割多少个，第二个参数可以不写

#########################

.substring(from, to)    根据索引获取子序列

.slice(start, end)    切片

//substring和slice有什么相同之处：

两者的相同点：

如果start等于end，返回空字符串

如果stop参数省略，则取到字符串末

如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：

如果 start > stop ，start和stop将被交换

如果参数是负数或者不是数字，将会被0替换

silce()的特点：

如果 start > stop 不会交换两者

如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)

如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

* */

###############    JS数据类型（布尔和数组类型）      ################

/*

布尔类型

区别于Python，true和false都是小写。

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

* */

//布尔类型

var a = true;

var b = false;

//数组类型

// 类似python中的列表

var a1 = [1,2,3]

a1[0] //返回1，

a1[3] //返回undefined

// a1[1:2] //不支持这种冒号的

/*

.length    数组的大小

.push(ele)    尾部追加元素

.pop()    获取尾部的元素，和python一样，会从列表取出，并且返回

.unshift(ele)    头部插入元素

.shift()    头部移除元素

.slice(start, end)    切片

.reverse()    反转

.sort()    排序  这个排序比较鸡肋，要转换成字符串，然后排序，

#############################

.join(seq)    将数组元素连接成字符串，

python中

l1=["1","2","3"]

("+").join(l1)

这是把列表中的元素，使用加号连接，返回是一个字符串

js中

l1=[1,2,3]

l1.join("+")  //返回1+2+3

#########################

.concat(val, ...)    连接数组，

l1=[1,2,3]

l1.concat(1,2,3) //结果：[1,2,3,1,2,3]

l1.concat([1,2,3])  //结果：[1,2,3,1,2,3]

###########################

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

############################

var a1 =[12,2]

typeof a1 //这是查看数据的类型，记住数组和null，返回的是object类型

typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

typeof "abc"  // "string"

typeof null  // "object"

typeof true  // "boolean"

typeof 123 // "number"

* */

###############    JS运算符      ################

/*

算数运算符：

+ - * / % ++ --

var n =10;

n++  //11，就是n=n+1

################################

比较运算符

> >= < <= != == === !==

注意：

1 == “1”  // true   这是弱等于，只判断值

1 === "1"  // false    这是强等于，既判断值也判断类型

################################

逻辑运算符

&&  与

||  或

!   非

################################

赋值运算符

=

+=   //n+=1   就是 n= n+1

 -= *= /=

* */

###############    JS流程控制语句     ################

// for循环

// a1 = [1,2,3]

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

//     console.log(a1[i])

// }

//while 循环

// var i = 0;

// while (i < 10) {

//   console.log(i);

//   i++;

// }

//  三元运算

var a = 1;

var b = 2;

var c = a > b ? a : b;

//? 号前面是条件，成立就是第一个a，不成立就是第二个b

###############    JS函数      ################

//js中函数和python中的函数非常的相似，只是定义的方式有些不同

//函数的定义

function foo(a,b) {

    console.log(a);

    console.log(b);

    return a+b;  //带返回值的函数

}

//匿名函数

//需要使用一个变量去接收他，

var func = function (a,b) {

    console.log(a);

    console.log(b);

    return a+b;  //带返回值的函数

};

//立即执行函数

//先写两个括号，第一个括号内部定义，第二个括号内部传递具体的参数

(function (a,b) {

    console.log("立即执行函数");

    console.log(a+b)

})(11,222);

//arguments

function foo(a,b) {

    console.log(a);

    console.log(b);

    console.log(arguments.length);

    //这个 arguments 根据传入的参数，是一个列表[a,b]

    //可以遍历这个arguments对象

    return a+b;  //带返回值的函数

}

//函数的调用

var ret1 = foo(11,22);

// 调用的时候，如果传递的超出定义的，超出的不起作用，并不会导致程序报错，

//如果传递的参数少于定义的，未定义的就会显示undefined，也不会程序报错，

//这是js比较随便的地方，

console.log(ret1);

var ret2 = func(11,12);

console.log(ret2);

/*

局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除

* */

###############    JS词法分析      ################

//js的词法分析

var age =18;

function foo() {

    console.log(age);

    var age =22;

    console.log(age);

}

foo(); //结果是 undefined ，22 ，

//为什么？

//因为函数执行的时候，会对函数内部进行词法分析

/*

JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。

2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。

3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找。

* */

###############    JS内置对象-自定义对象     ################

/*

js中内置的对象和方法：

* */

//js中自定义对象

var person = {name:"andy",age:18};//在js对象中，属性名默认不需要加引号，你加了js也会给你去掉的，值可以是单引号和双引号，单引号会转换成双引号

console.log(person);

// 单个取属性

console.log(person.name);

console.log(person.age);

//遍历取属性

for (var i in person){

    console.log(i);

    console.log(person[i])

}

//自定义对象的第二种方式：

var person2 = new Object();

person2.name="xiaoxiao";

person2.age=22;

console.log(person2);

###############    JS内置对象-Date对象     ################

//内置的Date对象，就相当于python中的模块

var d1 = new Date();

console.log(d1); //这是默认生成当前时间，这是一个时间对象，

console.log(d1.toLocaleString()); //这是一个字符串

var d2 = new Date("2004/3/20 11:12");

console.log(d2.toLocaleString());

/*

var d = new Date();

//getDate()                 获取日

//getDay ()                 获取星期

//getMonth ()               获取月（0-11）

//getFullYear ()            获取完整年份

//getHours ()               获取小时

//getMinutes ()             获取分钟

//getSeconds ()             获取秒

//getMilliseconds ()        获取毫秒

//getTime ()                返回累计毫秒数(从1970/1/1午夜)

* */

###############    JS内置对象-json对象      ################

//json对象

var s = '{"name":"andy","age":12}'; //这是一个字符串，怎么使用js转换成为json格式的，

var ret = JSON.parse(s);

console.log(ret);

console.log(typeof ret); //类型是一个对象

// 怎么把js中的对象，转换成字符串呢？

var s2 = JSON.stringify(ret);

console.log(s2);

console.log(typeof s2); //类型是一个字符串

// 这两个一定要学会，后面使用ajax传递数据的时候，会使用到

###############    JS内置对象-Math对象      ################

//math对象

var n = -5;

n2 = Math.abs(n); //绝对值

console.log(n2);

Math.floor(5.9); //直接往下去，这就是5，

Math.min(1,2);

Math.max(1,2);

Math.pow(10,2); //返回x的y次幂

Math.random(); //返回一个0-1之间的随机数

Math.round(5.5); //四舍五入

###############    JS内置模块-RegExp模块，正则模块      ################

//RegExp对象，正则，类似python中的re模块

//生成RegExp对象，

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

//这是以字母开头，5-11位的字母数字下滑线组成

var reg2 = reg1.test('xiaoming');

console.log(reg2); //true

var reg3 = reg1.test('2xiaoming');

console.log(reg3); //false

//简单写法

console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoming"));

console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("3xiaoming"));

//这里面有很多的坑

// 1，re表达式内部不能加空格，否则会产生意想不到的错误，

// console.log(/^[a-zA-Z][a-zA-Z0-9_]{5, 11}$/.test("xiaoming"));

//2，test里面不写值，默认不是空，是校验的一个undefined，这是大坑啊，

console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test());//等同于console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("undefined"));

//3，字符串替换

//两种模式，g，i，

var ss = 'Ahahaha';

var sss = ss.replace("a","哈");//这样写只会替换第一个a，这个要记住，

var sss = ss.replace(/a/,"哈");//这样写只会替换第一个a，这个要记住，这是正则的写法

var sss = ss.replace(/a/g,"哈");//加一个g，就是说全局有多少就替换多少，

var sss = ss.replace(/a/gi,"哈");//加一个i，就是说忽略大小写，都替换

console.log(sss);

###############   结束线      ################

前端-js-长期维护的更多相关文章

  1. 前端js的书写规范和高效维护的方案_自我总结使用的方案

    作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...

  2. 闲聊——浅谈前端js模块化演变

    function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...

  3. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  4. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...

  5. 我对 前端 Js 开发方式 架构方向 的 一些看法

    有 网友 提到 : “复杂的页面,一个页面加载的模块多,各种异步请求,页面渲染,jquery链式编程操作dom数过于频繁.现在的前台越来越复杂,逻辑臃肿.” 哎, 所以 我说, 要改成用 同步调用 . ...

  6. 前端 | JS 任务和微任务：promise 的回调和 setTimeout 的回调到底谁先执行？

    首先提一个小问题:运行下面这段 JS 代码后控制台的输出是什么? console.log("script start"); setTimeout(function () { con ...

  7. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  8. json处理总结(前端js和后端java)

    前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...

  9. 前端js文件合并三种方式

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

  10. 2015 前端[JS]工程师必知必会

    2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...

随机推荐

  1. clonezilla使用说明

    0．Clonezilla Live 再生龙网址:http://clonezilla.nchc.org.tw/clonezilla-live/ 1．下载Clonezilla Live 地址:http:/ ...

  2. pywin32获得tkinter窗口句柄，并在上面绘图

    想实现用win32 API在tkinter窗口上画图,那么应该先获得tkinter窗口的句柄hwnd,然后再获得tkinter的设备hdc.尝试了FindWindow(),GetActiveWindo ...

  3. 寒假day13

    今天看了计算机网络的相关面试题

  4. 第二季 第四集 part3

    obj.insertAdjancetHtlm("beforeend"(位置), r(内容)) insertAdjacentHTML() 将指定的文本解析为HTML或XML,并将结果 ...

  5. TCP协议的学习

    1.关于TCP理解的重点(TCP协议可以理解为就是一段代码) (1).TCP协议工作在传输层,对上服务socket接口,对下调用IP层 (2).TCP协议面向连接,通信前必须先3次握手建立连接关系后才 ...

  6. Flink（四） —— 数据流编程模型

    分层抽象 The lowest level abstraction simply offers stateful streaming. It is embedded into the DataStre ...

  7. vue多选验证

    vue select 多选 验证 <FormItem :prop="'formList.'+index+'.name'" label="姓名" :rule ...

  8. ubuntu搭建web服务器

    https://www.linuxidc.com/Linux/2015-11/125477.htm 到“sudo apt-get install libapache2-mod-php5”出现1错误.

  9. 本地搭建3节点kubernetes

    kubernetes本地搭建版本选择 CentOS Linux release 7.7.1908 kubernetesVersion: v1.17.0 weave-kube:2.6.0 ceph/ce ...

  10. iphone对fixed模态框支持不太好，弹出窗口中滚动点击穿透的bug

    iphone对fixed展现层中存在滚动内容支持非常不好, 尤其是背景页面产生滚动以后,输入控件就找不到了, 取消冒泡也不行,最后是这么解决的,可以参考 <style> .modeldiv ...