JavaScript学习

能学到的主要内容：

  直接写入HTML输出流

  对事件的反应

  改变HTML内容
  改变HTML图像
  改变HTML样式
  验证输入

 

JavaScript用法
  <script>标签
  <body>中的JavaScript
  JavaScript 函数和事件
  <head>中的JavaScript函数
  <body>中的JavaScript函数
  外部的JavaScript

 

JavaScript输出
  使用window.alert()弹出警告框
  使用document.write()方法将内容写到 HTML 文档中
  使用innerHTML写入到HTML元素
  使用console.log()写入到浏览器的控制台

 

JavaScript字面量
  一个字面量是一个常量；
  数字（Number）字面量：可以是整数或者是小数，或者是科学计数(e)；
  字符串（String）字面量：可以使用单引号或双引号；
  表达式字面量：用于计算；
  数组（Array）字面量：定义一个数组；
  对象（Object）字面量：定义一个对象；
  函数（Function）字面量：定义一个函数；

JavaScript变量
  变量用于存储数据值；
  使用关键字 var 来定义变量，使用等号来为变量赋值；
  变量可以通过变量名访问；变量通常是可变的，字面量是一个恒定的值；变量是一个名称，字面量是一个值；

JavaScript操作符
  算术运算符
  赋值运算符
  位运算符
  条件运算符
  比较运算符
  逻辑运算符

JavaScript语句

JavaScript关键词

JavaScript标识符
  标识符必须以字母、下划线（_）或美元符（$）开始，后续的字符可以是字母、数字、下划线或美元符；

JavaScript注释
  使用 // 进行单行注释；

  使用 /*  */ 进行多行注释；

JavaScript数据类型
  JavaScript有多种数据类型：数字，字符串，数组，对象等等：

JavaScript函数

JavaScript对大小写敏感

JavaScript字符集
  JavaScript使用Unicode字符集；

 

JavaScript语句
  JavaScript 语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情；
  JavaScript语句标识符；
  对代码行进行折行：可以在文本字符串中使用反斜杠对代码行进行换行；

 

JavaScript变量
  向变量分配文本值时，应该用双引号或单引号包围这个值；向变量赋的值是数值时，不要使用引号；
  未使用值来声明的变量，其值实际上是undefined；
  如果重新声明 JavaScript 变量，该变量的值不会丢失；

 

JavaScript数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）；
JavaScript拥有动态类型：相同的变量可用作不同的类型
例子：
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串

JavaScript字符串：可以使用单引号或双引号；

JavaScript数组：三种创建方法
1、
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
2、
var cars=new Array("Saab","Volvo","BMW");
3、
var cars=["Saab","Volvo","BMW"];

JavaScript对象：对象由花括号分隔；在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义；属性由逗号分隔；
例子：
var person={firstname:"John", lastname:"Doe", id:5566};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];

声明变量类型：当想要声明新变量时，可以使用关键词 "new" 来声明其类型；
例子：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

 

JavaScript函数：
在JavaScript中，函数即对象，可以随意地被程序操控，函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用域中的任何变量；
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块；

局部JavaScript变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它；（该变量的作用域是局部的）
局部变量比同名全局变量的优先级高，所以局部变量会隐藏同名的全局变量；

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

向未声明的JavaScript变量分配值：
如果把值赋给尚未声明的变量，该变量将被自动作为全局变量声明，即使它在函数内执行；

JavaScript变量的生存期：
JavaScript 变量的生命期从它们被声明的时间开始；
局部变量会在函数运行以后被删除；
全局变量会在页面关闭后被删除；

 

JavaScript作用域
作用域可访问变量的集合；
在JavaScript中，能够定义全局作用域或者局部作用域；
在JavaScript中, 对象和函数同样也是变量；
在JavaScript中, 作用域为可访问变量，对象，函数的集合；

JavaScript局部作用域：
变量在函数内声明，变量为局部作用域；
局部变量：只能在函数内部访问；
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁；
函数参数只在函数内起作用，是局部变量；

