高效学习JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/ASDASDADF/article/details/108237639

JavaScript的学习

什么是JavaScript

JavaScript是一种在网络浏览器上运行的编程语言。

它主要添加到使用HTML和CSS构建的网站中，并在实现各种页面动态效果方面发挥作用。例如，网页上显示的轮播模式和在咨询平台上输入内容后显示的提示信息不正确等。另外，在商场网站上购物时，购物车的使用和成本估算也需要JavaScript。因此，即使不是很明显，它仍然是编码人员经常使用的语言。
JavaScript是一种多功能开发语言。

除了向网页添加操作的有用性之外，JavaScript还可以用于实现许多其他功能。例如，它可以开发各种网站应用程序，例如“聊天工具”和“货币图表”，它们可以实时修改，这是JavaScript的主要魅力之一。

JavaScript的特点是什么？

脚本语言。 JavaScript是一种解释型脚本语言。首先编译和执行C，C ++和其他语言，同时在程序运行期间逐行解JavaScript。
基于对象。 JavaScript是一种基于对象的脚本语言，不仅可以创建对象，还可以使用现有对象。
简单。 JavaScript语言使用弱类型的变量类型。它对使用的数据类型没有严格要求。它是一种基于Java基本语句和控件的脚本语言。它的设计既简单又紧凑。
动态。 JavaScript是一种事件驱动的脚本语言，无需通过Web服务器即可响应用户输入。访问网页时，鼠标可以在网页上单击鼠标，或上下移动并移动窗口。 JavaScript可以直接响应这些事件。
跨平台。 JavaScript脚本语言不依赖于操作系统，仅需要浏览器支持。因此，只要机器上的浏览器支持JavaScript脚本语言，那么编写后就可以在任何机器上使用JavaScript脚本。目前，大多数浏览器都支持JavaScript。

网页引入JavaScript的方式

只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码
```
<script type="text/javascript">
	
	
	
</script>
```
使用 script 标签引入单独的 JavaScript 代码文件
```
<script type="text/javascript"  src="1.js"></script>
```

JavaScript的变量

数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
特殊值
1. undefind 未定义，所有的js变量未赋予初始化值的时候，默认都是underfind。
2. null：空值
3. NaN: 全程称是Not a numer。非数字。非数值。

JavaScript定义变量

var 变量名;
var 变量名 = 值;

JavaScript运算

关系运算

== ：等于是简单的做字面值的比较
=== ：除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。

**注意：**0 、null、 undefined、””(空串)跟其它比较都认为是 false；

且运算： &&
1. 当表达式全为真的时候。返回最后一个表达式的值。
2. 当表达式中，有一个为假的时候。返回第一个为假的表达式的值
或运算： ||
1. 当表达式全为假时，返回最后一个表达式的值
2. 只要有一个表达式为真。就会把回第一个为真的表达式的值
取反运算： !

JavaScript数组

数组定义方式

var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

JavaScript函数

函数的二种定义方式

可以使用 function 关键字来定义函数。

 function fun(){
    	alert(" 无参函数 fun() 被调用了");
    }  
 fun();

//返回值参数都可以
function calculate(num1,num2){
    var sum=num1+num2;
    return sum;
    }
    
  	var result=calculate(1,2);
    alert(result);

可以使用变量赋值一function 个函数

var a=function(num1,num2){
    	return num1+num2;
    }
    
    alert(a(200,1));

**注意：**在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义

函数的 arguments 隐形参数（只在 function 函数内）

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。隐形参数特别像 java 基础的可变长参数一样。public void fun( Object … args );可变长参数其他是一个数组。那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。


	function fun(a){
	alert( arguments.length );// 可看参数个数
	alert( arguments[0] );
	alert( arguments[1] );
	alert( arguments[2] );
	}
	
	fun(1,"dd","true");
    
    function sum(num1,num2){
    	var result=0;
    	for(var i=0;i<arguments.length;i++){
    		if(typeof(arguments[i])=="number"){
    			result +=arguments[i];
    		}
    	}
    	return result;
    }
    alert( sum(1,2,3,4,"abc",5,6,7,8,9));

JS 中的自定义对象

对象的定义：

var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数

对象的访问：

变量名.属性 / 函数名();

var obj=new Object();
	obj.name="华仔";
	obj.age=18;
	obj.fun=function(){
		alert("姓名:"+this.name+",年龄"+this.age);
	}
	
	alert(obj.name);
	alert(obj.age);
	obj.fun();

{}形式的自定义对象

对象的定义：

var 变量名 = { // 空对象
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};

对象的访问：

变量名.属性 / 函数名();

var obj={
		name:"hh",
		age:18,
		fun:function(){
		alert(" 姓名：" + this.name + " ,  年龄：" + this.age);
		}
	
	};
	
	alert(obj.name);
	alert(obj.age);
	obj.fun();

js 中的事件

概述：

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件

常用事件：

onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。

两种事件注册方式

什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册事件：

通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

function fun(){
		alert("body被加载");
	}

 <body onload="fun();">

**动态注册事件：**是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件
响应后的代码，叫动态注册。

// 动态注册 onblur 事件
window.onload = function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象 . 事件名 = function(){};
passwordObj.onblur = function () {
console.log(" 动态注册失去焦点事件");//打印到控制台
}
}

动态注册基本步骤：

获取标签对象
标签对象.事件名 = fucntion(){}

DOM 模型

DOM 全称是 Document Object Model 文档对象模型，就是把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象的理解

Document 它管理了所有的 HTML 文档内容
document 它是一种树结构的文档。有层级关系。
它让我们把所有的标签都对象化。
我们可以通过 document 访问所有的标签对象

Document 对象中的方法介绍

document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注意：
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。