python web开发学习笔记一：javascript基础

一.认识js：

　　　　能进入到软件所实习是个人最大的收获，也是个人荣幸，我相信努力付出必定可以换回收获。

　　　　项目最早开始的是接触到web前端的一些内容，咱们须要利用flask搭建应该有的框架。我有一些python和java基础，学起js来以为不是很费劲，js是一种轻量级的脚本语言，专门应用于前端开发；它是是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，普遍用于客户端的脚本语言，最先是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增长动态功能。js比较年轻，一直处于比较火热的状态，它是在最先1995年由Netscape公司在浏览器上首次设计实现，它的语法风格接近于java。

　　　　在这里说下本身的学习总结同时也对新手是一种简单的入门引领吧。

二.js基本语法：

　　绝大部分的主流ide以及编辑工具都支持js的编写，推荐notepad++；我目前由于python依赖比较多，因此使用pycharm来进行相关的开发工做。首先咱们使用js语言能够在谷歌浏览器的控制台操做，或者嵌入到html模板内部。

　　1.js的导入：

　　　　js导入到html中有2种方式：一个是经过<script src="filepath/file.js">的方式，一个是直接在html内部利用<script>进行编写。我惊讶的发如今一个js文件只要在另一个js文件前面引用，后面导入的js文件能够直接使用前面导入的js文件内部的全局变量。

　　2.js的通常性规则：

　　　　在js中依旧和其余弱类型语言同样，他须要对变量进行申明，使用的惟一的申明方法就是var，在js中一切皆变量，包括函数与对象。在一个语句块先后均须要{。。。}的标识，以及每一句话或者是语句块的结束都须要以 ； 结尾，js解释器会自动的帮你标示“；”，可是咱们为了代码的可读性，最好使用 ； 结尾；在js中的变量函数的命名采用小驼峰法，类的命名采用大驼峰法，类的实例化采用new关键字；this关键字等价于python中的self。

　　3.数据类型：

　　　　js中的数据类型包括：字符串、Number、布尔、比较运算符、null和undefined、数组、对象；

　　　　字符串：就是一串字符，可使用单引号或者双引号；

　　　　Number：就是数值型数据；布尔：包括true以及false；比较运算符：JavaScript容许对任意数据类型作比较，在比较等于有三个等号，三个等号比较的时候js不会帮你转换数据的类型进行比较，而两个等号在进行比较的时候js会自动帮助你进行数据类型的转换；

　　　　null和undefined：不少面试都会问到这个的区别，null表示一个“空”的值，它和0以及空字符串''不一样，0是一个数值，''表示长度为0的字符串，而null表示“空”，null等因而python里的None，null表示未定义的值，而undifined表示未定义的值,undefined仅在判断函数或者变量是否存在的状况下有用，通常在使用中都是使用null；

　　　　数组：相似于python列表以及java的数组，存储容器，有不少的方法进行操做，能够直接对数组查询length属性，也能够直接经过索引改变数组的值，使用slice（）函数能够直接对数组进行切片操做，push（）函数能够向数组末尾添加一个或者多个元素，pop则是删除末尾的元素，数组的拼接不适合直接相加，只能用concat（）函数，这里和python有些许区别，固然还有join（‘--’）方法将数组的每个元素进行拼接并返回一个新的字符串，数组内的元素能够是对象也能够是数组；最后是对象：相似于python中的字典，在进行json文件操做的时候很是有用，能够直接将获取到的json文件内容进行有关的操做，包括修改建立键值对，实际上JavaScript对象的全部属性都是字符串，不过属性对应的值能够是任意数据类型，经过in操做符能够判断是否对象中包含了相应的键，能够直接经过.key来进行访问或者 [‘key’] 来进行访问。

　　　　map以及set：Map是一组键值对的结构，具备极快的查找速度。他可使用数字或者其余数据类型来做为键，使用set或者二维数组来做为构造map工具；set相似于python中的集合，有着去重的效果，须要提供一个觉得数组做为输入构造一个set，add（）来进行添加。

  4.js中的各类结构：

　　 1.选择结构：

　　　　也就是if () { ... } else if { ... } else{...}结构，最好是写上{}，增长可读性，else后面的小括号能够不写条件；其中之一的条件被知足以后以后的再也不进行判断。JavaScript把null、undefined、0、NaN和空字符串''视为false，其余值一律视为true。

　　　2.循环结构：

