js 的基本使用

本是古典何须时尚 2022-04-23 22:40 87阅读 0赞

### javaScript 的概述 ###

> javaScript，通常缩写为JS，是一种高级的，解释型语言的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持

#### javaScript 的特点 ####

<table> 
 <thead> 
  <tr> 
   <th>特点</th> 
   <th>java</th> 
   <th>javaScript</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>面向对象</td> 
   <td>完全面向对象语言：继承多态封装</td> 
   <td>基于对象的语言 不完全符合面向对象的思想</td> 
  </tr> 
  <tr> 
   <td>运行方式</td> 
   <td>编译型 运行过程需要生成字节码文件</td> 
   <td>解释性语言,不会生成中间文件，解释一定的行数在执行</td> 
  </tr> 
  <tr> 
   <td>跨平台</td> 
   <td>安装jvm就可以运行在不同平台</td> 
   <td>只要有浏览器就可以运行</td> 
  </tr> 
  <tr> 
   <td>大小写</td> 
   <td>区分大小写</td> 
   <td>不区分大小写</td> 
  </tr> 
  <tr> 
   <td>数据类型</td> 
   <td>强类型语言 不同的数据类型有严格区分</td> 
   <td>弱类型语言，不同类型数据可以直接赋值给同一个变量</td> 
  </tr> 
 </tbody> 
</table>

#### JavaScript的语法组成 ####

<table> 
 <thead> 
  <tr> 
   <th>组成部分</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ECMA Script</td> 
   <td>构成js核心羽凡基础</td> 
  </tr> 
  <tr> 
   <td>BOM</td> 
   <td>Browser Object MOdel 浏览器对象，用来操作浏览器的对象</td> 
  </tr> 
  <tr> 
   <td>DOM</td> 
   <td>Document Object Model 文档对象模型 用来操作网页中的元素</td> 
  </tr> 
 </tbody> 
</table>

### JavaScript 的基础语法 ###

#### JavaScript 的编写方式 ####

1.  写在HTML中 在Script 标签体中编写js代码
2.  以js文件的方式单独存在HTML的外部，使用的时候scipt标签的src 属性导入进来就行
    
     *  `<script>`标签的说明
        
        1.`<script>` 中的src属性和type 属性"src 是要导入的外部js文件 一旦导入其他的js文件 此标签体重的js代码就失去效了" type 指定脚本的类型 固定值`text/javascript`
        
        1.  `<script>`的个数 在一个HTML 网页中可以出现多个script 标签 每个标签中的脚本都会执行
        2.  可以出现在网页中的任意位置

#### JavaScript 的注释方式 ####

<table> 
 <thead> 
  <tr> 
   <th>语言</th> 
   <th>注释方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Html</td> 
   <td><code>&lt;!--注释--&gt;</code></td> 
  </tr> 
  <tr> 
   <td>css</td> 
   <td><code>/**/</code></td> 
  </tr> 
  <tr> 
   <td>JavaScript</td> 
   <td><code>// 单行 /*多行*/</code></td> 
  </tr> 
 </tbody> 
</table>

#### 变量 ####

*  变量的定义 var 变量名=初始化值
 *  js 的弱类型 同一变量可以接受不同的数据类型
 *  js中只有字符串类型 没有字符类型 字符串既可以使用双引号也可以使用单引号
 *  var 关键字不是必须的 可以省略
 *  变量名可以重复定义

#### 数据类型 ####

\#\#\#\#\#五种原始数据类型

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Number</td> 
   <td>数值型</td> 
  </tr> 
  <tr> 
   <td>Boolean</td> 
   <td>布尔型 true/false</td> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>字符串类型</td> 
  </tr> 
  <tr> 
   <td>null</td> 
   <td>只要一个值null</td> 
  </tr> 
  <tr> 
   <td>Undefined</td> 
   <td>变量未初始化的类型只要undefined</td> 
  </tr> 
 </tbody> 
</table>

##### typeo 操作符 #####

> js 中含有引用类型和基本数据类型

1.  作用：判断指定的变量数据类型
2.  写法：typeof(变量名)或者 typeof 变量名
3.  null与undefind 的区别
    
     *  null 是一个object 类型 可以占用引用类型的占位符
     *  undefinded 未初始化的类型 不知道什么类型

##### 常用运算符 #####

##### 赋值运算符 #####

##### 比较运算符 #####

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>==</code></td> 
   <td>等于</td> 
  </tr> 
  <tr> 
   <td><code>====</code></td> 
   <td>恒等于 值和类型均相等</td> 
  </tr> 
  <tr> 
   <td><code>!=</code></td> 
   <td>不等于</td> 
  </tr> 
  <tr> 
   <td><code>!===</code></td> 
   <td>不恒等于 值和类型均不相等</td> 
  </tr> 
  <tr> 
   <td><code>&gt;</code></td> 
   <td>大于</td> 
  </tr> 
  <tr> 
   <td><code>&lt;</code></td> 
   <td>小于</td> 
  </tr> 
  <tr> 
   <td><code>&gt;=</code></td> 
   <td>大于等于</td> 
  </tr> 
  <tr> 
   <td><code>&lt;=</code></td> 
   <td>小于等于</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

##### 流程控制语句 #####

高级语言中的三种基本结构 顺序分支循环

*  if判断
    
        if(条件){ 代码块}
        if(条件表达式){ }else{ 代码块}
        if(条件表达式){ }else{ 代码块}if(条件表达式){ }else{ 代码块}
 *  for循环
    
        for(var i=0;i<10;i+=){ 需要执行的代码}
 *  where 循环
    
        where(条件表达式){  需要执行的代码}
 *  do-where 语句
    
        do{需要执行的代码} where(条件表达式)
 *  break 和continue
    
     *  break 跳出整个循环
     *  continue 跳出本次循环

##### 函数的基本使用 #####

*  函数的格式
    
        function 函数名(参数列表){ 
          函数体
          return 返回值
        }
 *  注意事项
    
     *  形参的类型：在函数定义的时候不用指定类型 因为是可变的类型
     *  函数的返回值 ：如果一个函数需要返回值 直接使用return 返回 如果没用返回值 不写 return
     *  所有函数的内部 都有一个类数组的对象 叫arguments 用来接收提交的所以参数
     *  在js 中没有函数的重载 同名的函数会覆盖原来的的函数 调用的时候只会返回最后一个函数而且和形参没有关系
 *  匿名函数

var 变量名 =function(参数列表){ 
      函数体
    }
    // 函数调用
    变量名()；

#### 变量的作用域 ####

*  局部JavaScript 变量 :在javaScript 内部的变量 所以只能在函数内部访问该变量是局部的 只能在函数运行完毕后本地变量才会别删除
 *  全局JavaScript 变量：不是在函数内声明的局部变量 ,网页中所有的脚本都可以调用的
 *  未声明的JavaScript变量：如果你把值赋值给未声明的变量 该变量将被自动设置为全局变量

### JavaScript 的事件 ###

#### 事件的两种方式 ####

*  使用命名函数
    
        <input type="button"value="点我" onclick=“函数()"/>
 *  使用匿名函数

document.getElementByld(“标签id”).function()\{\}

#### 常见事件
    
    | 属性        | 描述             |
    | ----------- | ---------------- |
    | onblur      | 元素市区焦点     |
    | onfocus     | 元素获取焦点     |
    | onchange    | 用户改变域的内容 |
    | onclick     | 点击事件         |
    | ondbclick   | 双击事件         |
    | onmouseout  | 鼠标从某元素移开 |
    | onmouseover | 鼠标被移到某元素 |
    | onsubmit    | 提交按钮点击     |