javascript笔记_挪威鸭的javascript笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_45670595/article/details/114479012

javascript笔记

输出数据

没有打印或者输出的函数

window.alert() //弹出警告框
innerHTML //写入到HTML元素
document.write() //将内容写到HTML文档中.
console.log() //写入到浏览器的控制台

实例：

<p id ="hello">原段落</p>
<script>document.getElementById("hello").innerHTML="已经修改段落"</script>
//使用 id 属性来查找 HTML 元素

若在文档已完成加载后执行document.write,整个HTML会被覆盖,例如：

<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    document.write(Date());
}
</script>

数据类型

数据类型：

string number boolean object fountion symbol
对象类型

Object Date Array
不包含任何值的数据类型

null undefined

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法,转换为字符串

document.getElementById("demo").innerHTML = myVar;

myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
myVar = 123       // toString 转换为 "123"
myVar = true       // toString 转换为 "true"
myVar = false      // toString 转换为 "false"

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JavaScript JSON

JSON介绍：

JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据。

JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

语法规则：

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

函数

function myfunction(a,b){return a*b;}

可以存储在变量中

var x = founction myfounction (a,b) {return a*b}'
var z = x(4,3);

HTML DOM

文档对象模型 Document Object Module

网页加载时，浏览器会创建页面的DOM，DOM被构造为对象的树

通过可编程的DOM，javascript有能力

改变HTML元素
改变HTML属性
CSS样式
对事件作出反应

查找HTML元素的方法：
id

标签名

var x = document.getElementById("main");
var y = x.getElementByTagName("p");  //id为main的<p>元素

类名
```
var x=document.getElementByClassName("classname");
```
改变HTML内容
```
document.getElementById(id).innerHTML=新的 HTML
```
改变HTML属性
```
document.getElementById(id).attribute=新属性值
//例如
<script>
document.getElementById("image").src="landscape.jpg";
</script>
```
改变CSS
```
document.getElementById(id).style.property=新样式
document.getElementById("p2").style.color="blue";
```
HTML DOM 事件
- onclick
```
<button onclick="displayDate()">点击</button>
```
- onload onunload
  
  onload 和 onunload 事件会在用户进入或离开页面时被触发。
- onchange
```
<input type="text" id="fname" onchange="upperCase()">
//当用户改变输入字段的内容时，会调用 upperCase() 函数
```
- onmouseover onmouseout
  
  用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
- onmousedown onmouseup
  
  onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
- 在用户点击按钮时触发监听事件：
```
document.getElementById("myBtn").addEventListener("click", displayDate);
```
  语法：
  
  element.addEventListener(event, function, useCapture);
  
  第一个参数是事件的类型 (如 “click” 或 “mousedown”).
  
  第二个参数是事件触发后调用的函数。
  
  第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
```
	### 	HTML DOM 元素（节点）
```

<div id="div1">
</div>
 <p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>

- 创建新的HTML元素（节点） appenfChild()

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

移除已经存在的元素

要移除一个元素，你需要知道该元素的父元素。

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

替换HTML元素 replaceChile()

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTMLCollection对象

HTMLCollection是 HTML 元素的集合

//获取文档所有的<p>元素：
var x = document.getElementsByTagName("p");
//集合中的元素可以通过索引(以 0 为起始位置)来访问
y = x[1];

NodeList

NodeList 是一个文档节点的集合。

var myNodeList = document.querySelectorAll("p");

BOM Browser Object Model

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

windows对象

-  所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
- 甚至 HTML DOM 的 document 也是 window 对象的属性之一

window.document.getElementById("header");

所有浏览器都支持 window 对象。它表示浏览器窗口。

一些方法：
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
Window Screen

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性：
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

在编写时可不使用 window 这个前缀。

一些实例:
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口（80 或 443）
- location.protocol 返回所使用的 web 协议（http: 或 https:）
Window History

window.history对象包含浏览器的历史

在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同
window.navigator

对象包含有关访问者浏览器的信息。

window.navigator 对象在编写时可不使用 window 这个前缀。

弹窗
- 警告框
```
window.alert("*sometext*");
```
window.alert() 方法可以不带上window对象，直接使用**alert()**方法。
```
 - 确认框
```
确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。
```
window.confirm("sometext");
```
window.confirm() 方法可以不带上window对象，直接使用**confirm()**方法。
- 提示框
提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
```
window.prompt("*sometext*","*defaultvalue*");
```
window.prompt() 方法可以不带上window对象，直接使用**prompt()**方法。

创建对象

person=new Object();
//添加属性
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
//或：
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用构造器：

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

创建实例

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
t();
//添加属性
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
//或：
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用构造器：

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

创建实例

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

javascript笔记