02_Web开发基础之JavaScript

Web开发基础之JavaScript

学习目标和内容

1、能够描述Javascript的作用

2、能够使用分支结构if语句逻辑判断

3、能够使用其中一种循环语句

4、能够定义javaScript中的函数

5、能够定义javaScript中的对象

6、能够描述DOM的作用

7、能够通过DOM操作HTML标签元素及其属性

8、能够实现HTML元素事件的注册

一、JavaScript简介

1、JavaScript的强大

百度脑图 - 便捷的思维工具

2、JavaScript是什么

JavaScript是一种运行在客户端(浏览器) 的编程语言,用来给网页添加动态功能。

JavaScript的历史:JavaScript 的历史

3、JavaScript的作用

①最初目的

为了处理表单的验证操作

②现在广泛的应用场景

  1. 网页特效

  2. 服务端开发(Node.js)

  3. 命令行工具(Node.js)

  4. 桌面程序(Electron)

  5. App(Cordova)

  6. 游戏开发

4、JavaScript和HTML、css的区别

HTML:提供网页的结构和内容

CSS:修饰和美化内容

JavaScript:控制页面内容,增加页面动态效果

5、JavaScript的组成

ECMAScript - JavaScript的核心

ECMAScript 是 JavaScript 的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关(就是 JavaScript 的语法规范)

BOM - 浏览器对象模型

一套操作浏览器功能的 API

通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的 API

DOM 可以把 HTML看做是文档树,通过 DOM 提供的 API 可以对树上的节点进行操作

6、JavaScript的书写位置

JavaScript书写位置和CSS类似(行内样式、嵌入样式、外部样式)

①写在行内

<input type="button" value="按钮" οnclick="alert('Hello World')" />

②写在script标签中

<head><script>alert('Hello World!');</script>
</head>

③写在外部js文件中,在页面引入使用

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

Tip:

①引入外部js文件的script标签中,不可以写javaScript代码,在</body>之前

②css在头部引入,js文件在底部引入

二、JavaScript基本语法

1、变量

1.1、变量的定义

在js中使用var关键字定义变量

①变量的语法

var userName = 'linux';
var age = 18;

②同时声明多个变量

var age, name, sex;
age = 18;
name = 'centos';

③同时声明多个变量并赋值

var age = 23, name = 'shell';

1.2、变量的命名规则和规范

规则 - 必须遵守的,不遵守会报错

  • 由字母、数字、下划线、$符号组成,不能以数字开头

  • 不能是关键字和保留字,例如:for、while。

  • 区分大小写

规范 - 建议遵守的,不遵守不会报错

  • 变量名必须有意义

  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword

2、数据类型

常用的数据类型为:Number、String、Boolean

2.1、Number类型

数字字面量:数值的固定值的表示方法

100 183.5

2.2、String类型

字符串是用引号括起来的一段内容 ‘linux’’centos’ ‘sa’ ‘devops’ javaScript中的字符串,单双引号都可以使用,推荐使用单引号 转义字符

字符串长度 length属性可以用来获取字符串的长度

var str = “我是一个运维人员”
console.log(str.length);

字符串的拼接 多个字符串,可以通过+符号进行拼接

console.log(‘linux’+’centos’);

2.3、Boolean类型

字面量:true和false

Tip:

typeof(变量)查看数据的类型

Number(字符串类型) 字符串转为数字类型

3、注释

注释作用:

1、解释说明

2、注释后的代码不会被执行

①单行注释

//这是一个变量
var name = ‘linux’;

②多行注释

/*
var name = ‘linux’;
var age = 18;
var job = ‘server’;
*/

4、运算符

运算符(operator),非常类似于数学中的运算符

4.1、算术运算符

+ 加

- 减

* 乘

/ 除

% 取余 做除法运算,直到不能够再被除数除的情况下,剩下的数就是余数

4.2、自增自减运算符

一元运算符:只有一个操作数的运算符,自增自减运算符属于一元运算符。

++ 自身+1

-- 自身-1

案例演示:前置++和后置++的区别

4.3、逻辑运算符

&& 与 两个操作数同时为true,结果为true,否则都是false 一损俱损 同时满足多个条件

|| 或 两个操作数有一个为true,结果为true,否则为false 满足其中一个条件即可

! 非 取反 不满足这个条件

4.4、比较运算符

< > >= <= == != =\== !\==

\==与===的区别:

==只进行值得比较

===类型和值同时相等,则相等

4.5、赋值运算符

=

+= -= *= /= %=

先自运算 后赋值

