菜鸟笔记——javascript

//引用外部js文件

JavaScript 对大小写敏感

可以在文本字符串中使用反斜杠对代码行进行换行。

document.write("Hello \
World!");

for…in 循环中的代码块将针对每个属性执行一次
for (对象中的变量)
{
要执行的代码
}
JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

1.声明变量

命名:

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不推荐)
  • 变量名称对大小写敏感

可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:var name=“Gates”, age=56, job=“CEO”;
未使用值来声明的变量,其值实际上是 undefined。
重新声明 JavaScript 变量,该变量的值不会丢失。

2.数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

  • var carname=new String(); //内建对象
  • var x= new Number();
  • var y= new Boolean();
  • var cars= new Array();
  • var person= new Object();

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。


局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。


全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。


JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

3.js对象

Number:
JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。

Boolean:
下面的所有的代码行均会创建初始值为 false 的 Boolean 对象
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
下面的所有的代码行均会创初始值为 true 的 Boolean 对象:
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean(“true”);
var myBoolean=new Boolean(“false”);
var myBoolean=new Boolean(“Bill Gates”);

4.js实现

核心 ECMAScript 描述了该语言的语法和基本对象;
文档对象模型 DOM 描述了处理网页内容的方法和接口;
浏览器对象模型 BOM 描述了与浏览器进行交互的方法和接口。
菜鸟笔记——javascript_第1张图片

5.DOM

访问 HTML 元素(节点)
您能够以不同的方式来访问 HTML 元素:

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

HTML DOM - 改变 HTML

  1. 改变 HTML 输出流
    document.write() 可用于直接向 HTML 输出流写内容。

  2. 改变 HTML 内容
    修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
    ex. document.getElementById(id).innerHTML=new Text

  3. 改变 HTML 属性
    document.getElementById(id).attribute=new value 可以改变 HTML 元素的属性。
    ex. document.getElementById(“image”).src=“landscape.jpg”

HTML DOM - 改变 CSS

  1. 改变 HTML 样式
    document.getElementById(id).style.property=new style 可以改变 HTML 元素的样式。
    ex. document.getElementById(“p2”).style.color=“blue”;

HTML DOM 事件

  1. onload 和 onunload 事件
    onload 和 onunload 事件会在用户进入或离开页面时被触发。
    onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
    onload 和 onunload 事件可用于处理 cookie。

  2. onchange 事件
    onchange 事件常结合对输入字段的验证来使用。
    ex.

	function myFunction()
	{
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
	}
	
			//输入时字符变成大写
  1. onmouseover 和 onmouseout 事件
    onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

  2. onmousedown、onmouseup 以及 onclick 事件
    onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
    首先当点击鼠标按钮时,会触发 onmousedown 事件,
    当释放鼠标按钮时,会触发 onmouseup 事件,
    最后,当完成鼠标点击时,会触发 onclick 事件。

HTML DOM 元素(节点)
菜鸟笔记——javascript_第2张图片

  1. 创建新的 HTML 元素
    如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
    ex.
	

这是一个段落

这是另一个段落

  1. 删除已有的 HTML 元素
    如需删除 HTML 元素,您必须首先获得该元素的父元素。
	

这是一个段落。

这是另一个段落。

6.js window

Window Location

  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 (80 或 443)
  • location.protocol 返回所使用的 web 协议(http:// 或 https://)
  • location.assign() 方法加载新的文档
    ex.window.location.assign(“http://www.w3school.com.cn”)

History

  • history.back() 方法加载历史列表中的前一个 URL
  • history forward() 方法加载历史列表中的下一个 URL

消息框

  • 警告框
    警告框经常用于确保用户可以得到某些信息。
    当警告框出现后,用户需要点击确定按钮才能继续进行操作。
    语法:alert(“文本”)

  • 确认框
    确认框用于使用户可以验证或者接受某些信息。
    当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
    如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false
    语法:confirm(“文本”)

  • 提示框
    提示框经常用于提示用户在进入页面前输入某个值。
    当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
    如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null
    语法:prompt(“文本”,“默认值”)

计时

  • setTimeout()
    setTimeout(action, delay)方法在第二个参数所指定的延迟时间(ms)后,调用作为第一个参数传入的函数。
    用clearTimeout(name)取消定时器函数
	var timer1 = setTimeout(action,delay);
	clearTimeout(timer1);
  • setInterval()
    setTimeout(action, delay)方法在第二个参数所指定的间隔时间(ms)后,调用作为第一个参数传入的函数。
	var timer2 = setInterval(action,delay);
	clearInterval(timer2);

你可能感兴趣的:(使用笔记)