JAVASCRIPT 基础 学习笔记

1. JavaScript改变HTML内容:
document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript改变HTML属性:

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

JavaScript改变HTML样式:

document.getElementById("demo").style.fontSize = "25px";

JavaScript隐藏/显示HTML元素:

document.getElementById("demo").style.display="none";
document.getElementById("demo").style.display="block";
2. 外部js脚本:在<head><body>中引用
<script src="myScript.js"></script>

外部脚本不能包含 <script>标签。

3. JavaScript输出
3.1. 使用 window.alert() 写入警告框
window.alert(5 + 6);
3.2. 使用 document.write() 写入 HTML 输出
document.write(5 + 6);

注意:在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML 。该方法仅用于测试。

3.3. 使用 innerHTML 写入 HTML 元素
document.getElementById("id").innerHTML = "Hello";
3.4. 使用 console.log() 写入浏览器控制台
console.log("hello");
4. JavaScript关键词

保留词,无法用作变量名。

break 	 	终止 switch 或循环。
continue 	跳出循环并在顶端开始。
debugger 	停止执行 JavaScript,并调用调试函数(如果可用)。
do ... while 	执行语句块,并在条件为真时重复代码块。
for 	 	标记需被执行的语句块,只要条件为真。
function 	声明函数。
if ... else 	标记需被执行的语句块,根据某个条件。
return 	 	退出函数。
switch 	 	标记需被执行的语句块,根据不同的情况。
try ... catch 	对语句块实现错误处理。
var 	 	声明变量。
5. JavaScript语法

驼峰式大小写 > 下划线,不能使用连字符(为减法预留)。

代码可读性:运算符两边用空格间隔。

单行注释://多行注释/*...*/

重复声明变量,原变量不会丢失值。

6. JavaScript运算

(ES2016)** 幂:5**2结果为25,同Math.pow(5,2)

JavaScript运算符优先级值:

20 	( ) 	 	表达式分组 	 	(3 + 4)
  	  	  	 
19 	. 	 	 	成员 	 	 	person.name
19 	[] 	 	 	成员 	 	 	person["name"]
19 	() 	 	 	函数调用 	 	myFunction()
19 	new 	 	创建 	 	 	new Date()
  	  	  	 
17 	++ 	 	 	后缀递增 	 	i++
17 	-- 	 	 	后缀递减 	 	i--
  	  	  	 
16 	++ 	 	 	前缀递增 	 	++i
16 	-- 	 	 	前缀递减 	 	--i
16 	! 	 	 	逻辑否 	 	 	!(x==y)
16 	typeof 	 	类型 	 	 	typeof x
  	  	  	 
15 	** 	 	 	求幂 (ES7) 	 	10 ** 2
  	  	  	 
14 	*10 * 5
14 	/10 / 5
14 	% 	 	 	模数除法 	 	10 % 5
  	  	  	 
13 	+10 + 5
13 	-10 - 5
  	  	  	 
12 	<< 	 	 	左位移 	 	 	x << 2
12 	>> 	 	 	右位移 	 	 	x >> 2
12 	>>> 	 	右位移(无符号) 	x >>> 2
  	  	  	 
11 	< 	 	 	小于 	 	 	x < y
11 	<= 	 	 	小于或等于 	 	x <= y
11 	> 	 	 	大于 	 	 	x > y
11 	>= 	 	 	大于或等于 	 	x >= y
11 	in 	 	 	对象中的属性 	 	"PI" in Math
11 	instanceof 	对象的实例 	 	instanceof Array
  	  	  	 
10 	== 	 	 	相等 	 	 	x == y
10 	=== 	 	严格相等 	 	x === y
10 	!= 	 	 	不相等 	 	 	x != y
10 	!== 	 	严格不相等 	 	x !== y
  	  	  	 
9 	& 	 	 	按位与 	 	 	x & y
8 	^ 	 	 	按位 XOR 	 	x ^ y
7 	| 	 	 	按位或 	 	 	x | y
6 	&& 	 	 	逻辑与 	 	 	x && y
5 	|| 	 	 	逻辑或 	 	 	x || y
4 	? : 	 	条件 	 	 	? "Yes" : "No"
  	  	  	 
3 	= 	 	 	赋值 	 	 	x = y
3 	+= 	 	 	赋值 	 	 	x += y
3 	-= 	 	 	赋值 	 	 	x -= y
3 	*= 	 	 	赋值 	 	 	x *= y
3 	%= 	 	 	赋值 	 	 	x %= y
3 	<<= 	 	赋值 	 	 	x <<= y
3 	>>= 	 	赋值 	 	 	x >>= y
3 	>>>= 	 	赋值 	 	 	x >>>= y
3 	&= 	 	 	赋值 	 	 	x &= y
3 	^= 	 	 	赋值 	 	 	x ^= y
3 	|= 	 	 	赋值 	 	 	x |= y
  	  	  	 
2 	yield 	 	暂停函数 	 	yield x
1 	, 	 	 	逗号 	 	 	7 , 8

赋值符中,**= 运算符属于 ECMAScript 2016 proposal (ES7)的实验部分。它的跨浏览器表现并不稳定。请勿使用。

7. JavaScript数据类型

字符串值,数值,布尔值,数组,对象。

当数值与字符串混合运算时,JavaScript会根据优先级/从左到右计算表达式,不同的运算次序影响计算结果。

var x = 911 + 7 + "Hello"结果为918Hello
var x = 911 + "Hello" + 7结果为911Hello7
var x = "Hello" + 911 + 7结果为Hello9117

JavaScript 拥有动态类型:相同变量可用作不同类型:

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";		 // 现在 x 是字符串值

JavaScript 只有一种数值类型,写数值时用不用小数点均可

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

