概念
JavaScript的语法来源于Java,但它是一门独立的脚本语言,可以嵌入HTML中使用,用来给HTML网页添加动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
JavaScript是一种解释性脚本语言(代码不进行预编译),是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
JavaScript框架的类型多种多样,每种类型都有其特定的用途和优势。以下是一些主要的JavaScript框架类型及其特点:
- UI框架:
-
- Bootstrap:来自Twitter,是目前最受欢迎的前端框架之一,具有简洁、直观的前端开发特点。
- EasyUI:基于jQuery、Angular、Vue和React的用户界面插件集合,通过简单的HTML标记即可定义用户界面。
- React.js:由Facebook开发,是一个用于构建用户界面的声明性和基于组件的JavaScript库。其高效、简单和可重用性被广大开发者所青睐。
- Vue.js:一款轻量级的JavaScript框架,也用于构建用户界面,以其简洁和易上手的特点赢得了众多开发者的喜爱。
- JavaScript库:
-
- Dojo:一个强大的面向对象JavaScript框架,主要由Core、Dijit、DojoX三大模块组成,提供了丰富的API和功能。
- jQuery:一个快速、简洁的JavaScript框架,帮助开发者简化DOM对象的查询、事件处理、动画制作以及Ajax交互过程。
- Hammer.js:一个轻量级的JavaScript库,能让网站轻松实现触控事件。
特点
1.让网页动起来
2.基于对象
3.跨平台
4.世界上最流行的脚本语言
一个合格的后端人员必须精通javascript
JavaScript运行环境
1.web浏览器
JavaScript 最常见的运行环境就是 web 浏览器。几乎所有现代的 web 浏览器都内置了 JavaScript 引擎,快捷键F12进入查看源代码,选择控制台开始编辑
2.通过在 HTML 页面中使用 <script>标签,可以将 JavaScript 代码嵌入到网页中,并在浏览器中执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#id1{
color: red;
}
</style>
</head>
<body>
<div id="father">
<h1 id="id1">abc</h1>
<p id="p">22</p>
<h2 id="h2">abc</h2>s
</div>
<script>
/* var self = document.getElementById('h2')
var father = h2.parentElement*/
var h1 = document.getElementById('h1')
var father = document.getElementById('father')
var newDl = document.createElement('dl')//创建一个自定义列表
newDl.id= 'newDl'
newDl.innerHTML = '<dt>自定义列表</dt>' +
'<dd>java</dd>'+'<dd>python</dd>'
father.appendChild(newDl)
var myScript =document.createElement('script')
myScript.setAttribute('ol','<li>自定义列表</li>' +
'<li>java</li>'+'<li>python</li>')
</script>
</body>
</html>
3.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../Css/cloth.css" type="text/css">
<script src="../../Js/first.js"></script><!--通过外界js文件-->
<style>
</style>
</head>
<body>
<div>
<h2 class="title">服装市场</h2>
<ul>
<li><a href="#">衣服</a> <a href="#">裤子</a> <a href="#">鞋子</a> <a href="#">袜子</a></li>
<li><a href="#">内裤</a> <a href="#">内衣</a> <a href="#">拖鞋</a></li>
<li><a href="#">短裤</a> <a href="#">体袖</a> <a href="#">裙子</a></li>
<li><a href="#">外套</a> <a href="#">衬衣</a></li>
<li><a href="#">帽子</a> <a href="#">围巾</a></li>
<li><a href="#">毛衣</a> <a href="#">风衣</a> <a href="#">皮衣</a></li>
<li><a href="#">眼镜</a> <a href="#">牛仔衣</a> <a href="#">牛仔裤</a></li>
</ul>
</div>
</body>
</html>
注释
单行注释//
多行注释以 /* 开始,以 */ 结尾
HTML注释符号是以 <-- 开始以 --> 结束的。如果在此注释符号内编写 JavaScrip t脚本,对于不支持 JavaScript 的浏览器,将会把编写的 JavaScript 脚本作为注释处理。
字符串操作
1.单行字符串由 “ ”‘ ’表示
2.多行字符串由` `编写
var msg= `nhjjjjj
ffff
ffff
ffff`
console.log(msg)
3.模板字符串用${}表示
let name = "liuyang"
let masg = `你好嗄,${name}`
console.log(masg)//会输入
4.字符串长度
console.log(masg.length)
5.字符串下标
console.log(masg[2])
字符串不可变
6.字符串调方法
console.log(masg.substring(1))
console.log(masg.substring(1,3))
变量
局部变量
在函数体内使用 var 和 let 关键字声明的变量有点类似。
它们的作用域都是 局部的:
// 使用 var
function myFunction() {
var carName = "liuboss"; // 局部作用域
}
// 使用 let
function myFunction() {
let carName = "liubosss"; // 局部作用域
}
全局变量
在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。
它们的作用域都是 全局的:
// 使用 var
var a = 2; // 全局作用域
// 使用 let
let a = 2; // 全局作用域
HTML 代码中使用全局变量
在 JavaScript 中, 全局作用域是针对 JavaScript 环境。
在 HTML 中, 全局作用域是针对 window 对象。
使用 var 关键字声明的全局作用域变量属于 window 对象:
var carName = "liuboss";
// 可以使用 window.carName 访问变量
使用 let 关键字声明的全局作用域变量不属于 window 对象:
let carName = "liuboss";
// 不能使用 window.carName 访问变量
const 关键字
const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:
const PI = 256.3333;
PI = 35; // 报错
PI = PI + 5; // 报错