javascript学习笔记

函数定义

自调用函数:
函数表达式可以“自调用”,自调用表达式会自动调用。如果表达式后面紧跟(),则会自动调用。不能自调用声明的函数。通过添加括号,来说明它是一个函数表达式。
(function(){var x = "Hello!!";})();

函数提升:
函数可以在声明之前调用。因为提升是js默认将当前作用域提升到前面去的行为,应用于变量的声明和函数的声明,即将他们提升到调用的前面。

函数表达式
js函数可以通过一个表达式定义,函数表达式可以存储在变量中:

var x = function()
之后变量可以作为一个函数使用

函数声明
function function_name(parameters) {
执行的代码
}

函数声明后不会立即执行,会在我们需要的时候调用到。

对象

对象也是一个变量,但对象可以包含多个值(多个变量),每个值以name:value对呈现。
对象定义如下:
var car = {name:"Fiat", model:500, color:"white"};

<body>

<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {
	firstName : "John",
	lastName  : "Doe",
	age       : 50,
	eyeColor  : "blue",
	fullName : function() 
	{
		return this.firstName + " " + this.lastName;
	}
};
document.getElementById("demo").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁。";
</script>

</body>

空格和折行无关紧要。声明可横跨多行:

可以说“javascript对象是变量的容器”,但通常认为“javascript对象是键值对的容器”,键值对在js对象中常称为对象属性。

访问对象属性:有两种两种寻址方式(方法):
person.lastName或person["lastName"]

对象方法:
定义一个函数,并作为对象的属性存储。方法通过添加()调用,该实例访问了person对象的fullName()方法:
name = person.fullName();
若想访问person对象的fullName属性,它将作为一个定义函数的字符串返回。如:
anme = person.fullName; // 返回的是函数fullName属性队形的value值,即:后面的字符串。

数据类型

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

引用数据类型:对象(Object)、数组(Array)、函数(Function)。

var y=123e5; // 12300000
var z=123e-5; // 0.00123
布尔(逻辑)只能有两个值:true 或 false。var x=true; var y=false;

JavaScript 数组

下面的代码创建名为 cars 的数组:

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):

实例
var cars=["Saab","Volvo","BMW"];
通过下标0~n访问数组元素。

Undefined 和 Null

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

声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

变量

var x = 5;
变量是用于存储信息的“容器”。

在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量。

注释

// 或 /* ... */

语句

javascript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" :
document.getElementById("demo").innerHTML = "你好 Dolly";

分号用于分隔 JavaScript 语句;

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。下标列出了js语句标识符(关键字)

语句 描述
try 实现错误处理,与 catch 一同使用。
catch 语句块,在 try 语句块执行出错时执行 catch 语句块。

while 当条件语句为 true 时,执行语句块。
do ... while 执行一个语句块,在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时,可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
break 用于跳出循环。
continue 跳过循环中的一个迭代。

function 定义一个函数

if ... else 用于基于不同的条件来执行不同的动作。
switch 用于基于不同的条件来执行不同的动作。

throw 抛出(生成)错误 。
return 退出函数

var 声明一个变量。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

对代码进行折行

<body>
<script>
document.write("你好 \
世界!");
</script>
</body>

语法

数组(Array)字面量 定义一个数组:
[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:
function myFunction(a, b) { return a * b;}

使用关键字 var和let来定义变量, 使用等号来为变量赋值:

JavaScript对字母大小写是敏感的;
JavaScript使用 Unicode 字符集;

输出

显示数据,可以通过不同的方式来输出数据:

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

<body>
	
<h1>我的第一个页面</h1>
<p id="demo">我的第一个段落。</p>
	
<script>
window.alert(5 + 6);
document.getElementById("demo").innerHTML = "modify element content";
document.write("directly write content in document.");
console.log("write to console, hello world");
</script>
	
</body>


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

document.getElementById("demo")是使用id属性来查找HTML元素的JavaScript代码。
innerHTML = "modify element content" 是用于修改元素的HTML内容(innerHTML)的JavaScript 代码

请使用 document.write()仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

如果您的浏览器支持调试,你可以使用console.log()方法在浏览器中显示JavaScript值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。

js在Chrome中运行

console窗口调试js代码

F12之后点击console,然后在>下写js代码,按回车执行。

使用snippets小脚本

在source/Snippets/New snippets,在新建的小文件中,添加代码,如:
console.log("runoob-1")
console.log("runoob-2")
保存之后,右键点击脚本名字,run就可以了。

javascript用法

HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。

JavaScript 函数和事件

通常,我们需要在某个事件发生时执行代码,如当用户点击按钮时。如果把js代码放入函数中,就可以在事件发生时调用该函数。

通常是把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

外部的 JavaScript:
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。如:

<!DOCTYPE html>
<html>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>

<script src="myScript.js"></script>
	
</body>
</html>

这里的myFunction()是在myScript.js中定义的

作用域

在 JavaScript 中, 对象和函数同样也是变量。变狼就有作用域,局部作用域和全局作用域。

局部作用域:局部变量只能在函数内部访问
全局作用域:全局变量,即变量在函数外定义。当然在之内啦

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
	// 函数内可调用 carName 变量
}

事件

HTML事件时发生在HTML元素上的事件,当HTML页面中使用js时,js可以触发这些事件。

HTML事件可以是浏览器行为,也可以是用户行为。以下是HTML事件的实例:

  • HTML页面完成加载

  • HTML input字段改变时

  • HTML按钮被点击时
    通常,当事件发生时,可以做些事情,在事件触发时,js可以执行一些代码。格式如下:

    <p id="demo"></p> <script> function greet(sentence) { alert(sentence) } </script> </body>

常见的HTML事件如下:

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

原文地址:https://www.cnblogs.com/gwzz/p/15592630.html