var num = 6;
num += 6;  //相当于num = num+6   猜猜等于多少?
num /=2;   //相当于 num = num/2   猜猜等于多少?

5、分支结构

分支语句,一般用来判断不同的多种情况,并在代码块中进行对应处理。

5.1、if语句

①单分支语句(if) 语法:

if (/* 条件表达式 */) {// 执行语句
}

②双分支语句(if ...else)

语法:

if (/* 条件表达式 */){// 成立执行语句
} else {// 否则执行语句
}

③多分支语句(if...elseif...else)

语法:

if (/* 条件1 */){// 成立执行语句
} else if (/* 条件2 */){// 成立执行语句
} else if (/* 条件3 */){// 成立执行语句
} else {// 最后默认执行语句
}

案例:求两个数的最大值

判断是奇数还是偶数

5.2、switch语句

语法:

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

案例:今天是星期几?

day=new Date().getDay()

6、循环结构

JavaScript 中,循环语句有三种,for、while、do..while循环

while和do...while一般用来解决无法确定循环次数的情况。一般常见固定的次数,使用for较为常见。

6.1、for语句

语法:

for (初始化表达式1; 判断表达式2; 自增表达式3) {// 循环体4
}

6.2、while语句

// 当循环条件为true时,执行循环体,
// 当循环条件为false时,结束循环。
while (循环条件) {//循环体
}

6.3、do...while语句

语法:

do {// 循环体;
} while (循环条件);

Tip:

do...while和while使用上非常像,区别在于do...while不管条件是否成立,会执行一次操作。也就是先操作后判断。

6.4、continue和break关键字

break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)

continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)

7、数组

数组是一个有序的列表,可以在数组中存放任意数据,并且数组的长度可以动态调整。

7.1、数组的定义

语法:

//创建一个空数组
var arr = [];
//创建一个数字的数组
var arr1 = [1,2,3,4,5];
//创建包含字符串的数组
var arr2 = [‘linux’,’centos’,’redhat’];

Tip:

// 可以通过数组的length属性获取数组的长度

console.log(arr3.length);

// 可以设置length属性改变数组中元素的个数

arr2.length = 0;

7.2、获取访问数据元素

语法:

// 格式:数组名[下标]	下标又称索引
// 下标从开始
// 功能:获取数组对应下标的那个值,如果下标不存在,则返回undefined。
var arr2 = [‘linux’,’centos’,’redhat’];
arr2[0];   //linux
arr2[2];   //redhat
arr2[3];   //undefined  ?为什么呢

7.3、遍历数组

遍历数组:对数组的每一个元素进行方式一次。

语法:

for(var i = 0; i < arr.length; i++) {// 数组遍历的固定结构
}

7.4、数组元素的操作

语法:

//格式:数组名称[下标/索引] = 值;
//如果下标对应的值存在,即替换。不存在,就会新增。
var arr2 = [‘linux’,’centos’,’redhat’];
//redhat替换为devops
arr2[2] = ‘devops’;
//添加新元素之到数组中
arr2[3] = ‘sa’;

相关数组的操作方法:

8、函数

封装一段代码,以方便复用。使代码也更加清晰,结构更加明了。

8.1、函数的定义

语法:

function 函数名() {// 函数体
}

函数表达式:

var fn = function () {// 函数体
}

Tip:

函数被定义之后,不会执行,需要调用才可以执行

8.2、函数的参数

参数:函数体内部是一个封闭的空间,需要通过参数的方式,把外部值传递给函数体内部。

语法:

//带参数的函数声明
function 函数名(形参1,形参2,形参3...){//函数体
}
//带参数的函数调用
函数名(实参1,实参2,实参3)

8.3、函数的返回值

当函数被调用执行完毕之后,并不是所有场景下都需要把结果打印出来。有些业务场景下需要,把函数的执行结果返回,方便进行后续的运算操作。这时,就可以让函数返回,也就是函数的返回值。函数可以通过return关键字语法,返回函数的返回值。

Tip:

①return 之后的代码将不在执行

②函数默认返回值为undifined

语法:

//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参3...) {//函数体return 返回值;
}
//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3...);

9、对象

js是基于对象的语言

对象:由属性和方法组成

js中的对象,定义格式类似于学习过的字典。可以看做是一个功能集合

语法:

var person = {name: 'linux',age: 18,sex: true,say: function () {console.log(this.name);}
};

三、DOM

学习DOM就可以使用javaScript进行控制页面(样式、元素属性、隐藏显示等)

1、什么是DOM

DOM 是文档对象模型,这是由浏览器生成的一个树形结构,使编程语言可以很容易的访问HTML结构。

