JavaScript（JS）基础知识

约定不等于承诺〃 2022-12-25 00:59 179阅读 0赞

# 1、JavaScript概述 #

## 1.1、什么是JavaScript (JS) ##

JavaScript是一种属于网络的脚步语言，已经被广泛用于Web应用开发，常用来为网页添加各种各样的动态功能。为用户提供更流畅的浏览效果。通常JavaScript脚步是通过嵌入在HTML中来实现自身的功能。

JavaScript是写给浏览器的一门脚步语言，目前所有的浏览器都支持JavaScript。

HTML称为超文本标记语言

CSS样式语言，专门用来负责HTML页面外观样式的。

JavaScript属于一门编程语言。

JavaScript也是一门面向对象的编程语言

livescript简介，百度百科

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZsdWNreV9sb25n_size_16_color_FFFFFF_t_70_pic_center]  
不止JavaScript  
   ●JScript微软支持 IE  
   ●VBScript微软

JavaScript的组成部分  
  ●ECMAScript，它是JavaScript的标准  
    ■ECMAScript欧洲计算机制造联合会  
    ■指定脚步语言的规范，这个规范称为ECMAScript  
    ■规范：语法、变量、关键字、对象。。。。。。

## 1.2、JavaScript的日常用途 ##

1.  嵌入动态文本内容在HTML页面
2.  对浏览器事件做出响应
3.  读写HTML元素
4.  在数据被提交到服务器之前验证数据
5.  检测访客浏览器的信息
6.  控制cookie，包括创建和修改等

## 1.3、JavaScript的引入 ##

在HTML文件中引入JavaScript有两种方式：  
   ●一种是在HTML文档之间嵌入JavaScript脚本，称为内嵌式  
   ●另一种是在链接外部JavaScript脚步文件，称为外联式

内嵌式，在HTML文档任意位置中，通过标签引入，如下：

外联样式，在HTML文档中通过标签引入外部.js的文件，如下：

script标签必须提供一个结束标签，否则引入的js无效

如果在script标签使用src引入了一个文件，那么当前script标签内的代码全部作废，不执行

# 2、JavaScript基础 #

线上学习网站：  
https://www.w3school.com.cn

JavaScript语法规则：  
   ●JS严格区分大小写  
   ●语句需要使用分号结束  
   ●JS中的命名规则，按照Java标识符来  
   ●JS中的关键字不能用来作为标识符的名字

## 2.1、变量 ##

JS是弱类型语言，Java是强制类型语言

弱类型语言：并不是没有数据类型，而是定义变量时不需要明确具体的数据类型。

JS变量定义，关键字 var ，语法格式：var 变量名=值;

//定义变量
    var num=100;
    //字符串可以使用单引号也可以使用双引号
    var name="zhangsan";
    var address='beijing';
    var score=69.5;
    var flag=true;
    //使用alert方法，弹出一个对话框
    alert(num);
    alert(name);
    alert(address);
    alert(score);
    alert(flag);

## 2.2、JS的数据类型 ##

数字类型 number：表示任意数字

布尔类型 boolean：有两个值true和false

字符串类型string：字符串由双引号或单引号声明的，javaScript没有字符类型

引用类型object：表示JS中的引用类型  
   ●空值null，只有一个专用值null，表示空，属于object类型  
   ●值undefined实际上是从值null派生出来的，因此ECMAScript把它们定义为相等的。

未初始化undefied：当声明的变量未初始化时，该变量的默认值是undefied。

**Java中通过instanceof关键字，来验证对象是否属于某个类或接口**

**在JS中使用typeof(变量)来显示变量的真实类型**

//定义变量
    var num=100;
    //字符串可以使用单引号也可以使用双引号
    var name="zhangsan";
    var address='beijing';
    var score=69.5;
    var flag=true;
    //使用alert方法，弹出一个对话框
    alert(typeof(num));//number
    alert(typeof(name));//string
    alert(typeof(address));//string
    alert(typeof(score));//number
    alert(typeof(flag));//boolean
    
    var n=null;
    alert(typeof(n));
    var u;
    alert(typeof(u));
    var date=newDate();
    alert(typeof(date));
    //值undefied实际上是从Null派生的，它俩相等
    alert(undefined==null);

## 2.3、 JS的三种输出方式 ##

window.alert("")，弹窗效果，window可以省略，弹出比较突然，用户体验不好，都是用来进行代码测试用

console系列，会在控制台(一般使用F12打开)输出内容，开发时经常使用

document.write()，直接在页面上输出内容

/**
    *document指的是当前HTML文档
    *write()就是把内容输出到页面
    */
    document.write('<h3>这是要在页面上显示的内容</h3>');

## 2.4、运算符 ##

**算术运算符 | 赋值运算符 | 比较运算符 | 逻辑运算符**

算术运算符：+，-，\*，/，%，++，–

