javaScript基础（8个案例+代码+效果图）

目录

1.js常用的输出语句

案例:js初体验

1.代码

2.效果

2.js命名规则

3.js赋值

var 关键字声明变量

案例:交换两个变量的内容

完整代码

效果

4.js数据类型

布尔类型 

整数

浮点数

字符串

空型

未定义型

5. 数据检测

6.算术运算符

7.比较运算符

案例:计算圆周长和面积

1.代码

2.效果

8.选择结构if(if - else)

if

if-else

案例:判断成绩等级

1.代码

2.效果

9.switch语句

案例:改写判断成绩等级

1.代码

2.效果

10.for循环

案例:从1输出到100

1.代码

2.效果

11.while循环

案例：从1输出到100改

1.代码

2.效果

12.嵌套循环

案例:输出一个三角形

1.代码

2.效果

1.js常用的输出语句

  • document.write() HTML文档输出

  • console.log(); 控制台输出

  • prompt() 输入框

  • alert 弹出框

案例:js初体验

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js常用输出语句</title></head>
<body><script>// HTML输出document.write("hello world");//控制台输出console.log("hello world");//带提示的输入框prompt("请输入你的名字");//弹出框alert("/**/是js的多行注释+\n //是js的行注释");</script>
</body>
</html>

2.效果

输入框

.

alert框

HTML输出

控制台输出

2.js命名规则

  • 不能以数字开头，不能以运算符号开头
  • 严格区分大小写
  • 不能使用javaScript关键字命名
  • 下划线命名:单词以下划线分割
    • 例子: var my_score = 100;
  • 驼峰命名法:首字母大写
    • 例子: var myScore = 100;

3.js赋值

var 关键字声明变量

var myFirstName = "惜.己";

案例:交换两个变量的内容

var leftHand = "水果刀"; //右手

var rightHand = "饭叉";  //左手

var table = "" //桌子

/**

        例如你想交换左手和右手的东西，那么肯定需要先把手中的东西放在桌子上，然后在交换，然后再从桌子上拿去，交换完成

*/

//模拟

table = leftHand;  //左手的东西放在桌子上

leftHand = rightHand; //右手的东西给左手

rightHand = table;  //右手从桌子拿取物品

console.log(leftHand);

console.log(rightHand);

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var leftHand = "水果刀"; //右手var rightHand = "饭叉";  //左手var table = "" //桌子/**例如你想交换左手和右手的东西，那么肯定需要先把手中的东西放在桌子上，然后在交换，然后再从桌子上拿去，交换完成*///模拟table = leftHand;  //左手的东西放在桌子上leftHand = rightHand; //右手的东西给左手rightHand = table;  //右手从桌子拿取物品console.log(leftHand);console.log(rightHand);</script>
</body></html>

效果

4.js数据类型

布尔类型 

false , true;

//定义一个布尔类型

var flag = false;

cosnole.log(flag)

var flag_two = true; 

console.log(flag_two);

整数

定义一个整数

//八进制

var oct = 032 ;  //八进制 的二十六     八进制以0开头

var dec =  100 ; // 十进制的100

var hex  =  0x1a;  //十六进制的 26   十六进制以0x开头

浮点数

//定义一个浮点数

var myFloat = 3.1415926;

字符串

//单引号字符串

var mySingleString = '我的第一个字符串';

//多引号字符串

var myDoubleString = "我的第二个字符串"

空型

//空型只有一个null 

//定义一个空型

var  myNull = null;

console.log(myNull);

未定义型

var a ; 

console.log(a);

//输出结果为undefined

5. 数据检测

typeof  用于检测数据类型

console.log(typeof 2);  //number

console.log(typeof '2');  //string

console.log(typeof true);  //布尔值

console.log(typeof null);  //object 

console.log(typeof undefined);  //undefined

6.算术运算符

  • +  两个数相加
  • -  两个数相减
  • *  两个数相乘
  • /   两个数相除
  • %  两个数相除取模（取余数）
  • ++myNumber   前自增  （计算之前本身先加1）
  • --myNumber    前自减  （计算之前本身先减一）
  • myNumber--  后自减  （计算之后本身自己减一）
  • myNumber++ 后自增   （计算之后本身加1）

7.比较运算符

  • > 大于号
  • < 小于号
  • >= 大于或等于
  • <= 小于或等于
  • == 等于
  • != 不等于
  • === 全等
  • !== 不全等

案例:计算圆周长和面积

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算圆周长和面积</title></head>
<body><script>//计算圆var ricle  = prompt("输入圆的半径")var pi = 3.14;//计算圆的周长document.write("圆的周长为：" + 2*pi*ricle + "<br>");//计算圆的面积document.write("圆的面积为：" + pi*ricle*ricle);</script></body>
</html>