在 DOM 中可以通过 document 获取整个页面。

2、获取页面元素

①getElementById() 根据 id 获取元素

②getElementsByTagName() 根据标签名称 获取元素(集合)

==③querySelector()== 使用选择器获取元素,只返回第一个匹配的元素

==④querySelectorAll()== 使用选择器获取元素,返回所有匹配的元素(集合)

3、设置元素属性

- 获取到元素,可以设置元素对应的属性,改变页面的效果。

- 普通元素的属性

- HTML 中标签的属性一般对应 DOM 中元素的属性,DOM 中元素的属性,例如:

title、src、id 等

- 通过元素的 ==innerHTML== 属性可以设置标签之间的内容

- 通过 innerHTML 动态生成列表

- 表单元素的属性

- value、checked、selected、disabled

- 遍历文本框给所有文本框赋值

- 获取下拉框中的选项,设置下拉框中显示的项

- 禁用按钮

案例:

1、使用js动态生成列表

2、操作表单,获取表单相关值

4、注册事件

DOM中的事件机制,可以实现一些常规操作。比如:点击按钮,按下键盘等的响应。

语法:

element.onclick = function () {alert('hello world');
};

常用事件:

案列:实现按钮的点击事件,取消a标签调转。

//按钮的点击事件
document.querySelector('button').onclick = function(){alert('绑定并执行了点击事件');
}
//取消a标签的默认跳转
document.querySelector('a').onclick = function(){return false;
}

5、改变元素的样式

①改变行内样式

element.style.color = 'red';

②改变类样式

element.className = 'active';

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/226548.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1.2 【应用开发】开发一个基本的Screen应用

一&#xff0c;Screen应用开发简述 QNX Screen图形子系统是一个图形框架&#xff0c;因此&#xff0c;使用该框架开发的应用程序在复杂性和功能上可能会有很大差异。也就是说&#xff0c;大多数Screen应用程序在简化后&#xff0c;会执行某种渲染&#xff0c;以便在显示器上显…

走进暄桐教室 一起观看暄桐同学作品及感受

暄桐是一间传统美学教育教室&#xff0c;创办于2011年&#xff0c;林曦是创办人和授课老师&#xff0c;教授以书法为主的传统文化和技艺&#xff0c;旨在以书法为起点&#xff0c;亲近中国传统之美&#xff0c;以实践和所得&#xff0c;滋养当下生活。其实&#xff0c;暄桐教室…

vue表单输入绑定

基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇&#xff0c;但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据&#xff0…

大O记法了解

1、概念 大O记法&#xff08;Big O notation&#xff09;是一种用于描述算法时间复杂度的一种标记法。它表示了算法在最坏情况下对输入规模的增长速度&#xff0c;或者说算法执行时间的增长速度。用大写字母O和一个函数来表示&#xff0c;定义为T(n)O(f(n))。其中&#xff0c;…

数据结构与算法—查找算法(线性查找、二分查找、插值查找、斐波那契查找)

查找算法 文章目录 查找算法1. 线性查找算法2. 二分查找算法2.1 二分查找思路分析2.2 应用实例 3. 插值查找3.1 基本原理3.2 应用实例 4. 斐波那契4.1 基本原理4.2 应用实例 5. 查找总结 在java中&#xff0c;常用的查找有四种&#xff1a; 顺序(线性)查找二分查找/折半查找插值…

使用Node.js创建接口

当使用Node.js创建接口时&#xff0c;有两种主要方式&#xff1a;使用Express框架和使用Node.js的HTTP模块。 Express框架方式&#xff1a; 总的来说&#xff0c;使用Express框架可以更快速地搭建和管理接口&#xff0c;而使用Node.js的HTTP模块则提供了更多底层控制和灵活性&…

广州华锐互动:汽车电子线束加工VR仿真培训与实际生产场景相结合,提高培训效果

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐渗透到各个领域&#xff0c;为企业和个人带来了前所未有的便利。在汽车制造行业中&#xff0c;线束加工作为一项关键的生产工艺&#xff0c;其质量直接影响到汽车的性能和安全。因此&#xff0c;…

基于中小微企业_个体工商户的信贷评分卡模型和用户画像(论文_专利_银行调研建模使用)

背景介绍 信用贷款是指由银行或其他金融机构向中小微企业和个体工商户提供的一种贷款产品。该贷款的特点是无需提供抵押品或担保&#xff0c;主要依据借款人的信用状况来进行评估和审批。 中小微企业和个体工商户信用贷款的申请流程相对简单&#xff0c;申请人只需要提供个人…

