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 :节点的类型
  创建节点;
  删除节点;

原文地址:https://www.cnblogs.com/kehuaihan/p/8443636.html