JavaScript 简介

JavaScript 简介

HTML 定义了网页的内容(房屋架构)

CSS 描述了网页的布局(装饰房子让房子更美观。)

JavaScript 控制了网页的行为(让房屋更具功能性。)

JavaScript 是什么

JavaScript是web(网页)开发中必不可少的脚本语言,不需要编译即可运行,运行在客户端,通过浏览器解析执行。和HTML和CSS一起工作,创建动态交互式的网页。

脚本语言:是指一种编程语言,依赖解释器执行代码。常见的脚本语言有Python、JavaScript、PHP、Ruby等等

JavaScript的作用

开发者创建动态、响应式的用户界面。JavaScript在进行前后端交互时(客户端和服务器端),通过API接口与后端服务进行通信和数据交换。可以通过后端提供的接口进行交互,发送请求和接收响应,比如处理身份验证和授权,通过与后端API接口交互,管理用户的登录状态和访问权限等。

动态内容更新

在不进行页面加载的情况下与服务器进行APL接口交互,通过创建XMLHttpRequest的对象或使用fetch函数发起异步请求(Ajax)实现在不渲染整个页面的情况下动态更新部分内容。

表单验证

在数据前端js代码能够进行表单的验证。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>顾安的博客</title> 
</head>
<body>
	
<h1>这是一个js代码对输入内容是否为数字的验证</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="js" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("js").value;  //getElementById(js)去找到js变量的所在的位置
	if(x==""||isNaN(x))                 
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

在这里插入图片描述

动态用户界面

JS可以控制和改变网页布局,样式和行为 eg 改变网页样式,想用用户事件,

改变html内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

在这里插入图片描述

点击后变为

在这里插入图片描述

JavaScript的注释

单行注释以 // 开头。

多行注释以 /* 开始,以 */ 结尾。

JavaScript引用

js代码可以直接写到HTML文件中,必须存放到script标签中。也可放在head标签,body标签中。

js代码也可放在外部文件中,文件扩展名为 .js ,srcipt中src属性放文件的路径。

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

JavaScript的变量

1:avaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不推荐)
  • 变量名称对大小写敏感

2:在 JavaScript 中创建变量通常称为"声明"变量。

​ 使用var声明变量

var guan

​ 声明便令未赋值时,其值为undefined,向变量赋值用 =

guan="一个csdn上的博客"

JavaScript数据类型

基本类型

字符串(String):用单引号或双引号引起来的内容。

数字(Number):不分整型浮点型,都为数字。

布尔(Boolean):逻辑上只有两种结果,true或false。

空(Null)

未定义(Undefined)

对象数据类型

数组(Arry):下标从0开始

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var cars=["Saab","Volvo","BMW"];
var cars=new Array("Saab","Volvo","BMW");

对象(Object):是拥有属性和方法的数据。

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

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

访问对象属性:会作为字符串返回

name = person.fullName();