前端基础：JavaScript（篇一）

目录

JavaScript概述

JavaScript历史：

须知：

基本语法

变量

代码

运行

数据类型

1、数值型(number)：

代码 

运行 

2、布尔型(boolean)：

 代码 

运行

 3、字符串型：

代码  

运行

4、 undefined类型

代码  

运行

 5:、Object类型

代码 

运行

算术运算符   + - * / % ++ --

加法运算

代码

运行

减法运算

代码

运行

乘法运算

代码

运行

赋值运算

-=

代码

运行

=(赋值)

代码

运行

比较运算符

==(比较值是否相等)

代码

运行

===(比较值是否相等,还需要比较两个类型是否一致)

代码

运行

逻辑运算符

条件运算符

控制语句

选择结构

循环结构

函数

定义函数

调用

代码

运行 

代码

运行

代码

运行

全局函数

• 确认对话框

代码

运行

• 输入对话框

代码

运行

• parseInt(arg)

代码

运行

• parseFloat(arg)

代码

运行

• typeof (arg)

代码

运行

• eval(arg)

代码

运行

JavaScript概述

JavaScript历史：

JavaScript原名叫live Script,是由美国网景开发的一种用于对网页操作的脚本语言。

网页操作(图片切换)

脚本语言（不需要编译  sql,html,css,javaScript,由某种解释器直接可以运行的）

live Script 也是面向对象的

后来sun公司与网景公司合作，将名字改为JavaScript

JavaScript与Java是两种不同的语言

JavaScript是嵌入在网页中，对网页进行各种操作的，是一种脚本语言

Java是一种后端高级语言，是需要编译的

须知：

html是网页的基本内容（标签，文本）

css是网页外观（样式）

JavaScript/js是网页的行为，为网页添加各种动态操作效果。

ES TS 面向对象结构搭建

基本语法

avaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在 head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件

对话框 alert(‘welcome!’); 提示对话框

console.log();

变量

js声明变量  java语言强类型语言 python js是弱类型语言
变量没有类型，直接使用var关键字声明即可，值有类型，给变量赋了什么值，变量就是什么类型的。

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;a = "cba";a = true; alert(a);</script></head><body></body>
</html>

运行

数据类型

1、数值型(number)：

其中包括整型数和浮点型数。

代码 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script> //数值型 包括整数和浮点数  var c = 10;alert(typeof(c));//typeof(c) 返回变量c的数据类型 c = 10.5;alert(typeof(c));	alert(c+)5;</script></head><body></body>
</html>
运行 

typeof(c) 返回变量c的数据类型

alert(c+)5; 

ERROR

2、布尔型(boolean)：

即逻辑值，true或flase。

 代码 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script> var a = true;var b = "abc";//布尔型 true falsealert(a==b);if(1){alert(111);} </script></head><body></body>
</html>
运行

 3、字符串型：

由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。 （使用单引号来输入包含引号的字符串。）

代码  
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script> //字符串型 "abc" 'a' var s1="abcd";var s2='abcde';alert(typeof(s1));alert(typeof(s2));</script></head><body></body>
</html>
运行

4、 undefined类型

声明了一个变量，却没有为变量初始化赋值，值不明确 

代码  
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script> //undefined类型  var x;alert(x);alert(x==undefined);</script></head><body></body>
</html>
运行

 5:、Object类型

js也是面向对象的语言，前期我们主要使用内置的对象，我们不自己定义对象 

代码 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>  //object对象类型   var date = new Date();alert(date.getFullYear());alert(s1.charAt(2));</script></head><body></body>
</html>
运行

算术运算符   + - * / % ++ --

加法运算

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(a+b);//加法运算alert(a+c);//连接 105alert(a+c*1);</script></head><body></body>
</html>
运行

减法运算

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(a-b);//减法运算alert(a-c);//减法运算 10-"5" 隐式将字符串"5"转为数值类型alert(a-"a");//NoN not a number</script></head><body></body>
</html>
运行

乘法运算

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(a*b);//乘法运算alert(a*c);//乘法运算</script></head><body></body>
</html>
运行

赋值运算

-=

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";a-=c;alert(a);</script></head><body></body>
</html>
运行

