JavaScript

RlTED

于 2024-07-10 15:17:30 发布

阅读量910

点赞数 16

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/nwbfygsjdr/article/details/140086744

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

java和JavaScript的关系是蹭热度和被蹭热度的关系，本身没有血缘关系

JavaScript学什么？

直接输出一个输出流。如：document.write("<h1>这是一个标题</h1>");
对事件的反应如：button事件。
改变html中的内容。如：x=document.getElementById("demo"); //查找元素 x.innerHTML="Hello JavaScript";//改变内容
改变HTML的图像
改变html的属性（css）如：x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式
验证输入

JavaScript的写入格式：

代码写入<script></script>中，

代码以三种格式插入

写在<body></body>中
写在<head></head>中
写在文件中，在<head>中插入文件名应用。

输出：

window.alert()：

弹出一个警告框。

操纵html：

初始中，我们对id=dome的标签设置了"我的第一个段落"。后面我们分为两步，一步是getElementById获取id，inner HTML去修改id中的内容

写入文档：

docount.write(),在中间插入一个文档，输出。

ps：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

写到控制台：

console.log() 方法：将需要输出的数据输入框内，会出现在控制台内。

可按f12进行查看

JavaScript的注释：

//单行注释：仅对编程器中同属一行的//后面的内容进行注释，

document.getElementById("aaa").inner=“被修改了” //被修改了

上面例子中//后面的部分编译过程中不会被读取，只会读取前面的代码。

