JavaScript学习笔记：一些全局函数和触发器的整理

最新推荐文章于 2021-12-15 09:09:01 发布

原创最新推荐文章于 2021-12-15 09:09:01 发布 · 374 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #web #html

学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍JavaScript的基础知识，包括语言特性、变量、数据类型、函数定义与使用、数组操作及事件驱动等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

开始写JavaScript吧

JavaScript 即使有一行错了还是可以运行，比较坑，但可以借助chrome浏览器的F12->source看到出错的地方，还好。
所有JavaScript代码都要放在html文件下的<script></script> 标签之间，否则浏览器是不会解释的。
也可以在外部写好JavaScript，然后导入到html文件:
```
<script type="text/javascript" src="js/out.js"></script>
```
被导入的JavaScript文件就跟在script标签下写的一样，有执行语句就马上执行，只有方法就先不会执行。
JavaScript在html文件中是从上而下执行的，所以当一个html元素处于JavaScript标签下面，执行JavaScript时是不能操作这个元素的。因为执行时还没载入这个元素。
chrome中的调试模式跟IDEA差不多。
点入document，打开structre页面，可以看到很多onXxx()方法，慢慢试呗。
control+j 可以快速插入标签。

JavaScript变量的特点

JavaScript是弱类型语言，一个变量可以赋值为不同的数据类型，统统用var来声明就行。而且重复声明也没有问题！
```
var i=2; //ok
var i="is it ok？"; //虽然被重复声明了也没关系！
var i=null;  //还是ok的
```
JavaScript变量的生命周期一般是全局的，声明了就之后都可以用，当然要在scripte标签中用:
```
<script>
    var i =10;
</script>
<script>
     document.write(i + "<br/>"); //10
 </script>
```
只有一种情况下变量生命周期是局部的：在方法内，并且声明时加上了var
```
<script>
function fun(){
	var i=20;	//出了这个方法就用不了了。
}
</script>
```
- 总之如果不是在方法内的，尽量还是加上var比较好，在方法内的变量则视情况加var。

JavaScript的5种数据类型，通过typeOf(变量名) 方法可以得到变量类型的String：

类型	示例	转换结果
Number	3/3.14	隐：数字本身，显：数字本身
Boolean	true/false	隐 / 显：true为1，false为0
String	“abc”,“12a”	隐：全数字得数字，否则得NAN 显："123"得123，"23bbb"得23，"bbb"得NAN
Object	new Date() / null	隐 / 显：null得0 ，其他得NAN ps:有一些object能转成number的(像Date)，但我找不到规律
undefined	var i;	都得NAN

当执行四则运算、比较运算时，所有变量都会被隐式转换成Number，再进行计算和比较。最后返回一个Number或者Boolean
只有两种情况不会进行隐式转换
- String/object + 其他类型 会把String / Object对象与另一个类型拼接成一个String，而不会计算。（所以可以看做所有类型都可以转成String)
- String >、<、== String 会把两个String按照字符串的逻辑进行比较，而不会变成数字再比较。
隐式转换的结果如上表所示，当NAN参与四则运算，只会得到NAN。NAN参与逻辑比较，永远获得false。

JavaScript函数的特点

JavaScript的函数类似java中的方法，但有点不一样。

两种定义函数的方法：

// 命名函数定义：
founction afun(a,b){
    var sum=a+b;
    return sum;
}
// 不用声明返回值类型，参数不用加类型
var sum=afun(2,3);
// 可以用名字来调用

// 匿名函数定义：
var afun=function(a,b){
    var multi = a*b;
    return multi;
}
var mutlti=afun(2,3);
// 一般不会用变量装着的，一般直接赋值给HTMLElement的onXxx属性。

在<Scripte> 中定义函数，如果不调用，是永远不会执行的。
- 就像是局部内部类，只是定义局部内部类，而不new，以及执行方法，是没用的。
afun(3,5); 这种形式才叫调用，有function开头的都属于定义而不是调用。
函数能直接用之前声明的变量。
函数的局部变量如果不加var，也是会变成全局的。而函数外部的所有变量，无论是否加var，都是全局的。
JavaScript的函数没有重载，后面的函数会覆盖前面的同名函数，调用时传入的实参和函数的形参没有关系的，那只是一个快捷方式。
所有传入的变量，无论是否在形参中有声明，统一都放在一个隐形变量arguments[]中,我们可以直接arguments[0] 这样拿到参数，也可以通过形参来获得参数。一样的。
- arguments[]是一个数组，javaScript的数组是没有类型的，啥都能传进去。
- 如果数组元素没有传入任何参数就被访问，会获得undefined。
我们可以把JavaScript中的函数看成是接受可变参数的方法:

function sum(Object... arguments){
    //其他方法
}

JavaScript的语法

Switch的另一种功能

switch 在JavaScript中有另一种用法：

switch(true){
    case 判断语句1:
        执行语句;
        break;
    case 判断语句2:
        执行语句;
        break;
    default:
        执行语句;
        break;
}

可以用来代替if(){}else if(){} 算是JavaScript为数不多的比java优胜的地方了。

一些全局函数

全局函数就像是java的库静态方法，直接调用就可以。现有的全局函数如下：

Number parseInt(String) 显式地把String转化成int，一开始就没有数字则返回NAN，否则能转化多少算多少。
- Number parseFloat(String) 也是一样，只是转成double而已
boolean isNan(number) 接收一个number类型，返回他是否为NAN，如果传入其他类型，则会隐式转换成number再判断
String window.prompt("提示信息","默认值") 让浏览器弹出个框，接受String信息，点取消会返回Null，window可以省略。非常阻碍用户体验，只在开发时用得比较多
void window.alter("提示信息") 弹出个框，告知用户信息，要非常重要的信息才能弹这种框。
HTMLElement|null document.getElementById(String id) 根据id获得HTML的元素，方便改变元素的属性。这是HTML和JavaScript之间的桥梁了！

注意！要在HTMLElement下面调用这个方法，才能获得HTMLElement，否则会获得null。
number window.setInterval(Handler handler,number time) 设置每隔一段时间执行一次handler的参数，time要求是毫秒值的。
void document.write(String[]) 把String数组写到document中，方法可以处理数组，所以可以传入多个参数:document.write("hello"," world"," is"," ok!")

注意！这个方法会覆盖我们自己写的html的。

用事件来驱动函数：

函数一般是用事件来驱动的。有两种把函数跟事件绑定在一起的方法：

<input type="button" id="btn" value="点我一下">
<input type="button" id="btn_2" value="再点我一下！" onclick=aa(this)>
<script>
    // 方法1：匿名函数绑定
    document.getElementById("btn").onclick =function (ev) {
        this.value="哎呀！";
    }

    // 方法2：命名函数绑定
    function aa(obj) {
        obj.value="ooooooo!";
    }
</script>

通过直接把function(参数){}传给对应的触发器(onclick参数) 可以绑定，这种绑定可以送function一个指向激活function的HTMLElement的引用。还有一个触发的event作为参数。可惜只能用一次。
还可以在HTML中定义标签时通过函数名传给触发器。但是这次指向HTMLElement的引用要自己手动传，不会赠送的。而且不会传mouseEven作为参数。但优势是一个函数可以多次调用。
两种方法各有优劣，到时候自己选吧。
注意匿名函数绑定时，如果对应的HTMLElement还没加载，就会绑定失败的。而命名函数绑定则不会。

常用的触发器如下：

随便点进去一个这种参数，可以在GlobalEventHandlers 接口中看到更多触发器，逐个去试试吧。

onload : 当页面或元素完成加载，就会触发赋值给该参数的函数。window.function(){}; 可以用来在页面全部加载完成后给所有元素所有绑定函数。因为只有所有元素都加载完成，window才算加载完成。
onclick 鼠标单击
ondbclick 鼠标双击
onmouseover: 当元素有鼠标移入时就会触发赋值给该参数的函数。
onmouseout 当鼠标移除。
onfocus 得到焦点，元素被选中，或者通过table得到光标
onblur 失去焦点，元素失去光标
onchange 元素的内容发生改变，包括value,name等属性的内容。
- element.innerHTML / element.innerText 可以改变子标签/子文本内容，而不是属性。
- 只有<form> 标签的子元素才有value属性的，其他元素只能用这个方法改子标签/子文本内容
<option> 标签时不能触发事件的。

JavaScript的数组

JavaScript的数组就像是java中的集合了，但是是不限定类型的！

数组的创建：

new Array() 创建长度为0的数组

new Array(2) 创建长度为2的数组

new Array(3,5,"abc",7) 创建包括了括号元素的数组

[2,3,5,"abc",7] 同上。

数组的一些方法：

JavaScript的数组可以不同元素，可以变化长度，还有很多方法

a1.concat(a2) 同 list_1.addall(list_2)
a3.reverse(); 同 Collections.reverse(a3)
a4.join(String sperator);
- 同 String.join(String sperator,List<CharSequence>) 但不限泛型。
- 又像Arrays.toString(a4)但可以定义分隔符。
a4.sort(); 同list.sort(null);
- 他也是可以接受比较器的，但比较器是个function。