入门JavaScript(1)：如何在HTML中加入JS、创建js变量、理解数据类型与编写函数

最编程 2024-07-22 15:28:05

...

JavaScript(一)：HTML嵌入JS方式、js变量、数据类型和函数

概念：JavaScript是运行在浏览器上的事件驱动型的脚本编程语言，简称JS。

作用：网页（动态）交互。

1. HTML嵌入JS代码的三种方式：

一、事件句柄嵌入：（类似于css的内联定义方式）

什么是事件驱动型语言？

在JS中有很多事件，例如click点击，并且任何一个事件都有事件句柄，click的事件句柄叫做onclick。（即在事件前加上“on”），这种语言叫做事件驱动型语言。
什么是事件句柄？

以HTML标签的属性存在，事件不发生，事件句柄中的代码不执行，当发生事件：例如进行click点击时，事件句柄后面的代码才被浏览器自动调用。

.../*这里的onclick就是事件句柄*/
<body>
	<button
		onclick="alert('hello JavaScript');" id="btn" class="anniu">hello JavaScript
    </button>
</body>
...

二、脚本块嵌入：（类似于css的样式块定义方式）

...
/*这里的script内所有内容就是脚本块。脚本块中的程序在页面打开时自顶向下自动执行。(script脚本块放在HTML任何位置都能执行。)*/
<body>
	<script 
		type="text/javascript">alert("脚本块执行");
	</script>
</body>
...

三、引入外部独立的js文件方式：（类似于css中引入外部css文件方式）

推荐使用 ↑ .

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../css/mycss/js.js"></script>
</head>

2. js语言

变量和数据类型

变量有两种：全局变量和局部变量；
1. 全局变量（作用域）：浏览器开启被使用，浏览器关闭被关闭；
2. 局部变量（作用域）：函数调用被使用，函数执行完毕被关闭；
  
  tips：当变量前面没有var声明时，自动变成全局变量；
数据类型是弱类型，有原始类型Undefined、Number、Boolean、Null、；引用类型Object及其子类；和Symbol共7种。
- 1. Undefined：只有undefin一个值。可以手动输入，也可以不赋值，则系统自动识别为undefined类型·。
  2. Number：包括数字、无穷（infinity）、NaN（Not a Number）；
    
    tips : NaN为什么是Number类型？
    
    eg： 10 / 非数字 = ？
    
    此时有除号，应该是数字。但由于分母不为数字且没有正常结果，此时结果为NaN，就把NaN纳入Number类型中。
  3. Boolean：true和false。用在if语句后，和java不同的是，js语言 if 后面括号无论写什么，都会调用boolean（）方法；此括号内就是 if 后面括号的内容；
    
    tips：1，“a”，Infinity属于true；
    
    0、“”、NaN、Undefined、null都属于false；
  4. Null：只有一个值，null；（typeof null == object）；
```
<script type="text/javascript">
    function printA(i,j){
    	alert(i/j);
   	 }
   		printA(10,"非数字");
</script>
```
  5. String：Object的子类；
    
    其中：substr（a,b）和substring（c,d）的区别；
    
    a：startIndex，索引位置
    
    b：lengt，取出字符个数
    
    c：startIndex，索引位置（闭）；
    
    d：endIndex，结束位置（开）；
typeof运算符：
- 在程序运行阶段动态获取变量的数据类型。
  
  typeof运算符的语法格式（共6中，且全部小写）：
  
  “undefined”、“number”、“string”、“object”、“function”、“boolean”；
用法：动态阶段判断是否为某种数据类型·
```
<script type="text/javascript">
    function printA(i){
        alert(typeof i);
    }
    printA(1);
</script>
```

函数（类似于java的方法）

名字相同的几个函数，只执行最下面的那个（覆盖运行）；
当变量多于参数时，未传入的参数默认为undefined（这也是一个值）；当变量少于参数时，多余的参数去除掉；当等于，正常执行。

//需求：对i和j进行相加，下面两种写法均正确，第一种类似于java的写法，第二种也要熟悉。
//1.function 函数名（变量）{函数体}
function sumA(i,j){
            alert(i+j);
    }
    sumA(1,2);//调用函数
//2.函数名=function（变量名）{函数体}
sumB= function(i,j){
            alert(i+j);
    }
    sumB(1,3);//调用函数

...
<head>
    <meta charset="UTF-8">
    <title>js变量</title>
    <script type="text/javascript">
    function sumA(i,j){
            alert(i+j);
    }
    </script>
</head>
<body>
<input type="button" onclick="sumA(1,4)" value="点击计算1+4=？">
</body>
...

上一篇：制作一个趣味的中国象棋游戏：借助HTML、CSS和JS技术

下一篇：使用 HTML、CSS 和 JavaScript 开发的个性化简历制作前端框架技术指南

入门JavaScript(1)：如何在HTML中加入JS、创建js变量、理解数据类型与编写函数

JavaScript(一)：HTML嵌入JS方式、js变量、数据类型和函数

1. HTML嵌入JS代码的三种方式：

一、事件句柄 嵌入：（类似于css的内联定义方式）

二、脚本块嵌入：（类似于css的样式块定义方式）

三、引入外部独立的js文件方式：（类似于css中引入外部css文件方式）

2. js语言

变量和数据类型

函数（类似于java的方法）

入门JavaScript(1)：如何在HTML中加入JS、创建js变量、理解数据类型与编写函数

一、事件句柄嵌入：（类似于css的内联定义方式）