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();