JavaScript基础

Posted Roygood

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础相关的知识，希望对你有一定的参考价值。

javascript

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

  • 核心（ECMAScript） 
  • 文档对象模型（DOM） Document object model (整合js，css，html)
  • 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
  • Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的. 

JavaScript的引入方式

{#1 直接编写#}

    <script>
        alert(\'hello yuan\')
    </script>
{#2 导入文件#}
    <script src="hello.js"></script>　

变量

声明变量时不用声明变量类型. 全都使用var关键字

一行可以声明多个变量.并且可以是不同类型

声明变量时 可以不用var. 如果不用var 那么它是全局变量

基础规范

每行结束可以不加分号. 没有分号会以换行符作为每行的结束

 使用{}来封装代码块

Null & Undefined 数据类型

Undefined 类型

Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

当函数无明确返回值时，返回的也是值 "undefined";

Null 类型

另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

var person=new Person()

var person=null

数据类型转换

JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换

数字 + 字符串：数字转换为字符串

数字 + 布尔值：true转换为1，false转换为0

字符串 + 布尔值：布尔值转换为字符串true或false

强制类型转换函数

函数parseInt：   强制转换成整数   例如parseInt("6.12")=6  ; parseInt(“12a")=12 ; parseInt(“a12")=NaN  ;parseInt(“1a2")=1

函数parseFloat： 强制转换成浮点数  parseFloat("6.12")=6.12

函数eval：       将字符串强制转换为表达式并返回结果 eval("1+1")=2 ; eval("1<2")=true

类型查询函数(typeof)

ECMAScript 提供了 typeof 运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种原始类型：如果它是原始类型，还可以判断它表示哪种原始类型。

ECMAScript 算数运算符

递增(＋＋) 、递减(－－)

假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1
i++相当于i=i+1，i--相当于i=i-1
递增和递减运算符可以放在变量前也可以放在变量后：--i

alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=

ECMAScript 逻辑运算符

等于 ( == )  、不等于( != ) 、 大于( > ) 、 小于( < ) 
大于等于(>=) 、小于等于(<=)
与 (&&) 、或(||) 、非(!)

逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

  • 如果某个运算数是 null，返回 null。 
  • 如果某个运算数是 NaN，返回 NaN。 
  • 如果某个运算数是 undefined，返回undefined。 

逻辑 OR 运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值

ECMAScript等性运算符

执行类型转换的规则如下：

  • 如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。 
  • 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。 
  • 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。 
  • 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。 

在比较时，该运算符还遵守下列规则：

  • 值 null 和 undefined 相等。 
  • 在检查相等性时，不能把 null 和 undefined 转换成其他值。 
  • 如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。 
  • 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。 

ECMAScript 关系运算符

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.

比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

if 控制语句

if-else基本格式
if (表达式){
语句１;
......
}else{
语句２;
.....
}
功能说明
如果表达式的值为true则执行语句1,
否则执行语句2

switch  选择控制语句

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

for  循环控制语句

for循环基本格式
for (初始化;条件;增量){
    语句1;
    ...
}
功能说明
实现条件循环，当条件成立时，执行语句1，否则跳出循环体

while  循环控制语句

while循环基本格式
while (条件){
语句1；
...
}
功能说明
运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环

异常处理

try {

    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
注：主动抛出异常 throw Error(\'xxxx\')

11种内置对象

包括：

Array ,String , Date, Math, Boolean, Number  Function, Global, Error, RegExp , Object

简介：

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是通过对象实现的

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript"); 
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//数组对象
</script>

Array对象的方法

 

Function 类可以表示开发者定义的任何函数。

用 Function 类直接创建函数的语法如下：

function 函数名 (参数){
    
函数体;
   return 返回值;
}
//another way:
var 函数名 = new Function("参数1","参数n","function_body");
js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以

Function 对象的方法

Function 对象也有与所有对象共享的 valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码，在调试时尤其有用。

alert(void(fun1(1,2)))

运算符void()作用：拦截方法的返回值　

window对象



alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。


History 对象


History 对象属性


History 对象包含用户（在浏览器窗口中）访问过的 URL。


History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问


History 对象方法




back()    加载 history 列表中的前一个 URL。
forward()    加载 history 列表中的下一个 URL。
go()    加载 history 列表中的某个具体页面。






Location 对象




Location 对象包含有关当前 URL 的信息。




Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。




Location 对象方法






location.assign(URL)
location.reload()
location.replace(newURL)//注意与assign的区别




 


DOM对象(DHTML)


DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：


"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"


W3C DOM 标准被分为 3 个不同的部分：


    

  • 核心 DOM - 针对任何结构化文档的标准模型
    • 

  • XML DOM - 针对 XML 文档的标准模型
    • 

  • HTML DOM - 针对 HTML 文档的标准模型
    • 



 DOM 节点 


根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：


    

  • 整个文档是一个文档节点(document对象)
    • 

  • 每个 HTML 元素是元素节点(element 对象)
    • 

  • HTML 元素内的文本是文本节点(text对象)
    • 

  • 每个 HTML 属性是属性节点(attribute对象)
    • 

  • 注释是注释节点(comment对象)
    • 



节点(自身)属性:


    

  • attributes - 节点（元素）的属性节点
    • 

  • nodeType – 节点类型
    • 

  • nodeValue – 节点值
    • 

  • nodeName – 节点名称
    • 

  • innerHTML - 节点（元素）的文本值
    • 



导航属性:


    

  • parentNode - 节点（元素）的父节点 (推荐)
    • 

  • firstChild – 节点下第一个子元素
    • 

  • lastChild – 节点下最后一个子元素
    • 

  • childNodes - 节点（元素）的子节点 
    • 



访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：


页面查找：


    

  • 通过使用 getElementById() 方法 
    • 

  • 通过使用 getElementsByTagName() 方法 
    • 

  • 通过使用 getElementsByClassName() 方法 
    • 

  • 通过使用 getElementsByName() 方法 
    • 



局部查找：


　　


////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)


HTML DOM Event(事件)


HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。




onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect      文本被选中。
onsubmit      确认按钮被点击




node的CURD：


createElement(name)创建元素


appendChild();将元素添加


使用removeChild()方法删除


 修改 HTML DOM 


    

  • 改变 HTML 内容 
    • 



        改变元素内容的最简答的方法是使用 innerHTML ，innerText。


    

  • 改变 HTML 属性 
    • 



        elementNode.setAttribute(name,value)


        elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)


    

  • 创建新的 HTML 元素 
    • 



        createElement(name)


    

  • 删除已有的 HTML 元素 
    • 



        elementNode.removeChild(node)


    

  • 关于class的操作 
    • 



        elementNode.className


        elementNode.classList.add


        elementNode.classList.remove














以上是关于JavaScript基础的主要内容，如果未能解决你的问题，请参考以下文章
 

 30秒就能看懂的JavaScript 代码片段


 Yarn: 一个新的JavaScript模块管理器


 常用Javascript代码片段集锦


 48个值得掌握的JavaScript代码片段（上）


 如何将此 JavaScript 代码片段翻译成 Parenscript？


 javascript 代码片段