JavaScript——前端基础3

news2025/7/11 10:21:19

目录

JavaScript简介

优点

可做的事情

运行

第一个JavaScript程序

搭建开发环境

安装的软件

操作

在浏览器中使用JavaScript文件

分离JS

使用node运行JS文件

语法

变量与常量

原生数据类型

模板字符串

字符串的内置方法

数组

对象

对象数组和JSON

if条件语句

三目运算符

switch条件语句

for和while循环


 

JavaScript简介

  1. JavaScript 是一种轻量级的脚本语言。

  2. 脚本语言:不具备开发操作系统的能力,只用来编写控制其他大型应用程序的“脚本”。

  3. JavaScript 是一种嵌入式(embedded)语言。核心语法不多

优点

  • 操控浏览器的能力

  • 广泛的使用领域

  • 易学性

可做的事情

  • Web/移动端App

  • 实时联网App

  • 命令行工具

  • 游戏

运行

  • 浏览器:有JavaScript引擎

  • Node:包含谷歌浏览器、v8引擎的C++程序。使其可以在浏览器外面跑JavaScript程序。意味着可以用JavaScript程序给网页/移动端app做后端

第一个JavaScript程序

  1. 打开浏览器,Fn+F12

  2. 在控制台console中可以编写JavaScript

  3.  
    
    console.log();//打印

搭建开发环境

安装的软件

  • vscode

  • node.js(安装后一定要重启才会生效)

    1. 执行JavaScript代码

    2. 安装第三方库

操作

  • 在vscode中安装插件:live server

  • 右键文件,open with live server

    • 打开电脑的默认浏览器

    • 页面会自动刷新

在浏览器中使用JavaScript文件

  • 在html文件中,将script标签放在body标签的末尾

    • 浏览器解析文件是自上而下的,需要先将内容渲染出来

分离JS

  • 将JS代码从html文件中剥离出去

  • 创建一个js文件,将js语句写入文件中

  • 在html文件中的script标签中引入js文件

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