2.效果

8.选择结构if(if - else)

if

if(条件){

        满足条件执行的代码

}

if-else

if(条件){

        满足条件执行的代码

}else{

        不满足条件执行的代码

}

案例:判断成绩等级

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>判断成绩等级</title>
</head><body><script>// 判断成绩等级//首先输入成绩var score = prompt("请输入你的成绩");//使用if  else 判断成绩if (score >= 90) {alert("你的成绩为优秀");} else if (score >= 80) {alert("你的成绩为良好");} else if (score >= 70) {alert("你的成绩为中等");} else if (score >= 60) {alert("你的成绩为及格");} else {alert("你的成绩为不及格");}//页面输出成绩document.write("你的成绩为：" + score);</script>
</body></html>

2.效果

9.switch语句

switch(变量){

        case (值1): 执行代码1 ; break ; 

        case (值2): 执行代码2 ; break ; 

        case (值3): 执行代码3 ; break ; 

        case (值4): 执行代码4 ; break ; 

        case (值5): 执行代码5 ; break ; 

        default: 默认执行

}

案例:改写判断成绩等级

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>判断成绩改</title>
</head>
<body><!-- 使用switch --><script>var score = parseInt(prompt("请输入成绩"));switch(true){case score >= 90 && score <= 100:alert("优秀");break;case score >= 80 && score < 90:alert("良好");break;case score >= 70 && score < 80:alert("中等");break;case score >= 60 && score < 70:alert("及格");break;default:alert("不及格");break;}document.write("成绩:"+score)</script>
</body>
</html>

2.效果

10.for循环

for(var 变量名;变量条件判断;变量值进行操作){

        满足条件执行的代码;

}

//注: continue 跳出当次循环不执行后面的代码

案例:从1输出到100

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>从1输出到100</title>
</head>
<body><script>//从1输出到100for(var i=1;i<=100;i++){document.write(i+"<br>");}</script></body>
</html>

2.效果

11.while循环

while(条件){

        执行代码

}

// 注：如果条件不满足直接跳出循环 ，或者使用break跳出当前层循环

案例：从1输出到100改

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>从1输出到100改</title>
</head>
<body><script>//从1输出到100//while 实现var  i = 1 ; while (i<=100){document.write(i+"<br>");i++;}</script></body>
</html>

2.效果

12.嵌套循环

for

for(var 变量;判断是否满足条件；变量变化操作){

        满足条件执行代码

        

        for(var 变量2;判断是否满足条件；变量变化操作){

                满足条件执行代码

        

        }

        

}

while

while(条件){

        执行代码

        while(条件){

                执行代码

        }

}

案例:输出一个三角形

这段HTML中的JavaScript代码实现了用两种不同的循环结构（while和for）来生成一个简单的文本金字塔，并在两个三角形之间插入一条水平线以作区分。

  1. 使用while循环生成三角形

    • 初始化变量i为1。
    • 当i小于等于5时，执行循环体。
      • 初始化变量j为1。
      • 当j小于等于i时，在页面上输出一个"^"符号，并递增j。
      • 每完成一轮内层循环后，在页面上输出换行符<br>以开始新的一行。
      • 递增i以便进入下一轮外层循环。
    • 结果是在网页上输出一个由"^"组成的三角形形状。

  2. 使用for循环生成三角形

    • 外层循环从i=1到i=5。
      • 内层循环从j=1到j=i，每次循环在页面上输出一个"*"符号。
      • 每完成一轮内层循环后，在页面上输出换行符<br>以开始新的一行。
    • 这个循环同样生成一个三角形形状，但这次是由"*"组成。

  3. 添加水平线

    • 在两个三角形之间，使用document.write("<hr>")插入一条水平线，以便于区分两个不同方法生成的结果。

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输出一个三角型</title>
</head>
<body><script>//输出一个金字塔var i = 1;while(i <= 5){var j = 1;while(j <= i){//输出^号document.write("^");j++;}document.write("<br>");i++;}document.write("<hr>");/*** for输出一个金字塔*/for(var i = 1; i <= 5; i++){for(var j = 1; j <= i; j++){document.write("*");}document.write("<br>");}</script></body>
</html>

2.效果

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

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

相关文章

【游戏模组】重返德军总部2009高清重置MOD，建模和材质全部重置，并且支持光追效果，游戏画质大提升

【游戏模组】重返德军总部2009高清重置MOD，建模和材质全部重置，并且支持光追效果，游戏画质大提升