/* */多行注释：在/*中的内容计算机编译时都不会读取

JavaScript的变量：

第一：在声明时确定需要声明的是什么类型的变量，如数字、字符串等。

第二：变量名：可以简答也可以起对应的英文名，

第三：进行赋值。

ps：一行代码中可以写次声明。

如：var lastname="Doe", age=30, job="carpenter";

增加内容：

let关键字：定义的限定范围内作用域的变量。

const ：关键字来定义一个常量

Javascript的数据类型：

数据类型的不同声明也有不同。

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

值类型定义：

数据类型可以通过“typeof”进行查看。

对字符串的定义：

格式：var 变量名=" "或' '皆可

var carname="Volvo XC60";
var carname='Volvo XC60';

特殊的 `` 反引号，他有以下功能。

语法

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

参数

string text：将成为模板字面量的一部分的字符串文本。几乎允许所有字符，包括换行符和其他空白字符。但是，除非使用了标签函数，否则无效的转义序列将导致语法错误。
expression：要插入当前位置的表达式，其值被转换为字符串或传递给 tagFunction。
tagFunction：如果指定，将使用模板字符串数组和替换表达式调用它，返回值将成为模板字面量的值。

对数字类型的定义：

格式： var 变量名=数值，即可

var x1=34.00;      //使用小数点来写
var x2=34;             //不使用小数点来写

ps:科学计数法写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

对布尔类型的定义：

布尔类型的定义：非0（false）即1（true），多用于条件测试

var x=true;
var y=false;

Undefined 和 Null：

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

可以通过将变量的值设置为 null 来清空变量。

对象类型的定义：

对数组的定义：

//第一种方法
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";



//第二种方法
var cars=new Array("Saab","Volvo","BMW");

//数组长度根据你实际填入的动态变化，

对对象的定义：

下例中，person类似于一个对象，firstname就是他的一个属性

var person={firstname:"John", lastname:"Doe", id:5566};



var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

我们如何输出一个对象的其中一个属性呢？

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<script>
var person=
{
	firstname : "John",
	lastname  : "Doe",
	id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

</body>
</html>

当然对象还有方法构成：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
	
</body>
</html>

访问的方式为：对象名+"."+方法名+"()";

ps:对象中的定义方法和直接定义的方法写法不一样。

函数调用：

函数的意义非常的大，通过调用我们能简化我们的代码，且代码可以进行复用，可以在代码中去多次调用函数。

function functionname()
{
    // 执行代码
}

注意functionname的（）可以定义变量。

执行代码中可以写入return返回数值，return后面的语句不会执行，在此结束。

函数内定义的变量为：局部变量

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

ps：若没有var let const做前缀声明，无论是声明在函数还是在全局中，都是全局变量

事件：

HTML 事件可以是浏览器行为，也可以是用户行为。

简单理解就是触发某种情况就会发生对应的改变。

实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

事件的格式：

<button onclick="this.innerHTML=Date()">现在的时间是?</button>
//button:是html属性，   onclick是典型的事件，    
//this.innerHTML=Date()是在我们点击了之后会执行的操作

//在事件的后面可以写代码，也可以调用函数。
<button onclick="displayDate()">现在的时间是?</button>
//displayDate里面调用了date去获取时间。

比较常用的事件指令

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JavaScript的符号：

分为四种情况：

特殊的：+可以连接字符串。

如：x=“aaa”，y='bbbb'

若执行x+y=z

z的值为aaabbbb

运算：

运算符	描述	例子	x 运算结果	y 运算结果	在线实例
+	加法	x=y+2	7	5	实例 »
-	减法	x=y-2	3	5	实例 »
*	乘法	x=y*2	10	5	实例 »
/	除法	x=y/2	2.5	5	实例 »
%	取模（余数）	x=y%2	1	5	实例 »
++	自增	x=++y	6	6	实例 »
++	自增	x=y++	5	6	实例 »
--	自减	x=--y	4	4	实例 »
--	自减	x=y--	5	4	实例 »

特别注意自增中++x和x++的区别，

x++：表示先执行代码，在进行自加，如我们输出x++，x=5的情况下，先输出了5，但x后面赋值了变成了6

++x：则表示先自加在执行代码，如我们输出++x，x=5的情况下，x赋值了变成了6，然后输出了6.

赋值：

=	x=y		x=5	实例 »
+=	x+=y	x=x+y	x=15	实例 »
-=	x-=y	x=x-y	x=5	实例 »
*=	x*=y	x=x*y	x=50	实例 »
/=	x/=y	x=x/y	x=2	实例 »
%=	x%=y	x=x%y	x=0	实例 »

比较：

运算符	描述	比较	返回值	实例
==	等于	x==8	false	实例 »
==	等于	x==5	true	实例 »
===	绝对等于（值和类型均相等）	x==="5"	false	实例 »
===	绝对等于（值和类型均相等）	x===5	true	实例 »
!=	不等于	x!=8	true	实例 »
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true	实例 »
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==5	false	实例 »
>	大于	x>8	false	实例 »
<	小于	x<8	true	实例 »
>=	大于或等于	x>=8	false	实例 »
<=	小于或等于	x<=8	true	实例 »

比较多用于循环等操作。

逻辑运算：

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

JavaScript的条件语句（if和switch）

if的三种格式：

if（）
if（）{}else；
if（）{}else if{}else{}

实例：本例是比较综合的应用，囊括了前面两种情况。会从上至下进行判断，符合条件就可以执行里面的代码然后退出

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

switch：

格式：

其中switch中是我们需要判断的值。

case是发生的情况，若switch中判断的值和case设置的值吻合则执行代码。

注意这里每个情况需要执行break；不执行他会继续判断。

以及default：是上面情况都不吻合的情况则执行这一段语句。

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

JavaScript的循环语句：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

for循环：

for（变量；判断；变量的改变）

其中第一和第三部分可以省略，第一部分的变量可以执行for循环前先定义，第三部分需要在循环体中进行变量的改变

for/in循环：

设置变量去访问对象中的属性。

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

while循环：

while (条件)
{
    需要执行的代码
}

do/while循环：

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

注意：do/while和while的区别在于do/while是先执行do{}内的代码，再去进行判断，while则相反，需要先执行判断符合条件才执行{}内的。

特别注意：不管用哪个循环，循环体内都需要对变量进行赋值改变，或者添加break且确保break有机会被执行才行；避免死循环。

break和continue：

这一部分比较容易。

break是直接跳出整个循环体，continue则是跳过单次循环，进行下一次while或者for循环的判断。

例如我们进行100以内奇数的总和，但我们取余2为0的我们可以执行continue去跳过这一次，奇数则进行加法

JavaScript的错误检查

JavaScript的常见错误：

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。

可能是语法错误，通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然，也可能是由于许多其他不可预知的因素。

错误检查分为三个模块

分为try、catch、throw

throw：

其中throw意为抛出一个错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

try和catch：

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

catch一般可以设置发生什么问题，如数理逻辑问题，这方便我们进行代码的修改等等。

finally：

语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

实例：

通过throw抛出具体的错误，让catch进行捕捉。

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}

JavaScript this 关键字：

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

json：

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据。

实例：

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

简单起见，我们网页中直接设置 JSON 字符串

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

最后，在你的页面中使用新的 JavaScript 对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

</body>
</html>

RlTED

关注

16
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

数据类型可以通过“typeof”进行查看。格式：var 变量名=" "或' '皆可特殊的 `` 反引号，他有以下功能。格式： var 变量名=数值，即可//使用小数点来写var x2=34;//不使用小数点来写// 0.00123布尔类型的定义：非0（false）即1（true），多用于条件测试var x=true;//第一种方法//第二种方法//数组长度根据你实际填入的动态变化，下例中，person类似于一个对象，firstname就是他的一个属性id : 5566。
复制链接

扫一扫

专栏目录