使用node运行JS文件

  • 在win+r的命令中输入node --version,判断是否安装好了

  • ctrl+`:快捷键打开vscode的终端

  • 输入node 文件名.js:会在终端中输入js文件中的语句

    • 像浏览器一样执行出同样的结果

    • node是用来运行JS的运行环境

语法

  • JS文档

    JavaScript 指南 - JavaScript | MDN Web 中文网

变量与常量

  1. 变量

    • var:全局变量(最好不用)

    • let

  2. 常量

    • const

原生数据类型

  1. String

  2. Number

  3. Boolean

  4. null

    • 一个值被定义为空

  5. underfined

    • 不存在被定义

 //String Number Boolean null underfined
 const username="John";
 const year=2025;
 const rate=4.5;
 const isCool=true;
 const x=null;
 const y=undefined;
 let z;
 console.log(typeof username);//输出数据类型

模板字符串

  1. 连接字符串

     //连接(老方法)
     console.log("My name is "+username+" and I am "+age);
     //模板字符串
     console.log(`My name is ${username} and I am ${age}`);

字符串的内置方法

 const s="Hello World";
 console.log(s.length);//字符串长度
 console.log(s.toUpperCase());//全部大写
 console.log(s.toLowerCase());//全部小写
 console.log(s.substring(0,5));//分割字符,起始和终止,左闭右开
 console.log(s.substring(0,5).toUpperCase());//方法结合
 console.log(s.split());//字符串转换成数组
 console.log(s.split(''));//最小分割
 const m='technology, computers,it, code';
 console.log(m.split(','));//逗号分割

数组

 //数组,两种申明方式
 const Number=new Array(1,2,3,4,5);
 const fruits=['apple','pear','banana'];
 console.log(Number);
 console.log(fruits[1]);//pear
 fruits[2]="orange";//const申明的数组可以被改变内部
 fruits.push("mango");//数组末尾增加元素用push
 fruits.unshift('strawberries');//数组头部添加元素strawberries
 console.log(fruits);
 fruits.pop(fruits);//删除数组末尾的元素
 console.log(fruits);
 console.log(Array.isArray(fruits));//判断是否是数组
 console.log(fruits.indexOf("orange"));//得到特定元素的索引

对象

 //对象:拥有属性和方法的数据,表示为键值对的组合
 //申明一个person变量,{}包含对象,键值对申明属性
 const person={
     firstName:"John",
     lastName:"Doe",
     age:30,
     hobbies:['music','movies','sports'],
     address:{
         street:"50 main st",
         city:"Boston",
         state:"MA",
     },
 };
 person.email="john@gmail.com";//增加属性
 console.log(person);
 console.log(person.firstName,person.lastName);//访问选中的属性
 //结构,更高级的操作
 //用同名的变量将值从person中抽取出来
 const {
     firstName,
     lastName,
     address:{city},
 }=person;
 console.log(city);

对象数组和JSON

  • 网站:freeformatter.com 将对象数组复制粘贴-formatted json-会给我们自动生成json格式的数据

     [
         {
             id:1,
             text:"Take out trash",
             isCompleted:true,
         },
         {
             id:2,
             text:"Meeting with boss",
             isCompleted:true,
         },
         {
             id:3,
             text:"Dentist appt",
             isCompleted:false,
         },
     ]
  • //对象数组
    const tools=[
        {
            id:1,
            text:"Take out trash",
            isCompleted:true,
        },
        {
            id:2,
            text:"Meeting with boss",
            isCompleted:true,
        },
        {
            id:3,
            text:"Dentist appt",
            isCompleted:false,
        },
    ];
    console.log(tools);
    console.log(tools[1].text);
    //Json是一种数据格式,常被用在api和服务器与客户端的数据传输过程中
    //Json和对象数组类似
    //将JS转化为json格式
    const todoJSON=JSON.stringify(tools)
    console.log(todoJSON);

if条件语句

//if条件语句
//===三等号会考虑数据类型(更常用)
//==双等号不会考虑:10 '10'一样
//||或,&&与
const n=10;
const b=4;
if(n===10||b===4){
    console.log("n is 10 and b is 4");
}else if(n>10){
    console.log("n is greater than 10");
}else{
    console.log("n is less than 10");
}
if(n=='10'&&b==4){
    console.log("n is 10 and b is 4");
}

三目运算符

//三目运算符(前为真 后为假。?:)
const c=10;
const color=x>10?'red':'blue';
console.log(color);

switch条件语句

//switch语句,一种条件语句
switch(color){
    case 'red':
        console.log("color is red");
        break;
    case 'blue':
        console.log("color is blue");
        break;
    default:
        console.log("color is not red or blue");
}

for和while循环

//For
 for(let i=0;i<10;i++){
     console.log(i);
     console.log(`For Loop Number:${i}`);
 }
 console.log("");
 for(let i=0;i<tools.length;i++){
     console.log(tools[i].text);
 }
 console.log("");
 //另一种for的写法
 for(let todo of tools){
     console.log(todo.text);
 }
 console.log("");
 //while
 let i=0;
 while(i<10){
     console.log(`For Loop Number:${i}`);
     i++;
 }

 

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

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

相关文章

视频推拉流EasyDSS点播平台云端录像播放异常问题的排查与解决

EasyDSS视频直播点播平台是一个功能全面的系统&#xff0c;提供视频转码、点播、直播、视频推拉流以及H.265视频播放等一站式服务。该平台与RTMP高清摄像头配合使用&#xff0c;能够接收无人机设备的实时视频流&#xff0c;实现无人机视频推流直播和巡检等多种应用。 最近&…

简单说一下什么是RPC

部分内容来源&#xff1a;JavaGuide RPC是什么 RPC是远程调用 RPC的原理 RPC的五个部分 为了能够帮助小伙伴们理解 RPC 原理&#xff0c;我们可以将整个 RPC 的核心功能看作是下面 5 个部分实现的&#xff1a; 客户端&#xff08;服务消费端&#xff09;&#xff1a;调用…

Pany-v2:LFI漏洞探测与敏感文件(私钥窃取/其他)自动探测工具

地址:https://github.com/MartinxMax/pany 关于Pany-v2 Pany-v2 是一款 LFI&#xff08;本地文件包含&#xff09;漏洞探测工具&#xff0c;具备自动识别敏感文件的能力。它能够利用 LFI 漏洞检测并提取 id_rsa 私钥、系统密码文件以及其他可能导致安全风险的敏感信息。该工具…

北京大学DeepSeek与AIGC应用(PDF无套路下载)

近年来&#xff0c;人工智能技术飞速发展&#xff0c;尤其是大模型和生成式AI&#xff08;AIGC&#xff09;的突破&#xff0c;正在重塑各行各业的生产方式与创新路径。 北京大学联合DeepSeek团队推出的内部研讨教程《DeepSeek与AIGC应用》&#xff0c;以通俗易懂的方式系统解…

Vue进阶之Vue2源码解析

Vue2源码解析 源码解析目录解析package.json入口查找入口文件确定vue入口this.\_init_ 方法$mount 挂载方法Vue.prototype._renderVue.prototype._updateVue.prototype._patch vue2 vue3 源码解析 目录解析 vue2.6之后的版本都做的是兼容Vue3的内容&#xff0c;2.6版本前的内…

unity lua属性绑定刷新

我们现在有一个 角色属性类叫heroModel,内容如下,当heroModel中的等级发生变化的时候&#xff0c;我们需要刷新界面显示等级信息&#xff0c;通常我们是在收到等级升级成功的协议的时候&#xff0c;发送一个事件&#xff0c;UI界面接受到这个事件的时候&#xff0c;刷新一下等级…

Ubuntu20.04安装Redis

目录 切换到root用户 使用 apt install redis 安装redis 修改配置文件 ​编辑 重新启动服务器 使用Redis客户端连接服务器 切换到root用户 如果没有切换到root用户的&#xff0c;切换到root用户。 使用 apt install redis 安装redis 遇到y/n直接y即可。 redis安装好之…

OSPF BIT 类型说明

注&#xff1a;本文为 “OSPF BIT 类型 | LSA 类型 ” 相关文章合辑。 机翻&#xff0c;未校。 15 OSPF BIT Types Explained 15 种 OSPF BIT 类型说明 Rashmi Bhardwaj Distribution of routing information within a single autonomous system in larger networks is per…

【深度学习】强化学习(RL)-A3C(Asynchronous Advantage Actor-Critic)

A3C&#xff08;Asynchronous Advantage Actor-Critic&#xff09;详解 A3C&#xff08;Asynchronous Advantage Actor-Critic&#xff09; 是 深度强化学习&#xff08;Deep Reinforcement Learning, DRL&#xff09; 领域的重要算法&#xff0c;由 DeepMind 在 2016 年提出。…

在 Mac mini M2 上本地部署 DeepSeek-R1:14B:使用 Ollama 和 Chatbox 的完整指南

随着人工智能技术的飞速发展&#xff0c;本地部署大型语言模型&#xff08;LLM&#xff09;已成为许多技术爱好者的热门选择。本地部署不仅能够保护隐私&#xff0c;还能提供更灵活的使用体验。本文将详细介绍如何在 Mac mini M2&#xff08;24GB 内存&#xff09;上部署 DeepS…

docker-compose部署onlyoffice8.3.0并支持ssl,且支持通过nginx代理,关闭JWT配置

编写docker-compose文件 mkdir -p /data/onlyoffice && echo "version: 3services:onlyoffice:container_name: OnlyOfficeimage: onlyoffice/documentserver:8.3.0restart: alwaysports:- 8088:80- 64431:443environment:TZ: Asia/ShanghaiJWT_ENABLED: falsevol…

【tplink】校园网接路由器如何单独登录自己的账号,wan-lan和lan-lan区别

老式路由器TPLINK&#xff0c;接入校园网后一人登录&#xff0c;所有人都能通过连接此路由器上网&#xff0c;无法解决遂上网搜索&#xff0c;无果&#xff0c;幸而偶然看到一个帖子说要把信号源网线接入路由器lan口&#xff0c;开启新世界。 一、wan-lan&#xff0c;lan-lan区…

DeepSeek开源周Day5压轴登场:3FS与Smallpond,能否终结AI数据瓶颈之争?

2025年2月28日&#xff0c;DeepSeek开源周迎来了第五天&#xff0c;也是本次活动的收官之日。自2月24日启动以来&#xff0c;DeepSeek团队以每天一个开源项目的节奏&#xff0c;陆续向全球开发者展示了他们在人工智能基础设施领域的最新成果。今天&#xff0c;他们发布了Fire-F…

[密码学实战]Java实现SM2数字信封(结合SM4对称加密)生成与解析

一、代码运行结果 二、什么是数字信封 2.1 基本概念 数字信封(Digital Envelope) 是一种结合对称加密与非对称加密的混合加密技术,通过以下步骤实现高效安全的数据传输: 对称加密:使用SM4算法加密原始数据,处理速度快,适合大数据量。非对称加密:使用SM2公钥加密SM4密…

Oracle 查询表空间使用情况及收缩数据文件

本文介绍Oracle收缩数据文件的相关操作&#xff0c;运维工作中有时会需要通过收缩数据文件来释放磁盘空间。 数据文件初始化方式&#xff1a; 1.我们创建表空间一般有两种方式初始化其数据文件&#xff0c;即指定初始大小为32G&#xff08;很大的值&#xff09;或指定初始大小为…

Grafana接入Zabbix数据源

1. 对接 Zabbix 1.1 安装 Zabbix 插件 在线安装&#xff1a; 1.2 配置 Zabbix 数据源 点击 Configuration > Data Sources > Add data source。选择 Zabbix&#xff0c;填写&#xff1a; URL&#xff1a;http://<zabbix-server>/api_jsonrpc.phpUsername&#x…

华为在不同发展时期的战略选择(节选)

华为在不同发展时期的战略选择&#xff08;节选&#xff09; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 来源&#xff1a;谢宁专著《华为战略管理法&#xff1a;DSTE实战体系》。本文有节选修改。 导言 从目前所取得的成就往回看&#xff0c;华为…

lua基础语法学习

lua基础语法学习 文章目录 lua基础语法学习1. 基础2. 输入输出3. 分支结构与循环结构4. 函数5. 元表与元方法6. 面向对象 1. 基础 注释 --单行注释--[[ 多行注释 --]]标识符 标识符以一个字母 A 到 Z 或 a 到 z 或下划线 _ 开头后加上 0 个或多个字母&#xff0c;下划线&…

【个人开发】deepspeed+Llama-factory 本地数据多卡Lora微调【完整教程】

文章目录 1.背景2.微调方式2.1 关键环境版本信息2.2 步骤2.2.1 下载llama-factory2.2.2 准备数据集2.2.3 微调模式2.2.3.1 zero-1微调2.2.3.2 zero-2微调2.2.3.3 zero-3微调2.2.3.4 单卡Lora微调 2.2.4 实验2.2.4.1 实验1&#xff1a;多GPU微调-zero12.2.4.2 实验2&#xff1a;…

【SpringBoot】数据访问技术spring Data、 JDBC、MyBatis、JSR-303校验

Spring Boot 数据访问技术及特性 目录标题 Spring Boot 数据访问技术及特性摘要1. 引言2. Spring Data架构与原理2.1 Spring Data概述2.2 Spring Data核心组件2.3 Spring Boot与Spring Data的集成机制 3. Spring Boot与JDBC的整合3.1 JDBC整合流程3.2 数据源自动配置3.3 JdbcTe…