美文网首页
js的学习1

js的学习1

作者: Xavier_yang | 来源:发表于2016-10-26 14:46 被阅读0次

1. JavaScript介绍

  1. 脚本必须位于script与/script标签之间
  2. 放置在body和head部分,通常放在head当中
  3. 不限制使用脚本的数量
  4. 语句中间的分割是分号,这个是可选项
  5. 按照编写顺序进行执行
  6. 标识符

必须以字母,下划线或者美元符号开始

  1. 对大小写很敏感
  2. 可以在文本字段中使用 “\”进行文本换行,也只是对文本字段
  3. 是脚本语言,浏览器在执行代码的时候,逐行的执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译

2. 数据类型和变量

2.1 JavaScript的变量

  1. 通过 var 来进行声明变量,可以把变量当作存储数据的容器
  2. JavaScript的数据类型
    2.1 字符串 String
    2.2 数字 Number
    2.3 布尔 Boolean。布尔类型就两个值,一个为true 一个为flase
    2.4 数组 Array
    2.5 对象 Object
    2.6 空 null
    2.7 未定义

可以通过赋值为null的方式清除变量
通常会出现无值的变量,他的值其实为 undefined
js中变量均为对象,当申请一个变量,就是创建一个对象

  1. js与java和C有一个重要的差别:JS是无类型的

2.2 简单数据类型

  1. 数值型
  • 十进制数 e不分大小写
  • 十六进制数 0x开头
  • 八进制数 以数字0开头 opera浏览器目前不支持八进制数
  • 特殊值 Infinity无穷大或者负无穷大,infinity与其他数值进行运算的结果仍然为infinity
  • 特殊值 NaN 含义是not a number,例如当进行0/0运算或对Infinity求正弦shi时,或者infinity与-infinity相加时,结果都是NaN,可以使用isNaN()方法或让某个值与其自身进行比较,可以确定一个值是否是NaN,NaN是唯一一个不可以和自身进行比较的值

一个正数被0除结果为Infinity,一个负数被0除即结果为-Infinity,而0/0结果为unfinded(NaN)

  1. 字符型
  • 字符串是一组被引号(单引号或者双引号)括起来的文本,这里js不对 字符 和 字符串 进行区分
  • charAt()方法从字符串里提取字符 编号是从0开始的
  • length()字符串的长度
  • 常见的转义字符:\b退格 \t跳格(Tab水平) \n回车换行 \v跳格(Tab垂直) \r换行 '单引号 "双引号 \ () \000八进制数,范围是000-377 \xHH十六进制数范围是00-FF \uhhhh十六进制编码的Unicode字符
  1. Boolean类型
  • 只有两个值 true和false

2.3 特殊数据类型

  1. 无定义数据类型(undefined) 用来表示不存在的值或者尚未赋值的变量
  2. 空值(null)表示一个 什么也没有的占位符
  3. 两者之间的区别是:unfinded表示一个变量尚未赋值,而null表示该变量被赋予了一个空值

3. 运算符和表达式

3.1 表达式

  • 表达式适用于JavaScript脚本运行时进行运算的式子,可以包含常亮变量,运算符等。表达式的结果通常会通过赋值yu语句赋值给一个变量,或者直接作为函数的参数。

3.2 算数运算符

    • 数字相加,特殊意义:将两个字符串链接为一个新的字符串
    • 数字相减 特殊意义:对数值或者数值型变量 求反
    • 数字相乘
  1. / 数字相除
  2. % 求余数
  3. 需要注意的点

js本身不支持其他的算数运算符,但是通过Math()对象几乎可进行任何复杂的运算 用js进行高精度的元素会使浏览器异常甚至崩溃,所以尽量不使用js进行复杂的运算

3.3 赋值运算符

就是一个等号 = 作用是给变量fu'zhi赋值

3.4 比较运算符

  1. <
  2. <=
  3. =

  4. != 不等于
  5. == 等于 不论是字符串还是数字,只要值一样,就是返回的是true
  6. === 等于(且类型相同)对于绝对运算符(三等运算符),就是===,必须满足类型也相同,数值相同,返回的才是true
  7. !== 不等于(或者类型不同)
  8. 在比较的过程中,!= 和== 会自动转换类型进行比较==,!== 和===不会自动转换类型就直接进行比较
  9. 比较运算符运算符返回的是一个布尔类型 true flase

3.5 位运算符

  1. 分为普通位运算符和位移运算符,两者都是先将操作数转换为32位的二进制整数,然后再进行相应为运算,最后将输出的数用十进制表达出来
  2. 普通位运算符 &位与 |位或 ~位非 ^位异或
  3. 位异或 00000011^00000101=00000110
  4. 位移运算fu符
  • << 左移位(空出的位置bu补0)例如:4左移3位 00000100左移3位 结果为00100000
  • >> 右移位 (空出的地方补符号位)例如:-9<<2 11110111右移2位,结果为11111101
  • >>> 右移位(空出的地方补0)例如