各位好&#xff0c;今天小编给大家带来一款新的高清重置MOD&#xff0c;本次高清重置的游戏叫《重返德军总部2009》2009年发布&#xff0c;我相信很多玩家已经玩过了&#xff0c;如果你还没有玩过我也可以和你简单介绍一下剧情&#xff0c;这款游戏故事背景接续在《重返德军总部…
阅读更多...
Cilium-实战系列-（一）Cilium-安装与部署

Cilium-实战系列-（一）Cilium-安装与部署

前言&#xff1a; 1、首先说一下这篇实战系列和Cilium-ebpf系列文章为 “一文一武”&#xff0c;一个注重点解&#xff0c;一个注重实际操作。 Cilium ebpf 系列文章-什么是ebpf?&#xff08;一&#xff09;_clium ebpf-CSDN博客文章浏览阅读419次。一、We Create a containe…
阅读更多...
ElasticSearch备考 -- Multi field

ElasticSearch备考 -- Multi field

一、题目 Create the index hamlet_2 with one primary shard and no replicas Copy the mapping of hamlet_1 into hamlet_2, but also define a multi-field for speaker. The name of such multi-field is tokens and its data type is the (default) analysed string Reind…
阅读更多...
[git] github管理项目之环境依赖管理

[git] github管理项目之环境依赖管理

导出依赖到 requirements.txt pip install pipreqs pipreqs . --encodingutf8 --force但是直接使用pip安装不了torch&#xff0c;需要添加源&#xff01;&#xff01; pip install -r requirements.txt -f https://download.pytorch.org/whl/torch_stable.htmlpython 项目中 …
阅读更多...
基于VirtualBox和Ubuntu的虚拟环境搭建

基于VirtualBox和Ubuntu的虚拟环境搭建

VirtualBox简介 VirtualBox 是一款开源虚拟机软件。 是由德国 Innotek 公司开发&#xff0c;由Sun Microsystems公司出品的软件&#xff0c;使用Qt编写&#xff0c;在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。简单易用&#xff0c;可虚拟的系统包括Windows&…
阅读更多...
JavaScript-下篇

JavaScript-下篇

上篇我们学习了&#xff0c;一些基础语法和函数&#xff0c;现在我们学习下篇&#xff0c;主要包括,对象和事件。而对象又包括&#xff0c;数组Arrays&#xff0c;String字符串&#xff0c;BOM&#xff0c;DOM等 JS对象 Arrays数组 数组是一种特殊的对象&#xff0c;用于存储…
阅读更多...
子比主题美化 – 添加天气教程

子比主题美化 – 添加天气教程

前言 经常看到很多的网站顶部或者侧边有显示天气状态的小条幅&#xff0c;看着也美观&#xff0c;寻思着也在自己的小站上显示天气。大体的思路是能识别用的ip地址来确认位置然后以代码形式在前台显示出。 经过在百度上搜索一番&#xff0c;发现一个很不错的天气api&#xff…
阅读更多...
Java之二叉树的基本操作实现

Java之二叉树的基本操作实现

1. 模拟实现二叉树前&#xff0c;我们要先表示树&#xff0c;首先定义一个内部类&#xff0c;当作二叉树节点 static class TreeNOde{char val;//存放二叉树的值TreeNOde left;//指向左子树的引用TreeNOde right;//指向右子树的引用//构造方法&#xff0c;用于实例化树的节点p…
阅读更多...
Luminar财务造假风波：激光雷达龙头的困境与挑战

Luminar财务造假风波：激光雷达龙头的困境与挑战

近日，美国激光雷达上市公司Luminar被爆出财务造假嫌疑，这一消息震惊了整个行业。Luminar，这家曾风光无限的激光雷达公司，最高市值一度达到120亿美元，其年轻的创始人也因此坐拥豪宅豪车无数。然而，如今在市值仅剩5亿美元左右的时候，却被爆出如此丑闻，令人不禁唏嘘。 带…
阅读更多...
成都睿明智科技有限公司抖音电商新蓝海的领航者

成都睿明智科技有限公司抖音电商新蓝海的领航者

在当今这个数字化浪潮汹涌的时代&#xff0c;电商行业正以惊人的速度迭代升级&#xff0c;而抖音电商作为新兴势力&#xff0c;更是凭借其庞大的用户基数、精准的算法推荐和高度互动的社区氛围&#xff0c;成为了众多商家竞相追逐的蓝海市场。在这片充满机遇与挑战的海洋中&…
阅读更多...
洛谷每日一题（P1205 [USACO1.2] 方块转换 Transformations）矩阵变换

洛谷每日一题（P1205 [USACO1.2] 方块转换 Transformations）矩阵变换

