JavaScript

最新推荐文章于 2023-05-09 19:08:55 发布

qq_43292219

最新推荐文章于 2023-05-09 19:08:55 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/qq_43292219/article/details/83043444

版权

一。JavaScript介绍

1.简介

（1）javaScript是一种轻量级的脚本语言
（2）javaScript是可插入HTML页面的编程语言
（3）javaScript插入HTML页面后，由所有现代的浏览器执行

2.组成

（1）ECMAScript核心，包含（基本语法，变量、关键字、保留字、数据类型、语句、函数等）
（2）DOM：文档对象模型，包含整个html页面内容
（3）BOM：浏览器对象模型，包含整个浏览器相关内容
3.用法
（1）脚本必须位于<script></script>标签之间
（2）内部脚本：脚本位置放置在html页面的<body>和<head>部分中
（3）外部脚本：脚本可保存在外部文件中，外部文件通常包含被多个页面使用的代码，外部js文件的扩展名为.js。如果使用外部文件，在

二。ECMAScript核心语法

1.变量

（1）变量可以字母、$和_开头，对大小写敏感
（2）在javaScript中使用var关键字声明变量：

var  carm; //声明变量
carm="Volvo" ;//赋值

（3）声明无值的变量，其值是undefined

2.类型

（1）数字（number）、字符串（String）、布尔（boolean）、数组（array）、对象（object）、空（null）、未定义（undefined）
（2）javaScript拥有动态类型，相同的变量可用作不同类型

var x ；  //x为undefined
var x=s;   //现在x为数字
var x="john"； //现在x为字符串

（3）javaScript字符串可以是引号中的任意文本，可使用单引号或者双引号。
在这里插入图片描述

（4）boolean与java中一样，只有两个值true和false。数组下标从0开始。赋值也一样
（5）javaScript对象由花括号分割。在括号内部，对象的属性以名称和值对形势（name:value）定义，属性由逗号分隔。

var person={firstname:"john",lastname:"dem",id:5566}
name = person.lastname;
name=person["lastname"];

（6）undefined表示变量不含有值；null表示有值，为空。

3.运算

（1）运算符与java中一致；
（2）比较运算

（a==b）//判断值是否相等
（a===b）//判断值与类型是否相等

（3）if…else、for、while 、do…while、switch用法一样。

4.消息框

（1）警告框alert(“这是一个警告框”)
只提示
（2）确认框confirm
有返回值true或false

var c = confirm("您确定要做这个操作吗")
if（c）{
	alert(您点击了确认);
}else{
	alert("您点击了取消")
}
（3）提示框。

返回值就是你输入的值

var returnvalue=prompt("请输入您想访问的网址")；

5.函数

（1）用function定义函数，函数中的代码，只有在调用时，才会执行

<script type="text/javascript">
function doit(){  //doit函数
alert('doit');
}
</script>
</head>
<body>
<button onclick="doit()">点击我看看</button>     //绑定函数，调用函数
</body>

（2）javascript函数很灵活，无需声明类型，参数不一致也可以调用（挨个向后匹配，多余的无作用）大小写敏感

6.事件

javascript处理逻辑既可以写到事件处理代码中，也可以写到函数中，然后调用。
在这里插入图片描述

7.对象

（1）javaScript内置对象,比如：String/Array/Object/Date等
（2）HYML DOM(Deocument Object Model,文档对象模型)对象
（3）Browser对象（浏览器相关的对象）
（4）字符串、数组对象
在这里插入图片描述

8.自定义对象

在这里插入图片描述

9.类

javaScript中没有class关键字，javaScript用function关键字来定义类！类就是函数，函数就是类函数名也就是类名
如已经有Person这个函数，var p = new Person()
在这种用法下，Person可称为构造函数

三。DOM

1.文档

把html文档中饿各个元素（标签）看成是一个个对象，document是这些对象根，用javaScript可以操作这些对象
在这里插入图片描述

2.文档对象

（1）浏览器加载整个html文档形成Document对象，此对象可以访问和操作html文档中的所有的元素。

3.元素对象

（1）获得元素
通过id属性获得元素

getElementById()
<***  id = "">

通过name属性获得所有元素

getElementByName()
<*** name="">

通过class属性获取所有元素

getElementByClassName()
<***  class="">

通过标签名获得所有元素

getElementsByTagName()
<***>

（2）创建元素
creatElement()创建指定名称的元素

（3）常用属性
childNodes 获得所有子节点
nodeName返回节点名称（标签名）
nodeType返回节点类型（元素、属性、文本等）
nodeValue节点的值（只有文本节点才有该属性）
（5）管理元素
Element对象表示Html文档中的元素（html称为标签）。元素可以包含属性、其他元素或文本。也就是说html标签可以包含属性其他子标签或文本
appendChild()给元素追加子元素
linsertBefore()给当前元素前插入兄弟元素
setAttribute(k,v)给元素设置属性
在这里插入图片描述

四。BOM

1.window对象

（1）window对象代表当前的浏览器窗口
（2）在javascript中定义的函数和变量，都是属于window对象的属性
（3）利用window对象，在窗口之间进行交互

<script type="text/javascript">
function openwin(){
window.open(“newwindow.html");
}
</script>
</head>
<body>
<input type="text" id="returnField"></input>
<button onclick="openwin()">打开新窗口</button>
</body>

关闭窗口

<script type="text/javascript">
function closewin(){
//访问打开这个窗口的那个窗口对象
window.opener.document.getElementById("returnField").value = "随便一个值";
//访问打开这个窗口的那个窗口对象中的函数
window.opener.hello();   
window.close(); //关闭本窗口
}
</script>
</head>
<body>
<button onclick="closewin()">关闭本窗口</button>
</body>

2.方法

在这里插入图片描述

3.location对象

location对象包含有关当前URL的信息
在这里插入图片描述

4.history对象

history对象包含用户（在浏览器窗口中访问过的url）
在这里插入图片描述

<script type="text/javascript">
function gotoback(){
window.history.back();
}
</script>
</head>
<body>
本页是javascript_2.html <br/>
<a href="javascript_3.html">下一页</a>
<a href="javascript:gotoback()">上一页</a>
</body>

初学总结，有错望指正