超大或超小的数值可以用科学计数法来写:

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

JavaScript 数组用方括号书写,数组的项目由逗号分隔。

var cars = ["Porsche", "Volvo", "BMW"];

JavaScript 对象用花括号来书写,对象属性是 name:value(属性,属性值) 对,由逗号分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

对象可以包含方法,方法是作为属性来存储的函数。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

JavaScript中数组属于对象,因此typeof对数组返回object

js中的布尔值为true/false,大小写敏感,True/False为普通字符串

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

8. undefined、null与NaN

三者皆可用!tmp排除(一般应用)。

当变量与函数声明后未赋值,其值为undefined。

if (typeof(tmp) == "undefined")

typeof 返回的是字符串,有六种可能:“number”、“string”、“boolean”、“object”、“function”、“undefined” 。

判断null:(typeof(null)结果为object

if (!tmp && typeof(tmp)!="undefined" && tmp!=0){

undefined与null:
Undefined 与 null 的值相等,但类型不相等:

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true
if (tmp == undefined)if (tmp == null)
都可将二者同时排除

判断NaN:

if(isNaN(tmp))

将NaN 与任何值(包括其自身)相比得到的结果均是 false,判断值是否为NaN,不能使用=====运算符。

isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的情况。

9. this

JavaScript this 关键词指的是它所属的对象。

在对象方法中,this 指的是此方法的“拥有者”(即对象)。

在单独使用时, this 指的是全局对象。
在浏览器窗口中,全局对象是 [object Window]。

在 JavaScript 函数中,函数的拥有者默认绑定 this。
在函数中,this 指的是全局对象 [object Window]。

在严格模式下不允许默认绑定。
在函数中使用时,在严格模式下,this 是未定义的(undefined)。

在 HTML 事件处理程序中,this 指的是接收此事件的 HTML 元素:

<button onclick="this.style.display='none'">
  点击来删除我!
</button>

显式函数绑定
call()apply() 方法是预定义的 JavaScript 方法。
它们都可以用于将另一个对象作为参数调用对象方法。

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);
 // 会返回 "Bill Gates"
 // this 会引用 person2
10. JavaScript事件

this.innerHTML改变自身元素的内容:

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

常见的 HTML 事件:

onchange 	 	HTML 元素已被改变
onclick 	 	用户点击了 HTML 元素
onmouseover 	用户把鼠标移动到 HTML 元素上
onmouseout 	 	用户把鼠标移开 HTML 元素
onkeydown 	 	用户按下键盘按键
onload 	 	 	浏览器已经完成页面加载
11. JavaScript字符串

\ 转义字符

代码 	结果 	描述
\' 	 	' 	 	单引号
\" 	 	" 	 	双引号
\\ 	 	\ 	 	反斜杠

其他六个 JavaScript 中有效的转义序列:

代码 	结果
\b 	 	退格键
\f 	 	换页
\n 	 	新行
\r 	 	回车
\t 	 	水平制表符
\v 	 	垂直制表符

字符串 vs 字符串对象

var x = "Bill";             
var y = new String("Bill");
// (x == y) 为 true,因为 x 和 y 的值相等
// (x === y) 为 false,因为 x 和 y 的类型不同(字符串与对象)

JavaScript 对象无法进行对比,比较两个 JavaScript 将始终返回 false。

var x = new String("Bill");             
var y = new String("Bill");

// (x == y) 为 false,因为 x 和 y 是不同的对象

slice()方法

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);
var res = str.slice(-13,-7);
// Banana
// 包含开始位置,不包含结尾位置

(负值位置不适用 Internet Explorer 8 及其更早版本。)

var str = "Apple, Banana, Mango";
var res = str.slice(7);
var res = str.slice(-13);
// Banana, Mango
// 裁剪剩余部分

substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。

substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的长度。

replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地,replace() 对大小写敏感。如需执行大小写不敏感的替换,请使用正则表达式 /i(大小写不敏感):

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

默认地,replace() 只替换首个匹配。如需替换所有匹配,请使用正则表达式的 g 标志(用于全局搜索):

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

trim() 方法删除字符串两端的空白符。

12. JavaScript数值&数组

JavaScript 数值始终是 64 位的浮点数(双精度浮点数),其中 0 到 51 存储数字(片段),52 到 62 存储指数,63 位存储符号。

对一个数和一个字符串相加,结果是字符串级联。

除此之外,在所有数字运算中,JavaScript 会尝试将字符串转换为数字。

var x = 100 / "Apple"; 
// x 将是 NaN(Not a Number)

Infinity (或 -Infinity)是 JavaScript 在计算数时超出最大可能数范围时返回的值。

除0返回Infinity-Infinity,除字符串返回NaN。(infinity与NaN的类型都为number )

JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
// Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串,还可以规定分隔符:

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
// Banana * Orange * Apple * Mango

pop() 方法从数组中删除最后一个元素,返回被弹出的值。
push() 方法在数组结尾处向数组添加一个新的元素,返回新数组的长度。
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引,返回被位移出的值。
unshift() 方法在开头向数组添加新元素,返回新数组的长度。

length 属性提供了向数组追加新元素的简易方法:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          
// 向 fruits 追加 "Kiwi"

sort() 方法以字母顺序对数组进行排序:
reverse() 方法反转数组中的元素,可以使用它以降序对数组进行排序:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

通过一个比值函数来修正sort() 方法对数值的排序:

// (升序)
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 

以随机顺序排序数组:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); 

查找数组中的最高值(最低值:min):


var points = [40, 100, 1, 5, 25, 10];
myArrayMax(points);

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}
发布了18 篇原创文章 · 获赞 5 · 访问量 7953

猜你喜欢

转载自blog.csdn.net/fruiva/article/details/104872447
今日推荐