JavaScript基础

╰+攻爆jí腚メ 2024-04-29 11:10 2阅读 0赞

## 学习目标： ##

`1.掌握JavaScript的组成 2.掌握JavaScript的基本语法 3.会使用工具进行代码调试 4.会定义和使用函数`

--------------------

## 学习内容： ##

## 1.什么是JavaScript ##

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

向HTML页面中添加交互行为  
脚本语言，语法和Java类似  
解释性语言，边执行边解释

**JavaScript的组成**

![0a3acefe40184ce096ff18965f886eeb.png][]

## 2.JavaScript的基本结构 ##

语法

示例

## 3.网页中引用JavaScript的方式 ##

3.1直接在HTML标签中

3.2使用script标签

3.3外部JS文件

## 4.核心语法—变量 ##

先声明变量再赋值

var  width;var －  用于声明变量的关键字
    width = 5;width － 变量名

同时声明和赋值变量

var catName= "皮皮";
    var x, y, z = 10;

不声明直接赋值，不推荐使用

width = 5;

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用

## 5.核心语法—数据类型 ##

数据类型

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>var width;<br> uundefined&nbsp; &nbsp; 变量width没有初始值，将被赋予值undefined</td> 
  </tr> 
  <tr> 
   <td>null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 表示一个空值，与值相等</td> 
  </tr> 
  <tr> 
   <td>number&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var iNum=23; &nbsp; //整数<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var iNum=23.0; &nbsp; //浮点数</td> 
  </tr> 
  <tr> 
   <td>boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;true和false</td> 
  </tr> 
  <tr> 
   <td>&nbsp;string &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 一组被引号（单引号或双引号）括起来的文本<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var string1="This is a string";</td> 
  </tr> 
 </tbody> 
</table>

## 6.核心语法— typeof运算符 ##

**typeof运算符的作用：返回一个用来表示表达式的数据类型的字符串**  
typeof运算符的返回值如下  
uundefined：变量被声明后，但未被赋值  
ustring：用单引号或双引号来声明的字符串  
uboolean：true或false  
unumber：整数或浮点数  
uobject：javascript中的对象、数组和null

## 7.核心语法—String对象 ##

### 7.1基础 ###

String 对象用于处理文本（字符串）

语法

var str1=“this is a String Object”;  //声明方式1
    var str2=new String(“熟悉的配方”);     //声明方式2

String 对象的常用属性

![1b860d20ec88495d870497c97da29e05.png][]

### 7.2String对象的常用方法 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>方法名称</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>CharAt(index)</td> 
   <td>返回在指定位置的字符</td> 
  </tr> 
  <tr> 
   <td>indexOf(str,index)</td> 
   <td>查找某个指定的字符串在字符串中首次出现的位置</td> 
  </tr> 
  <tr> 
   <td>substring(index1,index2)</td> 
   <td>返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index对应的字符</td> 
  </tr> 
  <tr> 
   <td>split(str)</td> 
   <td>将字符串分割为字符串数组</td> 
  </tr> 
 </tbody> 
</table>

## 8.核心语法—数组 ##

创建数组

var 数组名称 = new Array (size);

为数组元素赋值

var fruit= new Array("apple", "orange", " peach","banana");

var fruit = new Array(4);
    fruit [0] = " apple ";
    fruit [1] = " orange ";
    fruit [2] = " peach ";
    fruit [3] = " banana ";

数组的常用属性和方法

![b5ea4992840c41359f080f0ef9b11cec.png][]

## 9.核心语法—运算符号 ##

![304fe945d6fa4568804a112bacf6d192.png][]

==和Java中的equals是一样的

===就相当于Java中的==

## 10.核心语法—跳转语句 ##

核心语法—跳转语句  
break  
continue

## 11.核心语法—注释 ##

单行注释以 // 开始，以行末结束

多行注释以 /\* 开始，以 \*/ 结束，符号 /\*…… \*/ 指  
示中间的语句是该程序中的注释

## 12.核心语法—常用的输入/输出 ##

alert()

alert("提示信息");

prompt()

prompt("提示信息", "输入框的默认信息");
    prompt("请输入你喜欢的颜色","红色");
    prompt("请输入你喜欢的颜色","");

## 13.什么是函数 ##

函数的含义：类似于Java中的方法，是完成特定任务  
的代码语句块  
使用更简单：不用定义属于某个类，直接使用  
函数分类：系统函数和自定义函数

### 13.1常用系统函数 ###

parseInt (“字符串”)：将字符串转换为整型数字  
如: parseInt ("86")将字符串“86“转换为整型值86  
parseFloat(“字符串”)：将字符串转换为浮点型数字  
如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45  
isNaN()：用于检查其参数是否是非数字

### 13.2自定义函数 ###

定义函数

function 函数名(参数1,参数2,参数3,…){
         //JavaScript语句有参函数
         [return 返回值]
    }

调用函数  
u函数调用一般和表单元素的事件一起使用，调用格式

事件名＝ "函数名( )" ;

示例：调用无参函数，输出5次“欢迎学习JavaScript”

function study( ){
            for(var i=0;i<5;i++){
                document.write("<h4>欢迎学习JavaScript</h4>");
            }
        }

**有参函数**

根据输入的次数，显示“欢迎学习JavaScript”

function study( count){
            for(var i=0;i<count;i++){
                document.write("<h4>欢迎学习JavaScript</h4>");
            }
        }

## 14.事件 ##

HTML 事件是发生在 HTML 元素上的事情。  
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>一个页面或一幅图像完成加载</td> 
  </tr> 
  <tr> 
   <td>onlick</td> 
   <td>鼠标单击某个对象</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标指导移到某元素上</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>某个键盘按键被按下</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>域的内容被改变</td> 
  </tr> 
 </tbody> 
</table>

[0a3acefe40184ce096ff18965f886eeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/047c7503a3864aaa9c5dc96e399c431a.png
[1b860d20ec88495d870497c97da29e05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/6c1b7453689641308d3e8147d71a2c1f.png
[b5ea4992840c41359f080f0ef9b11cec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/05b27e5ad7c047e680a5c0c9fb30d3a2.png
[304fe945d6fa4568804a112bacf6d192.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/0ec00413ab85499da44b70944db96c0d.png