3.6 其他运算符

  1. 递增递减运算符
  • ++1 --1 先进行递增或者递减操作,再被引用
  • 1++ 1-- 表示操作数被引用后才进行递增递减的操作
  1. ?: 元素符 三目运算符
  2. 字符串比较
  • 小写字符串在前,大写字符串在后
  • 短字符串在前,长字符串在后
  • 字母表顺序靠前的字符串在前,靠后的在后
  • 在ASCII或unicode编码中,值较小的字母在前,较大的在后
  1. 逗号(,)运算符 将多个表达式连接为一个表达式,新表达式的值为最后一个表达式的值
  2. void运算符 用来指明一个表达式wu'fan'hui无返回结果
  3. typeof运算符 返回一个字符串,指明其操作数的数据类型
  4. 对象运算符
  • .运算符,用来连接对象及其属性或方法
  • [ ]运算符 连接对象及其属性,引用数组元素
  • new 运算符 创建对象,既可以创建自定义对象,还可以创建内置对象的实例。要删除一个对象,应当将其值置为null
  • delelte 移除属性或元素
  • ()运算符 用来调用对象的方法,调用格式为:对象名.方法名(可选参数) 比如:document.write("hello from js")

3.7 运算符优先级

最好使用()来改变优先级顺序

4. JavaScript的流程控制语句

  • 逻辑运算符 && || !

&& 与逻辑运算符,两个都满足才返回的是true || 或逻辑运算符,满足其中一个条件才可以返回true

  • 条件运算符 三目运算符 例如:x<10?"x比10小":"x比10大"
  1. 条件语句
  • if...else
  • switch

使用switch每一个case,后面需要break跳出
default是判断语句的条件没有满足的,调用这个

  1. 循环语句
  • for
  • for in
  • while
  • do...while
  1. 跳转语句
  • break 跳出当前循环,不再进行循环
  • continue 结束本次循环,进行下次循环

5. JavaScript的函数

5.1 函数的定义

  1. 函数是由事件驱动的或者当他被调用的时候执行的可重复使用的代码
  2. 函数的声明 function 函数名(参数){函数的内容}
  3. 函数的调用
  • 在<script>标签内调动
  • 在HTML文件中调用
  1. 函数的参数
  • 在函数调用中,也可以传递值,这些值成为参数
  • 参数的个数可以为任意多,每个参数通过 , 隔开
  • 参数在传递时,其顺序bi'x必须一致
  • 通过传递参数的个数以及参数的类型不同完成不同的功能
  1. 带返回值的函数

在使用return语句的时候,函数会停止执行,同时返回值

  1. 局部变量和全局变量
  • 局部变量 只能在当前函数中使用
  • 全局变量 能够在所有函数中使用
  • 如果函数定义了与全局变量相同名字的局部变量,则在该函数中位于该变量定义之后的脚本代码使用的是局部变量,而不是全局变量。全局变量被局部变量覆盖

5.2 JavaScript的系统函数

  1. encodeURI 函数 返回一个对URI字符串编码后的结果

URL是最常用的URI。URI比URL表示的概念更大,不仅限于描述internet资源的地址,还包含数字对象标识符和国际标准字号等标示名称,一般情况下,可以将URI和URL等同看待。

  1. decodeURI是将已经编码的URI字符串解码成最原始的字符串并返回
  2. parseInt方法 parseInt(numString,[radix])
  • 两个参数,第一个参数是将进行转化的字符串,第二个参数可选,是介于2-36之间的数值,用于指定进行进行字符串转换时所用的进制。如果没有指定第二个参数,则前缀为 0x 的字符串被视为十六进制,前缀为 0 的字符串被视为八进制 所有其他的字符擦混都被转换为十进制
  • 如果paesrInt方法完全无法将一个字符串转化为数字,将返回NaN,需要使用isNaN方法才能检测出来
  1. parseFloat 将字符串转换为对应的小数
  2. isNaN 用于检测paeseInt和parseFloat方法返回的值是否为NaN,如果是则返回true,如果不是,则返回false

6 JavaScript对象与数组

6.1 JavaScript对象

  1. 对象的创建 对象使用new来创建,在new之后必须有用于初始化对象的构造函数名 ,对象拥有属性和方法的数据,方法是能够在对象上执行的动作,属性是与对象相关的值
  • 用构造函数创建对xiang象

      function Student(name,age,grade){
          this.name = name;
          this.age = age;
          this.grade=grade;
      }
      studet1 = new Student("黎明",16,3);
    
  • 直接创建对象 可以使用delete语句删除一个对象的属性

  1. 对象的方法

