JavaScript浅谈(一）

最新推荐文章于 2024-11-01 14:34:16 发布

王辞夜

最新推荐文章于 2024-11-01 14:34:16 发布

阅读量260

点赞数

文章标签：服务器 javascript html

本文链接：https://blog.csdn.net/m0_55401536/article/details/121594595

版权

一、简介

由于这段时间开始接触一些web应用开发的技能，在接触中就发现这个出现率十分频繁的JS语言。因此，仍旧需要对这门语言进行一些探讨，对其基本语法规则进行总结。

使用的资源仍旧是菜鸟教程菜鸟教程 - 学的不仅是技术，更是梦想！

二、基本概念

JavaScript是网页开发人员必学的三门语言中的一门：

HTML定义了网页的内容；

CSS描述了网页的布局；

JavaScript控制了网页的行为。

JavaScript是脚本语言（轻量级编程语言、可插入HTML页面、由所有现代浏览器执行）

JavaScript可以对事件做出反应、可以改变HTML的内容、可以改变HTML的图像、可以改变HTML样式、可以验证输入

JavaScript的用法：

HTML中的脚本必须位于<script>与</script>之间。脚本可被放置在<head>和<body>部分中。

JavaScript函数和事件

通常，我们需要某个事件发生时执行代码，比如用户点击按钮时。如果我们把JavaScript代码放入函数中，就可以在事件发生时调用该函数。

通常把JavaScript脚本放在<head>中，避免干扰页面内容。也可以放置在<body>中。还可以将脚本保存在外部文件中，外部文件中通常包含被多个网页使用的代码。

<script src="myscript.js"></script>

但是外部脚本不能包含<script>标签。

JavaScript输出

JavaScript没有任何打印或输出的函数

JavaScript显示数据：

JavaScript可以通过不同的方式来输出数据；

使用window.alert()弹出警告窗；

使用document.write()方法将内容写到HTML文档中；

使用innerHTML写入到HTML元素；

使用console.log()写入到浏览器控制台。

操作HTML元素

如需从JavaScript访问某个HTML元素，可以使用document.getElementById(id)方法。

使用id来标识HTML元素，并 innerHTML来获取或插入元素内容。

JavaScript语法

JavaScript是一个程序语言，语法规则定义了语言结构。

脚本，轻量级语言

JavaScript字面量

在编程语言中，一般固定值称为字面量。数字字面量可以是整数或者小数，或者是科学计数。字符串字面量可以使用单引号或双引号。表达式字面量用于计算。数组字面量用于定义一个数组。对象字面量定义一个对象。函数字面量定义一个函数。

JavaScript变量

在编程语言中，变量用于存储数据值。JavaScript使用var来定义变量，使用等号为变量赋值。

var x , length
x=4
length=5

变量可以通过变量名访问，在指令式语言中，变量通常是可变的。字面量是一个恒定的值。（变量是一个名称，字面量是一个值。）

JavaScript操作符

JavaScript使用算术操作符来计算值；使用赋值运算符来给变量赋值；

JavaScript语句

在HTML中，JavaScript语句向浏览器发出指令。

JavaScript关键字

JavaScript关键字用于标识要执行的操作。

和其实编程语言一样，JavaScript保留了一些关键字为自己所用。

var关键字告诉浏览器创建一个变量等。

JavaScript注释

双斜杠后／／的内容被浏览器忽略。

JavaScript数据类型

JavaScript有多种数据类型：数字、字符串、数组、对象等。

数据类型的概念：

在编程语言中，数据类型是一个非常重要的内容；为了可以操作变量，了解数据类型非常重要。

JavaScript函数

JavaScript语句可以写在函数内，函数可以重复引用：

引用一个函数＝调用函数（执行函数内的语句）

JavaScript字符大小写

JavaScript对大小写是敏感的。

JavaScript字符集

JavaScript使用Unicode字符

JavaScript语句

JavaScript语句用于向浏览器发出命令，语句的作用是告诉浏览器该做什么。

分号；用于分隔JavaScript语句；使用分号的另一用处是在一行编写多条语句（也有不用分号结束的语句，即分号结束是可选的）

JavaScript代码

JavaScript代码是JavaScript语句的序列，浏览器按照编写顺序依次执行每条语句。

JavaScript代码块

JavaScript可以分批次地组合起来；代码块以花括号开始，以花括号结束；

代码块的作用是一并地执行语句序列。

JavaScript语句标识符

JavaScript通常以一个语句标识符为开始，并执行该语句。语句标识符是保留关键字不能作为变量使用。

空格

JavaScript会忽略多余的空格，可以向脚本添加空格，来提高可读性。

对代码进行析行

可以在文本字符串中使用反斜杠进行换行。（JavaScript是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程语言来说，会在执行前对所有代码进行编译）

JavaScript注释

使用／／单行注释，使用／＊　＊／进行多行注释。

JavaScript变量

变量必须以字母开头；变量也能以＄和＿开头；变量名称对大小写敏感。

一条语句，多个变量

重新声明JavaScript变量，该变量的值不会丢失。

JavaScript拥有动态类型，这意味着相同的变量可以用做不同的类型。

JavaScript数组

var cars = new Array("Bob","TIm");

JavaScript对象

对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式(name:value)来定义。属性由逗号分隔。空格和折行无关紧要。声明可横跨多行。

Undefined和Null

Undefined这个值表示变量不含有值。

可以通过讲变量设置为null来清空变量。

声明变量类型

使用关键词new来声明其类型。

var carname = new String;

var x = new Number;

var y = new Boolean;

var cars = new Array;

var person = new Object;

JavaScript变量均为对象，当声明变量时，就建立了一个对象。

JavaScript对象

JavaScript对象是拥有属性和方法的数据。

对象也是一个变量，但对象可以包含多个值（变量），每个值以name:value对呈现。

JavaScript对象是变量的容器。

可以使用字符来定义和创建JavaScript对象：

var person = { firstname:"John", lastname:"Doe", age:50, eyeColor:"blue"};

var person = {

firstname: "John",

lastname: "Doe",

age: 50,

eyeColor: "blue"

};

对象属性：键值对在JavaScript中称为对象的属性。

访问对象属性

可以通过两种方法访问对象属性。

person.lastName

person["lastName"]

对象方法

对象方法定义了一个函数，并作为对象的属性存储。对象方法通过添加（）调用（作为一个函数）

该实例访问了person对象的fullName（）方法

name = person.fullName();

JavaScript对象是属性和方法的容器。可以使用下列方法语法创建方法：

methodName : function() {

//代码

}

如果访问方法不加括号，它将会返回函数定义。

JavaScript函数

函数是事件驱动的或者当它被执行调用时执行的可被重复使用的代码块。

JavaScript函数语法

函数就是包裹在花括号中的代码块

调用带参数的函数

变量和参数必须以一致的顺序出现，第一个变量就是第一个被传递的参数的值，以此类推。

带有返回值的函数

通过使用return语句可以实现，在使用return语句时，函数会停止执行，并返回特定的值。即函数的调用将被返回值取代。

局部JavaScript变量

在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问它。（该变量的作用是局部的）。可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完成，本地变量就会被删除。

全局JavaScript变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript变量的生存期

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后删除。

全局变量会在页面被关闭之后删除。

向未声明的JavaScript变量分配值

如果把值赋给未声明的变量，该变量将被自动作为window的一个属性。

JavaScript作用域

作用域是可访问变量的集合

在JavaScript中，对象和函数同样是变量，作用域为可访问变量、对象、函数的集合，作用域在函数内修改。

JavaScript局部作用域

变量在函数内声明，变量为局部作用域。局部变量只能在函数内部访问。

JavaScript全局作用域

全局变量有全局作用域，可以在整个网页中使用。

JavaScript事件

HTML事件是发生在HTML元素上的事情；

当在HTML页面中使用JavaScript时，JavaScript可以触发这些事件。

HTML事件

HTML事件可以是浏览器行为，也可以是用户行为，以下是HTML事件的实例：

HTML页面完成加载；

HTML input字段改变时

HTML 按钮被点击

通常，当事件发生时，可以做些事情。在事件触发时，可以执行一些JavaScript代码。

JavaScript通常是几行代码，比较常见的是通过事件属性来调用。

常见的HTML事件

onchange HTML元素改变

onclick 用户点击HTML元素

onmouseover 用户在一个HTML元素上移动鼠标

onmouseout 用户从一个HTML元素上移开鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面的加载

JavaScript字符串

字符串用于存储和处理文本。

可以使用索引位置来访问字符串中的字符。索引从０开始。

使用内置属性length来计算字符串的长度。

特殊字符

在JavaScript中，字符串写在单引号或双引号中。用反斜杠作为转义字符将特殊字符转化为写入字符串的字符。

字符串可以是对象

但是不建议创建String对象，因它会拖慢执行速度，并可能产生副作用。

（＝＝＝为绝对相等，数值和类型都相等）

JavaScript　if．．．else语句

条件语句基于不同的条件执行不同的动作。

条件语句，通过为不同的决定执行不同的动作。

if语句＝只有当指定条件为true时，使用该语句来执行代码；

if．．．else语句－当条件为true时执行代码，当条件为false时执行其他代码　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

JavaScript　switch语句

使用switch与case来使用常量表达式来表示不同情况下的取值。使用default关键字来确定默认消息，规定匹配不存在时的事情。

JavaScript　for循环

循环可以将代码块执行指定的次数

不同类型的循环

for循环

for／in循环遍历对象的属性

while当指定条件为true时执行循环

do/while同样为指定条件为true时循环指定的代码块

break和continue语句

break语句用于跳出循环

continue用于跳过循环中的一个迭代

还可以用于操作JavaScript标签

labelname :

statements

typeof操作符　用来检测变量的数据类型

null操作符　表示什么都没有

undefined　是一个没有设置值的变量

类型转换使用函数如Number（）

JavaScript正则表达式

正则表达式使用单个字符串来描述、匹配一系列符合某个语法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换

格式为：

／正则表达式主体／修饰符（可选）

正则表达式修饰符

i 　执行对大小写不敏感的匹配

g　执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

m　执行多行匹配

正则表达式模式

方括号用于查找某个范围内的字符

［ａｂｃ］　　查找方括号之间的任何字符

［０－９］　　查找从０至９的数字

（ｘ｜ｙ）　　查找以｜分隔的选项

元字符是拥有特殊意义的字符

＼ｄ　　查找数字

＼ｓ　　查找空白字符

＼ｂ匹配单词边界

＼ｕｘｘｘ查找以十六进制数ｘｘｘｘ规定的Ｕｎｉｃｏｄｅ字符

量词

ｎ＋　　匹配任何一个至少一个ｎ的字符串

ｎ＊　　匹配任何包含零个或多个ｎ的字符串

ｎ？　　匹配任何包含零个或一个ｎ的字符串

RegExp对象

在正则表达式中，RegExp对象是一个预定义了属性和方法的正则表达式对象

JavaScript错误——THrow、try和catch

try语句测试代码块的错误

catch语句处理错误

throw语句创建自定义错误

finally语句在try和catch语句之后，无论是否有触发异常，该语句都会执行

JavaScript调试

浏览器内置了调试工具

console.log()方法可以在调试窗口上打印JavaScript的值。

设置断点

debugger关键字

debugger关键字用来停止执行JavaScript，并调用调试函数。

这个关键字与在工具中设置断点的效果是一样的。

如果没有调试可用，debugger将无法工作。

主要浏览器的调试工具

通常是在浏览器中按F１２，然后在控制台中选择console

JavaScript声明提升

JavaScript中，函数变量的声明都将被提升到函数的最顶部，即变量可以先使用后声明。

但是JavaScript的初始化不会提升，即只有变量声明会被提升。

因此，为了避免不必要的麻烦，建议在函数头部进行变量声明。

JavaScript使用严格模式

声明＂Use Strict"即可进入严格模式。

JavaScript表单

JavaScript表单验证

HTML表单验证可以通过JavaScript来完成

以下代码用来判断表单字段值是否存在：

function validateForm() {

var x = document.forms["myFoem"]["name"].value;

if (x == null || x== ""){

alert("Please input your name");

return false;

}

}

HTML表单自动验证