=(赋值)

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>for (var i = 0; i < 10; i++) {console.log(i);}</script></head><body></body>
</html>
运行

比较运算符

==(比较值是否相等)

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(b==c);</script></head><body></body>
</html>
运行

===(比较值是否相等,还需要比较两个类型是否一致)

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = 10;var b = 5;var c = "5";alert(b===c);</script></head><body></body>
</html>
运行

逻辑运算符

条件运算符

var result = (条件表达式)?结果1:结果2

当条件成立返回?后的内容，否则返回:后的内容

控制语句

选择结构

1.单一选择结构（if）

2.二路选择结构（if/else）

3.多路选择结构（switch）

循环结构

1.由计数器控制的循环（for）

2.在循环的开头测试表达式（while）

3.在循环的末尾测试表达式（do/while）

4.break continue

函数

定义函数

基本语法：

function functionName([arguments]){

     javascript statements

     [return expression]

}

function: 表示函数定义的关键字;

functionName:表示函数名;

arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;

statements: 表示实现函数功能的函数体;

return expression:表示函数将返回expression的值，同样是可选的的语句。

调用

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(){alert("你好")} </script></head><body><input type="button" value="测试" onclick="test()"/></body>
</html>
运行 

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(a,b){alert(a+":"+b);} function test(a,b){return a+b;}var c = test("1",true); alert(c);</script></head><body> </body>
</html>
运行

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function test(a,b){return a+b;}var c = test(1,"5");alert(c);</script></head><body></body>
</html>
运行

全局函数

• 确认对话框

确认-true 取消-false

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//确认对话框 确认-true 取消-falsevar res = confirm("您确定要退出吗");alert(res);</script></head><body></body>
</html>
运行

• 输入对话框
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//输入对话框var name = prompt("请输入姓名？");alert(name);</script></head><body></body>
</html>
运行

• parseInt(arg)

把括号内的内容转换成整数之后的值。如果括号内是字符串， 则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN” 。

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//parseInt(n) var a = "5";//var a = "5.5";alert(5+parseInt(a));</script></head><body></body>
</html>
运行

整数

浮点数

• parseFloat(arg)

 将参数转为浮点数

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//parseFloat(n)  var a = "5.5";alert(5+parseFloat(a)); </script></head><body></body>
</html>
运行

• typeof (arg)

返回arg值的数据类型。

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//typeof(arg);  var a = new Date();alert(typeof(a));</script></head><body></body>
</html>
运行

• eval(arg)

可运算某个字符串。

代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//eval(s) var a = "5.5";var s = "2+3+a*2";var res = eval(s);alert(res);  </script></head><body></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>var a = "5.5";var s = "alert(a)";eval(s); </script></head><body></body>
</html>
运行

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

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

相关文章

TCP的pop网络模式

TCP的pop网络模式

TCP的pop网络模式 1、tcp连接的状态有以下11种 CLOSED&#xff1a;关闭状态LISTEN&#xff1a;服务端状态&#xff0c;等待客户端发起连接请求SYN_SENT&#xff1a;客户端已发送同步连接请求&#xff0c;等待服务端相应SYN_RECEIVED&#xff1a;服务器收到客户端的SYN请请求&…
阅读更多...
MySQL 基本语法讲解及示例（下）

MySQL 基本语法讲解及示例（下）

第六节&#xff1a;如何检索资料 在本节中&#xff0c;我们将介绍如何使用SQL语句检索数据库中的资料&#xff0c;具体包括选择特定列、排序、条件过滤以及组合排序等操作。我们以一个名为student的表格为例&#xff0c;演示不同的检索方法。 初始表格 student student_idname…
阅读更多...
Python中frozenset，秒变不可变集合，再也不用担心多线程了！

Python中frozenset，秒变不可变集合，再也不用担心多线程了！

目录 1、Frozenset基础介绍 🌐 1.1 Frozenset定义与创建 1.2 不可变集合特性 1.3 与Set的区别对比 2、Frozenset操作实践 🧩 2.1 初始化与添加元素尝试 2.2 成员测试: in & not in 2.3 集合运算: 并集、交集、差集 2.4 使用场景示例: 字典键、函数参数默认值 …
阅读更多...
劲爆！华为享界两款新车曝光，等等党有福了