赋值运算符：=、+=、-=、\*=，/=，%=

比较运算符：= =、!=、<、>、<=、>=、===

逻辑运算符：&&、||、!

/**
    *==与===区别
    *==运算符：只比较值是否相等，值相等就为true
    *===运算符：比较值与数据类型是否相等，都相等就为true
    */
    varnum='10';
    console.log(num+"2")//102
    console.log(num-2);//8
    console.log(num*2)//20
    if(10==num){
        
    	console.log("相等");
    }else{
        
    	console.log("不相等");
    }
    var num2=10;
    console.log(num==num2);
    console.log(num===num2);

## 2.5、Boolean类型运算 ##

JS中的布尔类型运算与Java不同：  
   ●数字类型：非0就是true  
   ●字符串类型：非""就是true，长度>0就是true  
   ●0，null，undefined等理解为false

//布尔类型运算
    var t1=0;
    if(t1){
        
    	console.log("真的");
    }else{
        
    	console.log("假的");
    }
    var t2="zhangsan";
    if(t2){
        
    	console.log("真的true");
    }else{
        
    	console.log("假的false");
    }

## 2.6、JS的流程控制语句 ##

JS的流程控制语句与java一样。

JS中也存在if，if-else ，switch，for，while，do/while等逻辑语句，与java使用方式一致。

## 2.7、函数 ##

JS的函数：就是方法，是JS非常重要的组成部分，JS最常用的函数的定义方式有两种：

### 普通函数 ###

//定义函数
    //参数列表中定义参数时，不要写var，数据类型都是var来表示；而且函数不管有没有返回值，都不需要定义返回值类型
    function函数名(参数列表){
        
    	//方法体代码
    	//如果有返回值就写return，不写就没有返回值
    }

### 匿名函数 ###

//定义匿名函数也就是没有名字的函数
    function(参数列表){
        
    	//js代码
    }

匿名函数没有办法直接调用，一般情况下结合事件使用。

//匿名函数
    var fn=function(a,b){
        
    	console.log(a+b);
    }
    //通过变量名调用函数
    fn(11,22);

## 2.8、事件 ##

事件概述：  
JavaScript使我们有能力创建动态页面，事件可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比如说，我们可以在用户点击某个按钮时产生一个click点击事件来触发某个函数。事件在HTML页面中定义的

事件三要素：  
事件源：在页面中，用户可以操作的元素，称为事件源，例如：按钮、文本框、浏览器窗口

事件：用户怎么操作事件源，例如：鼠标（点击、双击、悬浮、离开），键盘操作（按下，弹起）

监听器：监听事件，并且在事件发生时，调用相应的方法来处理事件。  
   ●为事件源安装监听器，鼠标监听器，键盘监听器  
   ●只要有操作，就会被监听器捕获到，调用相应的处理方式  
   ●处理方式：函数

事件通常和函数配合使用，这样就可以通过发生事件来驱动函数执行。

常用事件:

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>onload</strong></td> 
   <td>某个页面被完成加载</td> 
  </tr> 
  <tr> 
   <td><strong>onsubmit</strong></td> 
   <td>当表单提交时触发该事件-----事件源是form表单</td> 
  </tr> 
  <tr> 
   <td><strong>onclick</strong></td> 
   <td>鼠标点击某个对象</td> 
  </tr> 
  <tr> 
   <td>ondbclick</td> 
   <td>鼠标双击某个对象</td> 
  </tr> 
  <tr> 
   <td><strong>onblur</strong></td> 
   <td>失去焦点</td> 
  </tr> 
  <tr> 
   <td><strong>onfocus</strong></td> 
   <td>获得焦点</td> 
  </tr> 
  <tr> 
   <td><strong>onchange</strong></td> 
   <td>用户改变内容</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>某个键盘的按键被按下</td> 
  </tr> 
  <tr> 
   <td>onkeypress</td> 
   <td>某个键盘的按键按下或按住</td> 
  </tr> 
  <tr> 
   <td>onkeyup</td> 
   <td>某个键盘的按键被松开</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>鼠标的按键被按下</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>鼠标的按键被松开</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标被移动到某个元素之上</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标移出某个元素</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>鼠标移动</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>JS事件</title>
    	<script>
    		function loadMethod(){
         
    			alert('加载页面');
    		}
    		function clickMethod(){
         
    			alert("你还真敢点我");
    		}
    		function changeMethod(){
         
    			alert("你更改了内容");
    		}
    		function focusMethod(){
         
    			alert("你获取了焦点");
    		}
    	</script>
    </head>
    <body onload="loadMethod()">
    	
    	<input type="button" value="点我试试" onclick="clickMethod();">
    	<input type="text" onchange="changeMethod()" onfocus="focusMethod()">
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZsdWNreV9sb25n_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b9493daf78504b53b21ff443d4d4eeaa.png