javascript对象下标_JavaScript详解（一）

最新推荐文章于 2023-12-13 15:34:29 发布

兜兜船长

最新推荐文章于 2023-12-13 15:34:29 发布

阅读量3.5k

点赞数 2

文章标签： javascript对象下标

本文链接：https://blog.csdn.net/weixin_33910305/article/details/113083080

版权

【36】

一、JavaScript 的简介

【1】为什么学习 JavaScript（作用）

1、html+css 只是可以实现静态的页面无法实现动态的效果

2、表单的校验

4、操作节点的信息

【2】JavaScript 的概念

JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型

【3】JavaScript 组成

ECMAScript：JavaScript的核心

文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和

XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档

浏览器对象模型（BOM）对浏览器窗口进行访问和操作

【4】JavaScript 语言的特点

1.脚本语言

脚本语言是一种简单的程序，是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。

脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。

2、基于对象的语言

面向对象有三大特点（封装，继承，多态）却一不可。

通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”

3. 事件驱动：

在网页中执行了某种操作的动作，被称为“事件”(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

4、简单性

变量类型是采用弱类型，并未使用严格的数据类型。

var a,b,c; a=123; b=“abc”; a=b;

5、安全性

JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互

6、跨平台性

JavaScript依赖于浏览器本身，与操作平台无关，只要计算机安装了支持JavaScript 的浏览器（装有JavaScript解释器），JavaScript 程序就可以正确执行。

缺点：

各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

Js 的引入方式

[1]JS 引入的方式

<script type="text/javascript">
 /*网页中的弹框*/
 alert("js 的学习课程");
</script>

[2]js引入的方式二 type:引入文件的类型 src：引入文件的路径 charset:指定引入的编码-->

<!--注意：引入js 的时候千万不要二合一-->
<script type="text/javascript"
src="js/test.js" charset="UTF-8" ></script>

js 中的变量

【1】JS中变量的声明

var 变量名=值；

【2】JS中变量的使用注意的事项

A、js中的变量的名称和java中标识符的命名保持一致就可以了。

B、js中变量名称是可以重复的，但是后者的名称会把前者的名称值覆盖

C、js中末尾即使没有分号结束也是可以的，但是不推荐大家这样书写。

JS 中的数据类型

1、基本数据类型

number（数字类型的数据）

string（字符串类型）

boolean（布尔数据类型）

object（对象类型）

2、JS 中特殊数据类型

undefined(未定义)

NaN(不是一个数字) not a number

null(空对象)

JS 中的运算符

算数运算符

+ - * / % ++ --

逻辑运算符

& | ! && || ^ < > ＜＝＝！＝

连接符＋

特殊运算符

(==)等值符

先比较类型如果类型一致，在比较内容如果类型不一致，这时候会进行强制转换统一转number类型，然后再进行内容的比较

(===)等同符

先比较类型如果类型一致，在比较内容如果类型不一致直接返回false；

<script>
			var  f1=false; 
			var  f2="false";
			var  f3=0;
			var  f4="0";
			alert(f1==f2);                            F
 		        alert(f1==f3);                            T
		        alert(f1==f4);                             T
		        alert(f2==f3);                             F
		        alert(f2==f4);                             F
			alert(f3==f4);                            T
			alert(f1===f2);                           F
		        alert(f1===f3);                            F
	                alert(f1===f4);                            F
		        alert(f2===f3);                             F
	                alert(f2===f4);                             F
		        alert(f3===f4);                              F
		</script>

控制语句

1、条件语句

 if(){}
 if(){}else{}
 if(){}else if(){} else if()...else{}

2、分支语句（选择语句）

switch(){
case value: break;
 default: break;

}

循环语句

while(){}
至少执行一次循环体
do{}while()
for(var i =0 ； i<10;i++){}

JS 中函数的声明

函数声明的三种形式

（1） function 函数名（）{
 函数体
}
(2) var 函数名=function(){
 函数体
}
(3) var 函数名=new Function("函数体")；

函数参数传递

在js中实参的个数和形参的个数可以不一致

函数的返回值

如果函数没有return 这时候返回 undefined

():函数执行符：当某个函数的参数是另一个函数时，返回值就是另一个函数的执行结果

常用对象

Date 日期对象

//本月中的第几天
document.write(date.getDate()+"<br />");
//本星期的第几天
document.write(date.getDay()+"<br />");
//返回的月份 0-11 
document.write(date.getMonth()+"<br />");
//返回的是1900年到现在年份的差值2018-1900
document.write(date.getYear()+"<br />");
//返回全年2018
document.write(date.getFullYear()+"<br />");
//2018/6/22 下午12:17:14:返回本地的时间
document.write(date.toLocaleString()+"<br />");

Math 对象学习

//获得随机数
//随机数范围是0-1
var ran=Math.random()*1000;
console.log(ran);
//向下取整 756.9714434215177 ==756
console.log(Math.floor(ran));
//向上取整 398.06376470341377==398
console.log(Math.ceil(ran));
//获得4位随机数--验证码
console.log(Math.floor(Math.random()*9000+1000) );

String 对象学习

var a="b-j-s-x-t";
var b=new String("bjsxt");
//获得下标为2的内容
document.write(b.charAt(2)+"<br />");
//2 :获得下标
document.write(b.indexOf("sxt")+"<br />");
//字符串截取 开始下标 截取长度
document.write(b.substr(2,3)+"<br />");
// 截取开始的长度
document.write(b.substr(1)+"<br />");
//字符串截取 开始下标 结束的下标
document.write(b.substring(2,3)+"<br />");
//开始下标
document.write(b.substr(2)+"<br />");
//字符串截取的方法
document.write(a.split("-"));
Global 对象
var a=1;
var b="var c=1+1";
document.write(a+"<br />");
document.write(b+"<br />");
//把字符串转成可以执行的js的代码
eval(b);
document.write(c+"<br />");
var d="123a";
Number(d);//NAN
// 检查某个值是否是数字。
document.write(isNaN(d));

数组学习

数组的声明方式

function demo1(){
 //方式一
 var arr=new Array();
//方式二 5代表数组的长度
var arr2=new Array(5);
 console.log(arr2);
//方式三
var arr3=new Array("你好",123,new String(),true);
console.log(arr3);
//方式四
var arr4=["bjsxt",123,new Date(),false];
}

数组的使用

function demo2(){
var arr=[];
arr[0]="李时珍的皮";
arr[1]=true;
arr[2]=new Date();
arr[6]=12;
//js中数组的下标可以不连续 如果没有给值就是empty
console.log(arr);
}
数组的扩容 
function demo3(){
var arr=["bjsxt",123,new Date(),false];
console.log(arr.length);
//扩大数组 empty 
 arr.length=10;
//缩小数组
arr.length=2;
console.log(arr);
} 
数组的遍历
function demo4(){
//方式一
var arr=["bjsxt",123,new Date(),false];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
//方式二 i:是数组的下标
for(var i in arr){
console.log(arr[i]);
}
}
数组中常用的方法
function demo5(){
var arr=["bjsxt",123,new Date(),false];
console.log(arr);
//向数组的末尾添加一个或更多元素，并返回新的长度。
arr.push("我们");
// 删除并返回数组的最后一个元素
arr.pop();
//向数组的开头添加一个或更多元素，并返回新的长度。
arr.unshift("你好");
//移除第一个元素
arr.shift();
// 删除开始的下标 删除的个数
arr.splice(1,2)
//添加的操作
arr.splice(1,0,"你") 
}

event 事件

1.什么是事件

事件是可以被 JavaScript 侦测到的行为网页中的每个元素都可以产生某些可以触发 JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

<body onload="demo7()">
		
 <!--单击事件-->
<input type="button" name="" id="" value="单击操作" onclick="demo1();demo2()" /> <br />
		
<!--双击事件-->
		
<input type="button" name="" id="" value="双击事件" ondblclick="demo2()" /><br />
		
<!--鼠标事件   onmouseover：鼠标放上事件   onmouseout:鼠标离开事件  
onmousemove:鼠标移动事件 -->
		
<div style="width: 300px; height: 300px; 
background-color: red;"  onmousemove="demo4()"></div><br /><br /><br />
		
<!--键盘事件  onkeyup="demo5()" 键盘弹起-->
<input type="text"  onkeydown="demo5()" /><br /><br /><br />
		
<!--焦点事件  onfocus:获得焦点事件  onblur：失去焦点事件  -->
<input type="text" name="" id="" value=""  onchange="demo6()" />
</body>

什么是BOM

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

什么是DOM

DOM是Document Object Model的简写，即文档对象模型。

DOM用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

DOM的顶层是document对象

蓝色框内是归DOM管的，红色框内归BOM管的；也可以说DOM也是归BOM管的

BOM 是为了操作浏览器出现的 API，window 是其根对象。

DOM 是为了操作文档出现的 API，document 是其根对象。