JavaScript全局变量：
变量在函数外定义，即为全局变量；
全局变量有全局作用域: 网页中所有脚本和函数均可使用；

HTML中的全局变量：
在 HTML 中, 全局变量是 window 对象：所有数据变量都属于 window 对象；
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数；
局部变量，包括 window 对象可以覆盖全局变量和函数；

 

JavaScript字符串：
字符串可以是插入到引号中的任何字符，你可以使用单引号或双引号；
可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同；可以在字符串添加转义字符来使用引号；
可以使用索引位置来访问字符串中的每个字符：
例子：
var carname = "Volvo XC60";
var character = carname[7];

特殊字符：转移字符

字符串可以是对象：
JavaScript 字符串是原始值，可以使用字符创建；也可以使用 new 关键字将字符串定义为一个对象；
实例：
var firstName = "John"；
var firstName = new String("John")；
不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用；

字符串属性和方法：
原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)；
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象；

 

+ 运算符：
对字符串和数字进行加法运算：两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串；

 

for循环：
JavaScript for/in 语句循环遍历对象的属性：
例子：
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}

Break和Continue 语句：
break语句用于跳出循环；
continue用于跳过循环中的一个迭代；
break可以使用于循环和switch，continue只能用于循环；

JavaScript标签：
可以对JavaScript语句进行标记，如需标记JavaScript语句，要在语句之前加上冒号；
break和continue语句仅仅是能够跳出代码块的语句；
通过标签引用，break语句可用于跳出任何JavaScript代码块；

 

JavaScript类型转换：
JavaScript变量可以转换为新变量或其他数据类型：通过使用JavaScript函数、通过JavaScript自身自动转换；
数字转字符串：全局方法String()可以将数字转换为字符串，该方法可用于任何类型的数字，字母，变量，表达式； Number类型的方法toString()也是有同样的效果；
字符串转数字：全局方法Number()可以将字符串转换为数字，字符串只包含数字的转为数字、空字符串转换为0、其他的字符串会转换为 NaN (不是个数字)； Operator + 可用于将变量转换为数字；
布尔值转字符串：全局方法String()可以实现； Boolean类型的方法toString()也有相同的效果；
布尔值转数字：全局方法Number()可将布尔值转换为数字；
日期转字符串：全局方法String()可以实现； Date类型的方法toString()也有相同的效果；
日期转数字：全局方法Number()可将日期转换为数字； 日期方法getTime()也有相同的效果；
自动转换类型：
当JavaScript尝试操作一个"错误"的数据类型时，会自动转换为"正确"的数据类型；
自动转换为字符串：当你尝试输出一个对象或一个变量时JavaScript会自动调用变量的toString()方法；


Number()转换为数字，String()转换为字符串，Boolean()转化为布尔值；

JavaScript数据类型：
5种不同的数据类型：string、number、boolean、object、function；
3种对象类型：Object、Date、Array；
2个不包含任何值的数据类型：null、undefined；
可以使用typeof操作符来查看JavaScript变量的数据类型；
如果对象是JavaScript Array或JavaScript Date，我们就无法通过typeof来判断他们的类型，因为都是返回Object；
constructor属性返回所有JavaScript变量的构造函数，可以使用constructor属性来查看对象是否为数组或日期；
null：
表示"什么都没有"，是一个只有一个值的特殊类型，表示一个空对象引用；
当设置为“null”时，可以用来清空对象；
例子：
var person = null; // 值为 null(空), 但类型为对象
undefined：
是一个没有设置值的变量；
如果一个变量没有设置值的话，就会返回 undefined；
例子：
var person; // 值为 undefined(空), 类型是undefined

 