C++高性能服务器框架muduo,与配套书籍《Linux多线程服务端编程》解读

本章解读C开源项目 muduo 代码&#xff0c;与配套书籍《Linux多线程服务端编程》&#xff0c;均来自作者陈硕&#xff0c;是业内比较有名的大神。 目录 muduo 源码解读《Linux多线程服务端编程》笔记第1章 线程安全的对象生命周期管理第2章 线程同步精要第3章 多线程服务器的适…

【【HDMI 方块移动实验 】】

HDMI 方块移动实验 dvi_transmitter_top.v module dvi_transmitter_top(input pclk ,input sys_rst_n ,input pclk_x5 ,input video_hsync ,input video_vsync ,input …

MySQL数据库的基础概念

目录 顾名思义&#xff0c;数据库是用于存储数据的&#xff0c;那这些数据被存储在哪呢&#xff1f; 文件也能存储数据&#xff0c;那在这个基础上&#xff0c;为什么还要搞出一个数据库来存储数据呢&#xff1f; MySQL的客户端登录/退出指令、服务端的启动/关闭指令 数据…

如何查看PHP信息

创建一个 PHP 文件&#xff0c;比如 info.php&#xff0c;在其中添加以下代码&#xff1a; <?php phpinfo(); ?>访问这个文件&#xff08;例如&#xff0c;在浏览器中输入 http://localhost/info.php&#xff09;&#xff0c;它会显示 PHP 的所有配置信息。在这个页面…

【设计模式】之工厂模式

工厂模式 1.介绍 工厂模式&#xff08;创建型模式&#xff09;&#xff0c;是我们最常用的实例化对象模式&#xff0c;是用工厂方法代替new操作的一种模式&#xff1b;在工厂模式中&#xff0c;我们在创建对象时不会对客户端暴露创建逻辑&#xff0c;并且是通过使用一个共同的…

服务器挖矿木马识别与清理

一、什么是挖矿木马 挖矿木马会占用CPU进行超频运算,从而占用主机大量的CPU资源,严重影响服务器上的其他应用的正常运行。黑客为了得到更多的算力资源,一般都会对全网进行无差别扫描,同时利用SSH爆破和漏洞利用等手段攻击主机。部分挖矿木马还具备蠕虫化的特点,在主机被成…

Threejs利用着色器编写动态飞线特效

一、导语 动态飞线特效是可视化数据地图中常见的需求之一&#xff0c;鼠标点击的区块作为终点&#xff0c;从其他区块飞线至点击区块&#xff0c;附带颜色变换或者结合粒子动画 二、分析 利用创建3点来构成贝塞尔曲线&#xff0c;形成线段利用着色器材质来按照线段以及时间…

Go语言学习:第1天

一、为什么开始学go语言 我自己是做测试的&#xff0c;所测试项目使用的是go语言。开始学习go语言的原因有两个&#xff1a;一方面&#xff0c;为了更好的做好工作&#xff1b; 另一方面&#xff0c;为了提高自己的核心竞争力。 二、第1天学习到的内容 2.1 Go是怎么解决包依…

JavaScript——严格检查模式

‘use strict’ &#xff1a; 严格检查模式&#xff0c;预防JavaScript的随意性导致产生的一些问题&#xff08;必须写在JavaScript的第一行&#xff09; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title…

buildadmin:表格中实现详情按钮

其一&#xff1a;创建组件并在当前控制器中引入组件 <!-- 示例核心代码(1/3) --> <!-- 详情组件在此处使用&#xff0c;但显示与否的判断是写在组件内的 --> <Detail /><!-- 引入组件 --> import Detail from ./detail.vue其二&#xff1a;注册按钮 …

ospf 知识总结

ospf 知识总结 一、ospf的概念 - 开放式最短路径优先协议&#xff0c;是广泛使用的一种动态路由协议&#xff0c;它属于链路状态路由协议&#xff0c;是一个内部网关协议&#xff08;IGP&#xff09;&#xff0c;用于在单一自治系统&#xff08;AS&#xff09;内决策路由。 - …

DeepMind大型语言AI模型FunSearch在数学科学中取得新发现

大型语言模型 (LLM) 是有用的助手 – 它们擅长组合概念&#xff0c;并且可以阅读、编写和编码来帮助人们解决问题。但他们能发现全新的知识吗&#xff1f;由于法学硕士已被证明会“幻觉”事实上不正确的信息&#xff0c;因此利用它们来做出可验证的正确发现是一个挑战。 FunSea…