javascript

最新推荐文章于 2022-08-25 20:38:02 发布

小猪佩奇在学习

最新推荐文章于 2022-08-25 20:38:02 发布

阅读量387

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_70745126/article/details/125684684

版权

Javascript

什么是javascript
javascript的用法
JavaScript 输出
JavaScript 语法

什么是javascript

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

javascript的用法

HTML 中的 Javascript 脚本代码必须位于 script与 /script 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 body 和 head 部分中。
外部的 JavaScript：
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 script 标签的 “src” 属性中设置该 .js 文件。

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

JavaScript 输出

JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：

1.使用 window.alert()

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<script>
document.write("demo");
</script>
	
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>

3.使用 innerHTML 写入到 HTML 元素。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

4.使用 window.alert()

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

在网页打开检查在console里面会有运行结果

JavaScript 语法

1.字面量

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

2.语句

JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：

document.getElementById("demo").innerHTML = "你好 Dolly";

分号:
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
JavaScript 代码:
JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。
JavaScript 代码块:
JavaScript 可以分批地组合起来。
代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。
JavaScript 语句标识符:
JavaScript 语句通常以一个语句标识符为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
在这里插入图片描述
空格:
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
对代码行进行折行:
您可以在文本字符串中使用反斜杠对代码行进行换行。

document.write("你好 \
世界!");

错误示范

document.write \ 
("你好世界!");

3.注释

单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。

4.变量

JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不推荐）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 变量还能保存其他数据类型，比如文本值 (name=“Bill Gates”)。
在 JavaScript 中，类似 “Bill Gates” 这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

在 JavaScript 中创建变量通常称为"声明"变量。
我们使用 var 关键词来声明变量：
变量声明之后，该变量是空的（它没有值）。(Value = undefined,可以通过将变量的值设置为 null 来清空变量。)
如需向变量赋值，请使用等号,可以在声明变量时对其赋值：

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 “Volvo”，然后把它放入 id=“demo” 的 HTML 段落中：

var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

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

声明也可横跨多行：

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

一条语句中声明的多个变量不可以同时赋同一个值:

var x,y,z=1;
x,y 为 undefined， z 为 1。

如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 “Volvo”

var carname="Volvo";
var carname;

1.局部 JavaScript 变量

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

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

2.全局 JavaScript 变量

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>
如果你的变量没有声明，它将自动成为全局变量：
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
	"我可以显示 " + carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>全局变量在任何脚本和函数内均可访问。</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() 
{
    document.getElementById("demo").innerHTML =
		"我可以显示 " + carName;
}
</script>

</body>
</html>

3.JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

这条语句：

carname="Volvo";

将声明 window 的一个属性 carname。

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

5.数据类型

在这里插入图片描述
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 数组
下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");

1.typeof

typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型。

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

6.运算符

1.算术运算符

在这里插入图片描述

2.赋值运算符

在这里插入图片描述

3.用于字符串的 + 运算符

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

4.对字符串和数字进行加法运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：

实例
x=5+5;
y="5"+5;
z="Hello"+5;
x,y, 和 z 输出结果为:

10
55
Hello5

7.函数

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

1.调用带参数的函数

您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)
当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

2.带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction(a,b)
{
    return a*b;
}
 
document.getElementById("demo").innerHTML=myFunction(4,3);

8.事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：

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

通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号：
<some-HTML-element some-event='JavaScript 代码'>
双引号：
<some-HTML-element some-event="JavaScript 代码">

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

在这里插入图片描述

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 …

可以使用多种方法来执行 JavaScript 事件代码：
HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
等等 …

9.字符串

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

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

1.特殊字符

在这里插入图片描述

2.字符串属性

在这里插入图片描述

3.字符串方法

在这里插入图片描述

10.对象

JavaScript 对象是拥有属性和方法的数据。
真实生活中，一辆汽车是一个对象。
对象有它的属性，如重量和颜色等，方法有启动停止等:
所有汽车都有这些属性，但是每款车的属性都不尽相同。
所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。

代码为变量 car 设置值为 "Fiat" :
var car = "Fiat";
对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。


**定义对象的方法：**
方法一：
var car = {name:"Fiat", model:500, color:"white"};
方法二
var car = {
    name:"Fiat",   //对象属性
   model:500,
    color:"white"
};

**访问对象属性：**
方法一：
car.name;
方法二：
car['name'];

对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 car 对象的 run() 方法:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var car = {
    name:"Fiat",   //对象属性
   model:500,
    color:"white"
   run : function() 
	{
       return this.name + " " + this.model;
    }
};
document.getElementById("demo").innerHTML = car.run();  //访问对象方法
</script>
	
</body>
</html>

11.比较

1.比较运算符

在这里插入图片描述

if (age<18) x="Too young";

2.逻辑运算符

在这里插入图片描述

3.条件运算符

variablename=(condition)?value1:value2 
如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。
voteable=(age<18)?"年龄太小":"年龄已达到";

12.条件语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

1.if…else 语句

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

2.if 语句

if (condition)
{
    当条件为 true 时执行的代码
}

3.if…else if…else 语句

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

4.switch

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

default 关键词
请使用 default 关键词来规定匹配不存在时做的事情

如果今天不是星期六或星期日，则会输出默认的消息：

var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}
document.getElementById("demo").innerHTML=x;
x 的运行结果：

今天是星期六

13.循环语句

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

1.for

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

2.for/in

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

3.while

while 循环会在指定条件为真时循环执行代码块。

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

4.do/while

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

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

3.break和continue

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

小猪佩奇在学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript

HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为HTML 中的 Javascript 脚本代码必须位于 script与 /script 标签之间。Javascript 脚本代码可被放置在 HTML 页面的 body 和 head 部分中。外部的 JavaScript：也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 script 标签的 “src” 属性中设
复制链接

扫一扫