doclist 阅读(44) 评论(0)

一.认识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把nullundefined0NaN和空字符串''视为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下执行相应的函数。