　　　　JavaScript的循环有两种，一种是for循环，经过初始条件、结束条件和递增条件来循环执行语句块：这个地方和java的就是如出一辙了；使用for...in循环能够遍历出数组的下标以及对象的键；一种是while循环只有一个条件，条件知足就能够一直循环；

　　　3.函数：

　　　　函数式编程的重要性就很少说了，在js中函数也是十分重要的。函数的定义方式使用function关键字来进行定义，大概相似于：function abs(x) {...}这样的方式，函数体内部遇到return会当即中止，若没有return则继续进行下去。函数能够做为一个变量来进行相关的参数传递操做；第二种定义函数的方式以下：var abc = function(){...}右边的部分是一个匿名函数，相似于pyhton中的lambda函数，临时建立临时使用以后马上放弃，这2种方式建立函数式等价的。一样的，参数传递进去也要讲究顺序性。关键字arguments，它只在函数内部起做用，利用arguments，你能够得到调用者传入的全部参数。也就是说，即便函数不定义任何参数，仍是能够拿到参数的值。它相似于一个参数列表。arguments[id]来对参数进行访问。

　　　4.变量做用域：

　　　　用var申明的变量其实是有做用域的，若是一个变量在函数体内部申明，则该变量的做用域为整个函数体，在函数体外不可引用该变量。变量的做用范围值得咱们去深究，一般咱们须要好几个全局变量，甚至拿到其余的js文件中去使用。优先级依然是由内到外，内部嵌套函数的变量永远优先执行。在写法上，可使用一个var将多个变量赋值换行。使用let关键字能够申明一个更小的块级做用变量，用在判断选择结构内部，const则是常量的意思。

　　　5.可能会很实用的内置函数：

　　　　map()、filter()、sort()，对应数组调用map函数能够将内部元素依次的用map传入的函数来进行操做，并返回新的处理后的数组。filter过滤函数，用法相似于map，可是是保留符合要求的元素删除不要的元素。排序函数就很少说了。

　　　6.js的面向对象：

　　　　class关键字建立类，而后调用new构造对象，class+大驼峰命名，相似class Student(name) {...}，一样的，var xiaoming = new Student('小明');能够构造类的实例化，这和其余语言是相同的----继承类的属性以及方法，相似于在python类中的self写法，这里也是要求使用this关键字，诸如this.name=**,this.age=**等等；

　　　7.浏览器对象：

　　　　JavaScript能够获取浏览器提供的不少对象，并进行操做。window对象表示浏览器窗口，包括innerWidth以及innerHeight属性，对应的是浏览器的内部宽度以及高度，内部宽高是指除去菜单栏，工具栏，边框等以后的网页净宽高。还有outerWidth以及outerHeight对应的是外部宽高。一样的location对象显示的是当前页面的URL信息。最重要的还有document对象，html在浏览器中表现为DOM的树形结构，document是整个树形结构的根节点，用document对象提供的getElementById()以及getElementsByTagName()能够按id以及tag名字查找一组节点。

　　　　顺便认识一下cookie，是指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端的数据。Cookie 是由 Web 服务器保存在用户浏览器（客户端）上的小文本文件，它能够包含有关用户的信息。cookie由服务器端生成，是一系列的键值对，当一个用户登录成功以后，服务器会发送一个cookie给浏览器存储进文件目录，当浏览器访问该网站时，就会在http协议下的请求头上附上该cookie。服务器能够根据cookie区分用户。

  5.js高阶：

 　　 1.DOM操做：更新DOM节点，经过innerHTML来进行直接来修改节点文本以及内部HTML子树。innerText是更新内部的文本信息，不包含html代码。对DOM节点对象调用style属性来修改css，如DOM.style.color = 'red'，等；

　　 2.插入DOM节点：一般用jquery更加的方便，这里使用appendChild()方法，能够将新的元素对象放置于节点的最后一个子元素后。insertBefore(a,b)能够将节点插入到对应节点以前，a插入父节点下的子节点b前。

　　 3.children属性所对应节点的全部子节点，children[i]表示的是第i-1个子节点。一样的parentElement属性表明的是父节点。

　　 4.另外还有关于input以及form的操做，value属性能够用来获取元素的值以及赋值；这里有有个地方就是对于上传文件的操做，‘type=file’ 的状况下，这个input框对应的value值就是上传文件的完整路径名。对于文件的读取，js也有本身的特性，可使用FileReader实例来进行操做，在onload下执行相应的函数。