正则表达式：
语法：/pattern/modifiers;
使用字符串的两个方法：
search()方法：
用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置；
括号里面可以使用正则表达式也可以使用字符串（符串参数会自动转换为正则表达式）；
replace()方法：
用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串；
括号里面可以使用正则表达式也可以使用字符串（符串参数会自动转换为正则表达式）；
正则表达式中的修饰符、模式、元字符、量词；
RegExp对象：
RegExp对象是一个预定义了属性和方法的正则表达式对象；
test()方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false；
exec()方法用于检索字符串中的正则表达式的匹配；该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null；
compile()方法用于改变RegExp，既可以改变检索模式，也可以添加或删除第二个参数；

 

调试；

 

JavaScript JSON：
  JSON语法规则：
    数据为 键/值 对；疑问：键值对是不是都要加双引号；
    数据由逗号分隔；
    大括号保存对象；
    方括号保存数组；
  JSON字符串转换为JavaScript对象：
    使用JavaScript内置函数JSON.parse()将字符串转换为JavaScript对象；

javascript:void(0)含义：
  最关键的是void关键字，void是JavaScript中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值；
    实例：
      <a href="javascript:void(0)">单击此处什么也不会发生</a> ： 当用户点击这个超链接以后不会发生任何事；
      <a href="javascript:void(alert('Warning!!!'))">点我!</a> ： 在用户点击链接后显示警告信息； 注意：void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行；
      a = void ( b = 5, c = 7 ); ： 参数 a 将返回 undefined；

href="#"与href="javascript:void(0)"的区别：
  #包含了一个位置信息，默认的锚是#top 也就是网页的上端；在页面很长的时候会使用#来定位页面的具体位置，格式为：# + id；
    实例：
      <a href="#pos">点我定位到指定位置!</a>
      <br><br><br> <p id="pos">尾部定位点</p>
  javascript:void(0), 仅仅表示一个死链接；如果你要定义一个死链接请使用 javascript:void(0)；

 

JavaScript 代码规范；

 

JavaScript函数：
  函数可以通过声明定义，也可以通过一个表达式定义，也可以通过内置的JavaScript函数构造器（Function()）定义；
  函数通过表达式定义的实例：
    var x = function (a, b) {return a * b};
    var z = x(4, 3);
  通过内置的JavaScript函数构造器（Function()）定义的实例：
    var myFunction = new Function("a", "b", "return a * b");
    var x = myFunction(4, 3);
  在JavaScript中，很多时候，你需要避免使用new关键字；
  函数提升（Hoisting）：
    提升是JavaScript默认将当前作用域提升到前面去的的行为；
    提升应用在变量的声明与函数的声明；
    因此函数可以在声明之前调用，但使用表达式定义函数时无法提升；
  自调用函数：
    函数表达式可以 "自调用"；
    自调用表达式会自动调用；
    如果表达式后面紧跟 () ，则会自动调用；
    Y不能自调用声明的函数；
    通过添加括号，来说明它是一个函数表达式；
  函数可以作为一个值使用；
  函数可以作为表达式使用；
  函数是对象：
    在JavaScript中使用typeof操作符判断函数类型将返回 "function" ；
    JavaScript函数有属性和方法；
    函数定义作为对象的属性，称之为对象方法（不解）；
    函数如果用于创建新的对象，称之为对象的构造函数（不解）；

 

JavaScript函数参数：
  显式参数与隐藏参数：
    显式参数：在函数定义时列出（形参）；
    隐藏参数：在函数调用时传递给函数真正的值（实参）；
  参数规则：
    函数定义时参数没有指定数据类型；
    函数对隐藏参数(arguments)没有进行检测；
    函数对隐藏参数(arguments)的个数没有进行检测；
  默认参数：
    如果函数在调用时缺少参数，参数会默认设置为undefined；有时这是可以接受的，但是建议最好为参数设置一个默认值；
  Arguments对象：
    如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名，只能使用arguments对象来调用；
    JavaScript函数有个内置的对象arguments对象；
    argument对象包含了函数调用的参数数组；
  可以通过值传递参数；
  可以通过对象传递参数；

 

