标签：浏览器 JavaScript 学习 window HTML cookie var document

文章目录

• JavaScript
• • 1、概述
  • 2、语法
  • • 2.1、变量与类型
    • 2.2、输出内容
    • 2.3、运算符
    • 2.4、逻辑语法
    • 2.5、类定义
    • 2.6、函数
  • 3、DOM
  • • 3.1、获取标签对象
    • 3.2、改变 HTML 元素
    • 3.3、添加和删除元素
    • 3.4、添加事件处理程序
    • 3.5、CSS选择器查找HTML元素
    • 3.6、通过 HTML 对象选择器查找 HTML 对象
    • 3.7、BOM计时器
    • 3.8、DOM 事件
    • 3.9、事件监听
    • 3.10、DOM 导航
    • 3.11、DOM 集合
    • 3.12、DOM 节点列表
  • 4、BOM
  • • 4.1、Window - 浏览器窗口
    • 4.2、Screen 对象包含用户屏幕的信息
    • 4.3、Location 地址
    • 4.4、History 浏览历史
    • 4.5、Navigator 访问者的信息
    • 4.6、弹出框
    • 4.7、Timing 计数器
    • 4.8、Cookies
  • 5、JavaScript 面向对象

JavaScript

JavaScript是web的第三个支柱，除了HTML和CSS之外，它通常用于使web页面具有交互性。要理解JavaScript (JS)，我们需要知道DOM是什么。

**文档对象模型(DOM)**是一种独立于语言的应用程序编程接口，它将HTML文档转换为树结构。每个文档的节点都被组织在树结构中，称为DOM树，其中最顶层的节点称为“文档对象”。

**浏览器对象模型(BOM)**统管浏览器的属性、结构、功能的。

1、概述

**JavaScript：**是客户端脚本语言。 **plug-in：**专家级程序员开发语言。

Java 和 Js 没有关系，区别是：

1. js客户端脚本，java客户端语言。
2. js基于对象，java面向对象。
3. java编译执行，js解释执行。
4. java强语言，js弱语言。（弱在数据类型）

**Js的构成：**核心、DOM（文档对象模型 document object model）、BOM（浏览器模型 browse object model）。

写法： <script language="script" type="text/javascript"></script>

1. html网页的body写。
2. 在head里的script标签写。
3. 在单独js文件写。连接进入。

注意： 1 、2 都在<script></script> 。3、<script language="script" type="Text/javascript" src="XXX.js"></script>

2、语法

2.1、变量与类型

**js的数据类型：**String、boolean、number、object、null、undefined 、Array。

**数型转化：**String–number–boolean，在js里面 true=1，false=0。

定义变量: var 变量名 = 值，使用 typeof xxx 来判断xxx的类型。new Array 来定义数组，类型可以不一致。而且不会自动转化。

**类型转化方法：**字符转数字–parseInt() & parseFloat（）。

var inp = document.getElementById("input1");
document.write(inp.value);
document.write("<br/>");
var str = "字符<br/>";
var num = "43<br/>";
document.write(str);
document.write(num);
var nums = new Array("字符",123,true);
document.write(typeof nums[0]+"<br/>");
document.write(typeof nums[1]+"<br/>");
document.write(typeof nums[2]+"<br/>");
var str2 = "2.2";
var num2 = 2;
document.write(parseFloat(str2)+num2);
str2 = true;// 不会受之前数值的类型限制
document.write(str2+"<br>");
str2 = "haha123";
document.write(parseFloat(str2)+"<br/>");// NAN Not A Number 类型转化失败时。

2.2、输出内容

1. alert() 跳出一个信息，会中止程序，一个参数是输出的内容。
2. confirm() 跳出一个对话框可以选择，是或者否。一个参数选择提示信息，返回一个boolean的值。
3. prompt() 跳出一个对话框可以录入输入内容，两个参数一个信息提示一个录入内容，返回录入的信息。
4. document.write() 在页面书写内容 一半写在body的script里.注意往页面书写标签会被解析。

2.3、运算符

算术运算符：+ - * / %
比较运算符：> < >= <= != == === !== == 不转化类型在 js中，true 就是 1。===会类型转化。
赋值运算符：+= -= /= %=
逻辑运算符：&& || ！

2.4、逻辑语法

判断： 三元运算符、if判断、switch判断。

**循环：**while、do…while、for循环、for in循环。

在js语法体系中，任何类型的值都可以作为boolean的值放在流程控制中判断 if 其中为false的内容：0,false,null,undefined,NaN,空字符。

for in 循环 每次从数字里拿出一个索引 for(p in arr) arr[p]。

2.5、类定义

1. 使用Object来定义一个对象，对象名就是变量名。
2. 给对象添加属性只需要.+属性名就可以。
3. 也可以把方法作为一个属性，意思是有一个属性名的方法。
4. 在方法内可以使用定义的属性，通过this关键字来调用。方法参数不需要指定类型。

