JavaScript基础

概念

JavaScript的语法来源于Java,但它是一门独立的脚本语言,可以嵌入HTML中使用,用来给HTML网页添加动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript是一种解释性脚本语言(代码不进行预编译),是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JavaScript框架的类型多种多样,每种类型都有其特定的用途和优势。以下是一些主要的JavaScript框架类型及其特点:

  1. UI框架
    • Bootstrap:来自Twitter,是目前最受欢迎的前端框架之一,具有简洁、直观的前端开发特点。
    • EasyUI:基于jQuery、Angular、Vue和React的用户界面插件集合,通过简单的HTML标记即可定义用户界面。
    • React.js:由Facebook开发,是一个用于构建用户界面的声明性和基于组件的JavaScript库。其高效、简单和可重用性被广大开发者所青睐。
    • Vue.js:一款轻量级的JavaScript框架,也用于构建用户界面,以其简洁和易上手的特点赢得了众多开发者的喜爱。
  1. 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>&nbsp;&nbsp;<a href="#">裤子</a>&nbsp;&nbsp;<a href="#">鞋子</a>&nbsp;&nbsp;<a href="#">袜子</a></li>
        <li><a href="#">内裤</a>&nbsp;&nbsp;<a href="#">内衣</a>&nbsp;&nbsp;<a href="#">拖鞋</a></li>
        <li><a href="#">短裤</a>&nbsp;&nbsp;<a href="#">体袖</a>&nbsp;&nbsp;<a href="#">裙子</a></li>
        <li><a href="#">外套</a>&nbsp;&nbsp;<a href="#">衬衣</a></li>
        <li><a href="#">帽子</a>&nbsp;&nbsp;<a href="#">围巾</a></li>
        <li><a href="#">毛衣</a>&nbsp;&nbsp;<a href="#">风衣</a>&nbsp;&nbsp;<a href="#">皮衣</a></li>
        <li><a href="#">眼镜</a>&nbsp;&nbsp;<a href="#">牛仔衣</a>&nbsp;&nbsp;<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))

 变量

局部变量

在函数体内使用 varlet 关键字声明的变量有点类似。

它们的作用域都是 局部的:

// 使用 var
function myFunction() {
    var carName = "liuboss";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "liubosss";   //  局部作用域
}

全局变量

在函数体外或代码块外使用 varlet 关键字声明的变量也有点类似。

它们的作用域都是 全局的:

// 使用 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;   // 报错

 

  • 27
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值