方法其实就是通过对象调用的JavaScript的属性,可以将函数赋给任何变量,甚至赋给一个对象的任何属性。在方法的主题内部,关键字this的值会变为调用该方法的对象

  1. 原型对象和继承
  • 原型对象和继承
  • 继承的发生
  1. 面向对象的JavaScript
  • 实例方法
  • 类变量
  • 类方法
  • 构造函数和this关键字

6.2 JavaScript中的数组

  1. 由于JavaScript是一种无类型的语言,所以一个数组的元素可以具有任何的数据类型,同一数组的不同元素可以具有不同的类型,数组的元素甚至可以是一个数组

  2. 数组的创建

     1. var a = new Array();
     2. var a = new Array(5,2,3,"test");
     3. var a = new Array(10);
     4. var a = [2,3,4,5];
    
  3. length属性

  4. 删除数组元素

  • 一种是使用length属性,用这种方法来截断数组是唯一一个将数组中元素真正删除的方法
  • 一种是使用delete,虽然元素被删除了,但是删除的元素变为undefined,数组中的length属性不会改变
  1. Array对象及其属性与方法
  • join 将一个数组的虽有元素转换为字符串,并把这些字符串连接起来,可以任意指定一个字符串来分割结果字符串中的元素。如果没有指定分割字符串,将使用“,”来fen'ge分割

      var a = [1,1,2];
      a1 = a.join(); 没有指定分割字符串
      a2 = a.join(",");这里指定了分割字符串
    
  • reverse 在已有的数组中,将数组颠倒位置

  • sort方法 用来对数组元素进行排序,如果不带参数,输出结果按照字母顺序排序

  • slice 方法返回的是指定数组的一个子数组。带有两个参数,分别表示要返回的子数组的起止点,返回的子数组从第一个参数开始的字符处开始,至第二个参数前一个字符结束。如果只有一个参数,返回的子数组包含从起始位置开始到原始数组结束处的所有参数

    如果参数值是 -1,指定的是数组的最后一个元素。如果是-3,指定的是数组的倒数第三个元素

      var  a = [1,2,3,4,5];
      a.slice(0,3);  结果:1,2,3
      a.slice(3); 结果:4,5
      a.slice(1,-1); 结果:2,3,4
      a.slice(-3,-2); 结果:3
    
  • splice方法 可以把元素从数组中删除,也可以向数组中插入新元素。带有两个参数,第一个参数指定了要插入或删除的元素在数组中的位置,第二个参数指定了数组中删除的元素的个数。如果省略了第二个元素,将删除从开始元素到数组结尾处的所有元素。 这个方法返回的是删除的数组,如果没有删除任何元素,将返回一个空数组。

      var a = [1,2,3,4,5,6,7,8];
      a.splice(4);  5,6,7,8
      a.splice(1,2); 2,3
      a.splice(1,1); 4

相关文章

  • js的学习1

    1. JavaScript介绍 脚本必须位于script与/script标签之间 放置在body和head部分,通...

  • JS学习(1)

    一,插入JS 使用 标签在HTML网页中插入javascript。 . 二、引用JS外部文件 JS代码可写到jav...

  • 原生js

    原生JS学习笔记1——基本数据类型和运算符 js的背景知识介绍,js的引入方式,js的变量及运算符 原生JS学习笔...

  • Java EE之旅03-JS基础(上)

    JS学习大纲 JS简介 1、js是什么 2、js能做什么 3、js历史及组成 4、js被引入的方式 js基本语法 ...

  • JS学习1(JS实现,JS引入)

    JavaScript实现 javascript与ECMAScript是不同的,一个完整的javascript应该由...

  • JavaScript 相关范例代码汇总

    1 js相关概念 学习提示到了 JavaScript,学习难度会慢慢增加,永远记得:戒骄戒躁、踏实前行。学 JS ...

  • 网络编程(十九) JavaScript(9)

    一、 JS的组成 1.1 JS基础阶段以及Web APIs阶段 【1】JS基础阶段 我们学习的生死ECMAScri...

  • js学习笔记(1)

    javascript 是一种动态语言,解释性语言,脚本语言。 特点:声明变量的关键字只有一个var,解释型语言解释...

  • JS学习笔记1

    todo:总结下实际中js的一些注意事项、表格、全选、切换、模态框等 原则: 渐进增强 平稳退化 低耦合 JS脚本...

  • 【JavaScript笔记】前期准备

    学习内容 1、文档 菜鸟教程 :https://www.runoob.com/js/js-tutorial.htm...

网友评论

      本文标题:js的学习1

      本文链接:https://www.haomeiwen.com/subject/rwnquttx.html