原题目链接&#xff1a; P1205 [USACO1.2] 方块转换 Transformations - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 原题目截图&#xff1a; 思路分析&#xff1a; 这题目还是比较简单&#xff0c;模拟一下旋转变化的过程&#xff0c;然后注意变换的规律就行了。 读取输入…
阅读更多...
【移动端】事件基础

【移动端】事件基础

一、移动端事件分类 移动端事件主要分为以下几类&#xff1a; 1. 触摸事件&#xff08;Touch Events&#xff09; 触摸事件是移动设备特有的事件&#xff0c;用来处理用户通过触摸屏幕进行的操作。主要的触摸事件有&#xff1a; touchstart&#xff1a;手指触摸屏幕时触发。…
阅读更多...
我的项目管理生涯

我的项目管理生涯

1 前言 从好几年前就想写几篇关于自己职业生涯的文章了&#xff0c;一直由于各种原因没有写成&#xff0c;正好借新的工作机会&#xff0c;尤其是项目管理这段工作经历&#xff0c;计划通过这一二篇文章进行总结和反思一下&#xff0c;以期更顺利的开展相关工作或是自己能更上…
阅读更多...
ad.concat()学习

ad.concat()学习

学习1 import anndata as ad, pandas as pd, numpy as np from scipy import sparse a ad.AnnData(Xsparse.csr_matrix(np.array([[0, 1], [2, 3]])),obspd.DataFrame({"group": ["a", "b"]}, index["s1", "s2"]),varpd.D…
阅读更多...
import torch报错问题：OSError: [WinError 126] 找不到指定的模块。

import torch报错问题：OSError: [WinError 126] 找不到指定的模块。

今天在python中导入import torch时&#xff0c;发生了报错。 import torch File "D:\python\Lib\site-packages\torch\__init__.py", line 148, in <module>raise err OSError: [WinError 126] 找不到指定的模块。 Error loading "D:\python\Lib\site-pac…
阅读更多...
【PACS源码】C#.net医学影像管理系统源码，支持CT、MR、CR、DR、ECT、DSA、X光机、超声、内镜、病理等多种设备。

【PACS源码】C#.net医学影像管理系统源码，支持CT、MR、CR、DR、ECT、DSA、X光机、超声、内镜、病理等多种设备。

PACS医学影像管理与传输系统软件可对医学仪器输出的视频信号进行接收、处理、存储、报告输出、管理、查询等&#xff0c;并支持网络&#xff0c;实现资源共享。为医院对病人信息资料进行数字化、科学化、网络化管理提供了必要的工具。 基于DICOM标准的PACS医学影像管理系统&am…
阅读更多...
前端性能优化 面试如何完美回答

前端性能优化 面试如何完美回答

前言 性能优化是目前在面试中被问到非常多的问题&#xff0c;主要就是通过各种算和技术来提高页和应用的速度和用户体前端性能优化的问题并不好回答 在回答的时候干万不要掉进一个误区&#xff0c;认为性能优化只是几个技术点而已&#xff0c;事实上性能优化涉及到的是多方面的…
阅读更多...
【c++】string类 （一）

【c++】string类 （一）

简介 由于c的历史包袱&#xff0c;c要兼容c语言&#xff0c;c的字符串要兼容c语言&#xff0c;在 C 中&#xff0c;字符串通常使用两种主要的方式来表示&#xff1a; C风格字符串&#xff08;C-style strings&#xff09;&#xff1a; 依然是以 \0 结尾的字符数组。这种表示方…
阅读更多...
掌握嵌套子查询：复杂 SQL 中 * 列的准确表列关系

掌握嵌套子查询：复杂 SQL 中 * 列的准确表列关系

在日常开发中&#xff0c;我们常常需要对复杂的 SQL 进行数据血缘分析。 本文重点讨论在具有 * 列的嵌套子查询中建立表和列之间正确关系的挑战。使用 Teradata SQL 代码示例来说明该过程。 本文聚焦于一个别名为 SUBSCRIBER_ 的子查询及其派生的列&#xff0c;这些列在外层查…
阅读更多...
融媒体服务中PBO进行多重采样抗锯齿（MSAA）

融媒体服务中PBO进行多重采样抗锯齿（MSAA）

如果不理解pbo 那先去了解概念&#xff0c;在此不再解释&#xff0c;这是我为了做融合服务器viewpointserver做的一部分工作&#xff0c;融合服务器的功能是将三维和流媒体&#xff0c;AI融合在一起&#xff0c;viewpointserver会直接读取三维工程的文件&#xff0c;同时融合rt…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023