###############    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. html+css新特性

    audio 音频 viedeo  视频 <audio src = ""02.pogg" controls = "controls"> lo ...

  2. Odd sum (对本菜鸡来说是个极坑题)

    https://codeforces.com/problemset/problem/797/B time limit per test 1 second memory limit per test 2 ...

  3. JDK的3个bug啊，你get到了吗？

    1.Annotation引用非空enum数组返回空数组 首次发现时的环境:JDK 1.8 首次发现所在项目:APIJSON 测试用例: publicenumRequestRole {/**未登录,不明 ...

  4. JavaScript学习总结（六）

    我们知道,JavaScript共由三部分组成:EMCAScript(基本语法).BOM(浏览器对象模型).DOM. 在浏览器对象模型中,把浏览器的各个部分都用了一个对象进行描述,如果我们要操作浏览器的 ...

  5. Ubuntu16.04编译tensorflow的C++接口

    原文:https://www.bearoom.xyz/2018/09/27/ubuntu1604buildtf4cpp/ 之前有一篇介绍到在windows下利用VS2015编译tensorflow的C ...

  6. Linux用户权限常见命令

    01. 用户 和 权限 的基本概念 1.1 基本概念 用户 是 Linux 系统工作中重要的一环,用户管理包括 用户 与 组 管理 在 Linux 系统中,不论是由本机或是远程登录系统,每个系统都必须 ...

  7. 中小规模集群----Centos6部署wordpress及java程序

      1    概述 1.1   业务需求 公司共有两个业务,网上图书馆和一个电商网站.现要求运维设计一个安全架构,本着高可用.廉价的原则. 具体情况如下: 网上图书馆是基于jsp开发: 电商系统是基于 ...

  8. python 删除文件

    import os 删除文件: os.remove() 删除空目录: os.rmdir() 递归删除空目录: os.removedirs() 递归删除目录和文件(类似DOS命令DeleteTree): ...

  9. sourceTree 代码回滚(git 和http)

    近些时候,有遇到提交后代码有误的情况,所以需要回退到前一个版本.因为不常见,所以每次都不是很熟练,记录于此,以备查阅. 一.[将master重置到这次提交] 在sourceTree中选中错误的提交的下 ...

  10. css 传数据套路

    <input type=hidden> 那么该标签就不会显示 但是我们可以用这个标签储存数据 这是一个利用标签元素隐藏