JavaScript函数调用：
  JavaScript函数有4种调用方式，每种方式的不同在于this的初始化；
  一般而言，在Javascript中，this指向函数执行时的当前对象；
  作为一个函数调用：
    函数如果不属于任何对象，则在JavaScript中它始终是默认的全局对象；
    在HTML默认的全局对象是HTML页面本身，所以函数是属于HTML页面；
    在浏览器中的页面对象是浏览器窗口(window 对象)，以上函数会自动变为window对象的函数；
  全局对象：
    当函数没有被自身的对象调用时，this的值就会变成全局对象（函数作为全局对象调用，会使this的值成为全局对象）；
  作为方法调用：
    可以将函数定义为对象的方法；
    函数作为对象方法调用，会使得 this 的值成为对象本身；
  使用构造函数调用函数：
  作为函数方法调用函数：
    在JavaScript中, 函数是对象；JavaScript函数有它的属性和方法；
    call()和apply()是预定义的函数方法；两个方法可用于调用函数，两个方法的第一个参数必须是对象本身；
    在JavaScript严格模式(strict mode)下, 在调用函数时第一个参数会成为this的值，即使该参数不是一个对象；
    在JavaScript非严格模式(non-strict mode)下, 如果第一个参数的值是null或undefined，它将使用全局对象替代；
    通过call()或apply()方法你可以设置this的值, 且作为已存在对象的新方法调用；

JavaScript闭包：
  没理解，需要先理解内嵌函数和自我调用；


JavaScript HTML DOM：
  通过HTML DOM，可访问JavaScript HTML文档的所有元素；
  HTML DOM (文档对象模型)：
    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）；
    HTML DOM 定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法；通过DOM，你可以访问所有的HTML元素，连同它们所包含的文本和属性；
    HTML DOM 模型被构造为对象的树；
    通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML：
      JavaScript 能够改变页面中的所有HTML元素；
      JavaScript 能够改变页面中的所有HTML属性；
      JavaScript 能够改变页面中的所有CSS样式；
      JavaScript 能够对页面中的所有事件做出反应 ；
    查找HTML元素，三种方式：
      通过id找到HTML元素；
      通过标签名找到HTML元素；
      通过类名找到HTML元素；

 

HTML DOM改变HTML内容：
  改变HTML输出流：
    JavaScript能够创建动态的HTML内容；
    document.write()可用于直接向HTML输出流写内容；
    绝对不要在文档加载完成之后使用document.write()，这会覆盖该文档；
  改变HTML内容：
    修改HTML内容的最简单的方法是使用innerHTML属性；
    语法：document.getElementById(id).innerHTML=new HTML
  改变HTML属性：
    语法：document.getElementById(id).attribute=new value

 

HTML DOM改变CSS：
  语法：document.getElementById(id).style.property=new style

HTML DOM事件：
  HTML DOM使JavaScript有能力对HTML事件做出反应；

 

HTML DOM EventListener：
  addEventListener()方法：
    用于向指定元素添加事件句柄；
    添加的事件句柄不会覆盖已存在的事件句柄；
　可以向一个元素添加多个事件句柄；
    可以向同个元素添加多个同类型的事件句柄；
    可以向任何DOM对象添加事件监听；
    可以更简单的控制事件（冒泡与捕获）；
    语法：
      element.addEventListener(event, function, useCapture);
  事件传递有两种方式：
    冒泡与捕获；
    DOM事件流同时支持两种事件模型：捕获型事件和冒泡型事件，捕获型事件首先发生。捕获型事件和冒泡型事件会触及DOM中的所有对象，从document对象开始，也在document对象结束；
  removeEventListener()方法：
    移除由 addEventListener()方法添加的事件句柄；

 

HTML DOM元素：
  在文档对象模型(DOM)中，每个节点都是一个对象；DOM 节点有三个重要的属性：
    nodeName : 节点的名称
    nodeValue ：节点的值
    nodeType ：节点的类型
  创建节点；
  删除节点；

posted @ 2018-02-12 08:43  kehuaihan  阅读(167)  评论(0)  编辑  收藏  举报