劲爆！华为享界两款新车曝光，等等党有福了

文 | AUTO芯球 作者 | 雷慢 劲爆啊&#xff0c;北汽的一份环境影响分析报告&#xff0c; 不仅曝光了享界S9的生产进展&#xff0c; 还泄露了自家的另两款产品&#xff0c; 第一款是和享界S9同尺寸的旅行车&#xff0c; 我一看&#xff0c;这不是我最喜欢的“瓦罐”吗&…
阅读更多...
v-html 空格/换行不生效

v-html 空格/换行不生效

接口返回的内容如下&#xff1a;有空格有换行&#xff0c;但 使用v-html无效 需加css样式 white-space: pre-wrap; <div class"pretty-html" v-html"Value"></div>.pretty-html {white-space: pre-wrap; /* 保留空格和换行&#xff0c;并允许…
阅读更多...
掌握麦肯锡精英的6个技巧，你也能成为1%的精英！

掌握麦肯锡精英的6个技巧，你也能成为1%的精英！

不知道大家有没有想过&#xff0c;我们和那些全球顶尖精英的差距可能只有1%&#xff0c;只是99%的人还不知道这件事。 今天给大家推荐一本好书&#xff0c;《你和麦肯锡精英的差别只有1%》。优思学院发现&#xff0c;在我们的六西格玛、精益管理的学生中很多人对自己没有自信。…
阅读更多...
软通动力子公司鸿湖万联最新成果SwanLink AI亮相世界人工智能大会

软通动力子公司鸿湖万联最新成果SwanLink AI亮相世界人工智能大会

7月4日&#xff0c;2024世界人工智能大会暨人工智能全球治理高级别会议&#xff08;WAIC 2024&#xff09;在上海拉开帷幕&#xff0c;软通动力董事长兼首席执行官刘天文受邀出席开幕式。其间&#xff0c;软通动力携子公司鸿湖万联深度参与到大会各项活动中&#xff0c;并全面展…
阅读更多...
数字化产科管理平台全套源码，java产科电子病历系统源码

数字化产科管理平台全套源码，java产科电子病历系统源码

数字化产科管理平台全套成品源码&#xff0c;产科电子病历系统源码&#xff0c;多家大型妇幼专科医院应用案例。源码完全授权交付。 数字化产科管理平台&#xff08;智慧产科系统&#xff09;是为医院产科量身定制的信息管理系统。它管理了孕妇从怀孕开始到生产结束42天以内的一…
阅读更多...
BERT--学习

BERT--学习

一、Transformer Transformer&#xff0c;是由编码块和解码块两部分组成&#xff0c;其中编码块由多个编码器组成&#xff0c;解码块同样也是由多个解码块组成。 编码器&#xff1a;自注意力 全连接 多头自注意力&#xff1a;Q、K、V 公式&#xff1a; 解码块&#xff1…
阅读更多...
【anaconda】—“conda info“命令后conda配置和环境信息的理解

【anaconda】—“conda info“命令后conda配置和环境信息的理解

文章目录 conda配置和环境信息的理解 conda配置和环境信息的理解 安装anaconda成功后&#xff0c;打开cmd&#xff0c;输入"conda info"命令&#xff0c;结果显示如下&#xff1a; conda的配置和环境信息的输出。以下是对每个字段的解释&#xff1a; active environm…
阅读更多...
H2 Database Console未授权访问漏洞封堵

H2 Database Console未授权访问漏洞封堵

背景 H2 Database Console未授权访问&#xff0c;默认情况下自动创建不存在的数据库&#xff0c;从而导致未授权访问。各种未授权访问的教程&#xff0c;但是它怎么封堵呢&#xff1f; -ifExists 很简单&#xff0c;启动参数添加 -ifExists &#xff0c;它的含义&#xff1a…
阅读更多...
中电金信:加快企业 AI 平台升级，构建金融智能业务新引擎

中电金信:加快企业 AI 平台升级，构建金融智能业务新引擎

