JavaScript基本语法、函数

￡神魔★判官ぃ 2024-04-03 07:04 95阅读 0赞

**目录**

一、JavaScript简介

1、JavaScript特点

2、JavaScript的组成

3、引用JavaScript的方式

二、JavaScript核心语法

1、变量

2、数据类型

3、typeof运算符

4、String对象

5、数组

6、运算符号

7、逻辑控制语句

8、跳转语句

9、注释

10、常用的输入/输出

11、函数

12、事件

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

### 一、JavaScript简介 ###

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)、

脚本语言∶不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行

现在也可以基于Node.js技术进行服务器端编程

**浏览器执行JS简介**

浏览器分成两部分︰渲染引擎和JS引擎

渲染引擎︰用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit

J引擎︰也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览

器的V8。

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行

代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为

脚本语言，会逐行解释执行。

#### **1、JavaScript****特点** ####

向HTML页面中添加交互行为

脚本语言，语法和Java类似

解释性语言，边执行边解释

#### **2、JavaScript****的组成** ####

**1、ECMAScript**

ECMAScript是由ECMA国际（原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。

ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

**2、DOM———文档对象模型**

文档对象模型( Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

**3、BOM——浏览器对象模型**

BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

**JavaScript****的执行原理**

1、浏览器发送请求（包含JavaScript的请求页面）到服务器

2、浏览器解析HTML标签和JavaScript

3、服务器相应浏览器发送的请求（从服务器端下载含JavaScript的页面）

#### **3、引用****JavaScript****的方式** ####

**1、行内样式**

语法：

注意：

1、可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如:onclick·注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号

2、可读性差，在html中编写JS大量代码时，不方便阅读;

3、引号易错，引号多层嵌套匹配时，非常容易弄混;

4、特殊情况下使用

**2、内嵌式：使用script标签**

语法：

可以将行JS代码写到<script>标签中；内嵌JS是学习时常用的方式

**3、外部js文件**

语法：

1、利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用

2、引用外部JS文件的script标签中间不可以写代码

3、适合于S代码量比较大的情况

### **二、JavaScript****核心语法** ###

#### **1、变量** ####

先声明变量再赋值

var  width;
    width = 5;

同时声明和赋值变量

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

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

width = 5;

#### 2、数据类型 ####

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

#### 3、**typeof****运算符** ####

typeof运算符的作用：返回一个用来表示表达式的数据类型的字符串

typeof运算符的返回值如下

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组和null

#### 4、**String****对象** ####

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

语法：

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

**String** **对象的常用属性**

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>属性值</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>constructor</td> 
 <td>对创建i该对象的函数的引用</td> 
 </tr> 
 <tr> 
 <td>length</td> 
 <td>字符串的长度</td> 
 </tr> 
 <tr> 
 <td>prototype</td> 
 <td>允许您向对象添加属性和方法</td> 
 </tr> 
 </tbody> 
</table>

**String****对象的常用方法**

<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对应的字符，不包括索引index2对应的字符 </td> 
 </tr> 
 <tr> 
 <td> split(str) </td> 
 <td> 将字符串分割为字符串数组 </td> 
 </tr> 
 </tbody> 
</table>

#### 5、**数组** ####

创建数组

语法：

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

为数组元素赋值

语法：

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

**数组的常用属性和方法**

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>类别</td> 
 <td>名称</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td> 属性 </td> 
 <td> length </td> 
 <td> 设置或返回数组中元素的数目 </td> 
 </tr> 
 <tr> 
 <td> 方法 </td> 
 <td> join( ) </td> 
 <td> 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔 </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td> sort() </td> 
 <td> 对数组排序 </td> 
 </tr> 
 <tr> 
 <td></td> 
 <td> push() </td> 
 <td> 向数组末尾添加一个或更多 元素，并返回新的长度 </td> 
 </tr> 
 </tbody> 
</table>

#### 6、运算符号 ####

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>类型</td> 
 <td>运算符</td> 
 </tr> 
 <tr> 
 <td> 算术运算符 </td> 
 <td> +&nbsp;&nbsp;&nbsp; -&nbsp;&nbsp; *&nbsp;&nbsp;&nbsp; /&nbsp;&nbsp;&nbsp; %&nbsp;&nbsp;&nbsp; ++&nbsp;&nbsp; - - </td> 
 </tr> 
 <tr> 
 <td> 赋值运算符 </td> 
 <td> =&nbsp;&nbsp;&nbsp; +=&nbsp;&nbsp; -= </td> 
 </tr> 
 <tr> 
 <td> 比较运算符 </td> 
 <td> &gt;&nbsp;&nbsp;&nbsp; &lt;&nbsp;&nbsp;&nbsp;&nbsp; &gt;=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;=&nbsp;&nbsp;&nbsp;&nbsp; ==&nbsp;&nbsp;&nbsp; !=&nbsp;&nbsp; ===&nbsp;&nbsp; !== </td> 
 </tr> 
 <tr> 
 <td> 逻辑运算符 </td> 
 <td> &amp;&amp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;||&nbsp;&nbsp;&nbsp;&nbsp; ! </td> 
 </tr> 
 </tbody> 
</table>

#### 7、**逻辑控制语句** ####

if条件语句

if（条件）{
        js代码;
    }else{
        js代码;  
    }

switch语句

switch（表达式）{
        case 常量1：
            js语句
            brcak；
        case 常量2：
            js语句
            brcak；
        default：
            js语句；
    }

for、while循环

for（初始化;条件;增量）{
        js代码;
    }
    
    while（）{
        js代码;
    }

for-in语句

var fruit = ["apple","orange","peach","banana"];
 for(var i in fruit){
 document.write(fruit[i] + " ")
 }

#### **8、跳转语句** ####

break语法：

continue语法：

#### **9、注释** ####

单行注释：以 // 开始

alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框

多行注释：/\* 开始，以 \*/ 结束

/*
 使用for循环运行“document.write("<h3>Hello World</h3>");”5次
 使用document.write在页面上输出“Hello World” 
 */

#### **10、常用的输入****/****输出** ####

alert()

alert("提示信息");

prompt()

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

**语法约定**

1、代码区分大小写

2、变量、对象和函数的名称

3、分号

#### **11、函数** ####

类似于Java中的方法，是完成特定任务的代码语句块

**使用更简单：不用定义属于某个类，直接使用**

函数分类：系统函数和自定义函数

**常用系统函数**

parseInt (“字符串”)：将字符串转换为整型数字

如: parseInt ("86")将字符串“86“转换为整型值86

parseFloat(“字符串”)：将字符串转换为浮点型数字

如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45

isNaN()：用于检查其参数是否是非数字

**自定义函数**

语法：

function 函数名(参数1.参数2.....){
         //JavaScript语句
         [return 返回值](可有可无)
    }

调用函数

语法：

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

#### **12、事件** ####

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>