【白嫖无废话-秒懂javascript基础知识-免费持续更新】-CSDN博客

本文链接：https://blog.csdn.net/m0_56920365/article/details/137020449

本文介绍了JavaScript的基本概念，重点讲解了事件驱动编程、onclick事件处理以及三种代码嵌入方式，包括事件句柄、脚本块和外部JS文件。同时涉及了变量命名规则和基本数据类型。

摘要由CSDN通过智能技术生成

一、js须知的概念

js是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。

（一）JS中的事件

在JS中有很多事件，其中有一个事件叫做：鼠标单击点击，单词：click。

并且任何事件都会对应一个事件句柄叫做：onclick。(这里是点击的事件句柄)

注意：事件和事件句柄的区别是事件句柄是事件单词前加on
而且事件句柄是以HTML标签的属性存在的。

（二）onclick

οnclick=“这里可以写js代码”
执行原理：
页面打开，JS代码并不会执行，只是把代码注册到按钮的事件上了。等这个事件发生时，JS会被浏览器自动调用。

（三）怎么使用JS代码弹出消息框

再JS中有一个内置的对象叫做window，全部小写,可以直接拿来使用
windows代表的是浏览器对象。window对象有一个函数叫做alert。
用法是：window.alert(“消息”)，就可以弹窗了。（里面的引号用双引号还是单引号看情况而定。）
JS中可以使用双引号也可以用单引号，一条语句结束后，可以使用分号也可以不用。
javascript包括三块：ECMAScript DOM BOM

二、三种JS代码嵌入方式

（一）用事件句柄，直接在里面写JS代码

* //当这个事件发生，这里的JS代码才会执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>题目JS</title>
</head>
<body>
 <input type="button" value="hello" onclick="window.alert('欢迎你')">
 <!--
 <input type="button" value="hello" οnclick="这里可以写js代码"> //当这个事件发生，这里的JS代码才会执行。
  <input type="button" value="hello" οnclick="alert('欢迎你')
                                            alert('1111')
                                            alert('2222')">//还可以这样写,window.可以省略不写 ,里面写多个alert
 -->
 
</body>
</html>

看运行结果：type="button"是按钮的意思，onclick是点击事件的句柄,当发生点击按钮事件时,对应的点击事件句柄j就会执行
在这里插入图片描述

（二）用脚本块（放在哪里都是一样，随意放，而且可以出现好几个。）在块里面写JS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>题目JS</title>
</head>
<body>
 	 <script type="text/javascript">
 	 //这里写JS代码
 	 var str = "jaja"; //定义一个字符串
 	  alert(str);//打印这个字符串
 	  </script> 
</body>
</html>

看运行结果
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b40345daba074a6e8021a11b6c11d575.png

（三）引入外部的JS文件

引入的外部文件里面的代码也是遵循自上而下的顺序依次执行，在页面打开的时候就执行。

<html>
    <head>
        <script type="text/javascript" src="JS1.js"></script>
        <title>这里是标题--简单一些的JSON</title>
    </head>

    <body>      
    </body>
</html>

在JS1.JS文件中写javascript的代码。type="text/javascript"表示引入的这个文件是一个javascript文件，src=“这里写文件路径，若是在一个文件夹中，就直接写文件名”
看一下运行结果：
点击确定后：

(三)JS基础语法

变量名称注意：小写字母大写字母 $符号下划线和数字，但是数字不能放在最前面。
变量名避免和函数库有关系。
type="text/javascript"的优先级高于language=“text/javascript”
赋值是=
比较值或者类型是用==
比较值和类型是===
声明变量：var 变量名;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>题目JS</title>
</head>
<body>
 	 <script type="text/javascript">
 	    var str = "jaja"; //定义一个字符串 '' ""都认为是字符串.
        var str_2; //undefined 表示未定义
        str_2 = "SMITH"; //重新赋值后，string类型
        var i_0 = 12; //整型 number类型
        var j_0 = 12.0; //浮点型number类型
        var date = new Date(); //object 类型，相当于对象
        var b_0 = true; //布尔类型
        var items = ["jones", 12, date]; //object ，但是是个数组

         //js中的空，表示什么都没有  ""、''、null都表示空,但是类型是string后面类型为object
         var n = null;//这个n的null，属于null类型，但是typeof测试出来是object，无法解释，注意！！！
        
         //在JS中当一个变量没有手动赋值的时候，系统默认赋值undefined,undefined也是一个值
         var i;
         alert("i="+i);//打印i

 	  </script> 
</body>
</html>

JS数据类型有原始类型（Undefined，Number，String，Null，BOOlean，）和引用类型（Object和它的子类）
ES规范ES6之后有添加一个新的类型（Symbol）。
JS有一个运算符叫做typeof，可以在程序的运行阶段动态的获取变量的数据类型。
typeof运算符的语法格式：typeof 变量名或者函数名
typeof 运算符的结果是一下6个字符串之一，注意字符串都是全部小写：undefined，number，string，boolean，object，function