在当今数字化时代的浪潮下&#xff0c;人工智能&#xff08;AI&#xff09;技术的蓬勃发展正为各行业带来前所未有的变革与创新契机。尤其是在金融领域&#xff0c;AI 模型的广泛应用已然成为提升竞争力、优化业务流程以及实现智能化转型的关键驱动力。然而&#xff0c;企业在积…
阅读更多...
【C++ 】解决 C++ 语言报错：Null Pointer Dereferenc

【C++ 】解决 C++ 语言报错：Null Pointer Dereferenc

文章目录 引言 在 C 编程中&#xff0c;空指针解引用&#xff08;Null Pointer Dereference&#xff09;是一种常见且危险的错误。当程序试图通过空指针访问内存时&#xff0c;会导致程序崩溃或产生不可预期的行为。本文将详细探讨空指针解引用的成因、检测方法及其预防和解决…
阅读更多...
简单配置VScode轻量级C++竞赛环境

简单配置VScode轻量级C++竞赛环境

1. 安装拓展 Chinese是中文&#xff0c;需要重启才可以运行&#xff0c;C/C拓展只是进行语法代码提示&#xff0c;不需要进行任何配置修改&#xff0c;默认即可。 2. 创建文件 如上图创建好各级文件夹&#xff0c;其中C是工作文件夹&#xff0c;.vscode是配置文件夹&#xff0…
阅读更多...
【网络安全】Host碰撞漏洞原理+工具+脚本

【网络安全】Host碰撞漏洞原理+工具+脚本

文章目录 漏洞原理虚拟主机配置Host头部字段Host碰撞漏洞漏洞场景工具漏洞原理 Host 碰撞漏洞，也称为主机名冲突漏洞，是一种网络攻击手段。常见危害有：绕过访问控制，通过公网访问一些未经授权的资源等。 虚拟主机配置 在Web服务器（如Nginx或Apache）上，多个网站可以共…
阅读更多...
学习测试2-方法

学习测试2-方法

设计测试用例 设计测试用例的万能公式 (在没有需求文档的情况下&#xff09; 软件质量模型 效率就是性能 兼容性测试 浏览器 谷歌 IE 火狐 苹果 百度 Windows7 10 11 苹果系统 app 不同品牌 小米 vivo 华为 苹果 不同的操作系统 安卓 鸿蒙 苹果 -----------------------…
阅读更多...
TikTok马来西亚直播网络怎么配置？

TikTok马来西亚直播网络怎么配置？

TikTok是一款全球流行的社交媒体应用&#xff0c;在东南亚地区拥有大量用户。在马来西亚这个多元化的国家&#xff0c;配置高效稳定的直播网络对TikTok的运营至关重要。 配置马来西亚直播网络的必要性 广泛的地理覆盖&#xff1a;马来西亚包括大片陆地和众多岛屿&#xff0c;网…
阅读更多...
性能压测 -优化 Nginx的动静分离

性能压测 -优化 Nginx的动静分离

两件事情 1.以后将所有的项目的静态资源都应该放在nginx里面 2.nginx 规则&#xff1a;/static/***所有请求都有nginx直接返回 nginx 配置一下配置文件&#xff0c;然后把html 的静态资源&#xff0c;绑定好是Nginx优先级高的静态资源路径&#xff0c;就去交给nginx静态资源…
阅读更多...
Prometheus + Grafana 监控系统搭建使用指南-Nacos 接入 Prometheus 监控

Prometheus + Grafana 监控系统搭建使用指南-Nacos 接入 Prometheus 监控

Nacos 接入 Prometheus 监控 系列文章目录 Prometheus 的安装部署Grafana的安装部署Linux服务器接入Prometheus监控-Node Exporter 安装指南Prometheus 接入SpringBoot微服务监控Mysql 接入 Prometheus RocketMQ 接入Prometheus 监控ElasticSearch 接入 PrometheusNacos 接入…
阅读更多...
在Android运行时切换Retrofit Base URL：简化开发环境与生产环境的切换

在Android运行时切换Retrofit Base URL：简化开发环境与生产环境的切换

在运行时切换Retrofit Base URL：简化开发环境与生产环境的切换 在Android开发中，Retrofit是一个由Square开发的类型安全的HTTP客户端库。它为API认证和网络请求提供了一个强大的框架。然而，在开发过程中，我们常常需要在不同的环境（如开发环境和生产环境）之间切换Base UR…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023