JSON定义对象 JSON {键:值,键:值…}

var stu = new Object();
stu.name = "张三";
stu.age = 23;
stu.eat = function(food){
	// 定义方法可以使用自己的属性 用this来使用
	alert(this.age+"岁的"+this.name+"在吃"+food+"....");
};
stu.eat(true);
// 使用JSON格式来定义 键：值
// JSON 定义数组 
var nums = [];
nums.push("hello");// 数组放值。
nums.push(123);
document.write("1:"+nums+"<br/>");
nums.length = 0;// 清空数组
document.write("2:"+nums+"<br/>");
// JSON定义对象 JSON {键:值,键:值....}
var str2 = {
	name:"李四",
	age:44,
	hobby:["动漫","游戏","可乐"],// 数组定义
	eat:function(){// 方法定义
		document.write(this.hobby);
	}
};
str2.eat();
document.write("<hr>");
// 函数的构造运用
function student(sno){
	this.sno = sno;
	this.eat = function(){
		document.write(sno);
	};
	this.play = function(){test();};
};
var s = new student("instance");
s.eat();
s.play(); 

2.6、函数

函数:使用阶段：

1. 封装一段可以重复使用的代码

   ​ function abc(a,b,c){} js里的方法必有返回值，通过return来返回的。如果没写那么返回值就是undefined。调用函数的时候可以使用与形参不一致的参数。函数无重载时，后面的声明会覆盖前面的声明。函数的参数全部封装在 arguments 的数组里。

2. 高级使用

   ​ js中函数也可以作为一个数据类型，声明函数时创造了Function对象,对象名就是函数名，意味着函数可以赋值，也可以作为返回值和参数。

3. 可以作为构造函数的构造器

   ​ 如果调用时候使用 new 那么该函数就是一个构造函数。

function abc(a,b,c){
	alert(a+b+c);
}
function abc(a,b,c){
	alert(a+b);
}
//abc(1,2,3);
function test(){return 123;}
function test2(num){
	alert(num);
	return test();// 作为返回值。
}
var nums = test2(test());// 作为参数传递。
document.write("<font color=red >"+nums+"</font>");

var person1 = {
	name:"悟空",
	age:23
}
var person2 = {
	name:"八戒",
	age:44,
}
var person = {
	get:function(a,b){
		return this.name+":"+this.age+":"+a+":"+b;
	}
}
var strs = person.get.call(person2,"行","吧");// call方法
strs = person.get.apply(person1,["行","吧"]);// apply方法
document.write("<br/>"+strs+"<br/>")
var name = "东野圭吾";
function show1(){
	var name2 = "山本耀司";
	document.write("<br/>"+name+"<br/>");
	document.write("<br/>"+name2+"<br/>");
}
function show2(){
	document.write("<br/>"+name+"<br/>");
	document.write("<br/> 1"+name+"<br/>");// 因为name2 找不到而报错
}
show1();
show2();
alert("信息提示框");
var flag = confirm("选择对话框");
var string = prompt("信息输入框","默认值1");
document.write("<br/>"+flag+"<br/>");
document.write("<br/>"+string+"<br/>");

3、DOM

HTML DOM（文档对象模型）
​ 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有对象：
​ JavaScript 能改变页面中的所有 HTML 元素。
​ JavaScript 能改变页面中的所有 HTML 属性。
​ JavaScript 能改变页面中的所有 CSS 样式。
​ JavaScript 能删除已有的 HTML 元素和属性。
​ JavaScript 能添加新的 HTML 元素和属性。
​ JavaScript 能对页面中所有已有的 HTML 事件作出反应。
​ JavaScript 能在页面中创建新的 HTML 事件。

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
​ 作为对象的 HTML 元素。
​ 所有 HTML 元素的属性。
​ 访问所有 HTML 元素的方法。
​ 所有 HTML 元素的事件。

**换言之：**HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素及其属性的标准。

3.1、获取标签对象

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.getElementsByName(name)	通过name名来查找元素

id获取的是单个标签对象，而其它都是标签的数组。

3.2、改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

3.3、添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

3.4、添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

3.5、CSS选择器查找HTML元素

使用querySelectorAll()查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素。

<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>

3.6、通过 HTML 对象选择器查找 HTML 对象

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

以下是其他HTML获取HTML的对象连接。

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title

function change(){
	var f1 = document.getElementById("input1");
	//f1.color = "blue";
	//f1.setAttribute("size","7");
	//f1.style.font-size = "18px";
	f1.style.color = "blue";
	f1.style.width = "200px";
	f1.type = "hidden";
}

3.7、BOM计时器

**setTimeOut()

标签：浏览器,JavaScript,学习,window,HTML,cookie,var,document
来源： https://blog.csdn.net/qq_43310689/article/details/109047944

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。