JavaScript入门分享

文章目录

  • 一、JavaScript简介
  • 二、第一个JavaScript案例
  • 三、在浏览器中执行JavaScript代码
  • 四、JavaScript的输出方法
  • 五、JavaScript的语法
  • 六、JavaScript的数据类型
  • 七、JavaScript的定义变量/函数
  • 八、热门文章

一、JavaScript简介

JavaScript是一种高级编程语言，用于在网页上实现交互和动态性。它是一种面向对象的语言，具有类似于C语言的语法和功能。

JavaScript最初是为了在网页上添加简单的交互功能而创建的，但随着时间的推移，它已经发展成为一种功能强大且广泛使用的语言。它可以用于开发前端和后端应用程序，并且可以在不同的平台和设备上运行。

JavaScript有许多特性和功能，其中一些是：

  1. 语法简洁：JavaScript的语法类似于C语言，易于学习和理解。
  2. 动态类型：JavaScript是一种动态类型语言，不需要明确声明变量的类型，变量的类型可以根据赋值自动推断。
  3. 对象和原型继承：JavaScript使用原型继承，允许对象继承另一个对象的属性和方法。
  4. 弱类型：JavaScript具有松散的类型转换，变量可以自动转换为另一种类型。
  5. 事件驱动编程：JavaScript可以通过事件处理程序对用户的交互做出反应，例如点击按钮、鼠标移动等。
  6. 异步编程：JavaScript支持异步编程模型，可以实现非阻塞的操作，提高程序的响应性能。
  7. 客户端和服务器端开发：JavaScript不仅可以在浏览器中运行，还可以通过Node.js在服务器端运行。

JavaScript可以通过内联方式嵌入在HTML页面中，也可以作为外部文件引用。它可以用于处理表单验证、动态内容更新、动画效果、数据请求等各种任务。

JavaScript是一种功能强大且灵活的编程语言，用于为网页添加交互和动态性，并且已经成为Web开发的基础之一。

二、第一个JavaScript案例

<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>我的第一个JavaScript案例</h1>");
document.write("<p>JavaScript案例描述</p>");
</script>
</body>
</html>

新建一个html文件，用<script></script>包裹JavaScript的代码，document.write 是 JavaScript 中用于向 HTML 输出内容的方法。它允许你直接向浏览器输出 HTML、文本或其他 JavaScript 代码。

三、在浏览器中执行JavaScript代码

在浏览器中可以通过按下 F12 按钮或者右击页面，选择"检查"来开启开发者工具

在这里插入图片描述

在开发者工具中，用var定义变量aa，用console.log输出。

四、JavaScript的输出方法

JavaScript有多种输出方法，以下是其中一些常用的方法及案例代码：

  1. 使用console.log()方法输出到浏览器控制台：
   console.log("Hello, World!");

运行上述代码，会在浏览器的控制台中输出 “Hello, World!”。

  1. 使用alert()方法弹出一个警告框：
   alert("Hello, World!");

运行上述代码，会在浏览器中弹出一个警告框，其中显示 “Hello, World!”。

  1. 使用document.write()方法直接输出到HTML文档：
   document.write("Hello, World!");

运行上述代码，会将 “Hello, World!” 直接写入到HTML文档中。

  1. 使用innerHTML属性将内容插入到HTML元素中：
   <p id="myElement"></p>

   var element = document.getElementById("myElement");
   element.innerHTML = "Hello, World!";

运行上述代码，会将 “Hello, World!” 插入到具有id为 “myElement” 的

元素中。

这些方法都可以用来输出文本、字符串、数字或HTML代码到浏览器，具体使用哪种方法取决于你的需求和应用场景。

五、JavaScript的语法

JavaScript的语法比较灵活，以下是一些常用的语法规则及案例代码：

  1. 声明变量：
   var name = "John";
   let age = 25;
   const PI = 3.14;

上述代码分别使用var、let和const关键字声明了三个变量。var关键字声明的变量是函数作用域的，而let和const关键字声明的变量是块级作用域的。

  1. 数据类型：
   let name = "John"; // 字符串
   let age = 25; // 数字
   let isStudent = true; // 布尔值
   let myList = [1, 2, 3]; // 数组
   let myObject = { name: "John", age: 25 }; // 对象
   let myFunction = function() { // 函数
     console.log("Hello, World!");
   };

JavaScript支持多种数据类型，包括字符串、数字、布尔值、数组、对象和函数。

  1. 条件语句：
   let age = 18;
   if (age < 18) {
     console.log("You're underage.");
   } else if (age >= 18 && age < 65) {
     console.log("You're an adult.");
   } else {
     console.log("You're a senior citizen.");
   }

上述代码使用if-else语句判断年龄，并根据不同的情况输出不同的结果。

  1. 循环语句：
   for (let i = 0; i < 5; i++) {
     console.log(i);
   }

   let fruits = ["Apple", "Banana", "Orange"];
   for (let fruit of fruits) {
     console.log(fruit);
   }

第一个代码块使用for循环输出0到4的数字，而第二个代码块使用for…of循环遍历数组中的元素并输出。

  1. 函数：
   function greet(name) {
     console.log("Hello, " + name + "!");
   }

   greet("John");

上述代码定义了一个名为greet的函数，接受一个参数name，并在控制台输出问候语。

这些只是JavaScript语法的一部分，每个案例代码都可以用来演示不同的语法特性和功能。请根据自己的需求学习和使用适合的语法规则。

六、JavaScript的数据类型

JavaScript中有七种基本的数据类型，分别是：

  1. 字符串（String）：表示文本数据，用引号（单引号或双引号）包裹起来。
   let name = "John";
  1. 数字（Number）：表示数值数据，包括整数和浮点数。
   let age = 25;
  1. 布尔值（Boolean）：表示逻辑值，只有两个值：true（真）和false（假）。
   let isStudent = true;
  1. 数组（Array）：表示一组有序的值，每个值可以是任意类型。
   let numbers = [1, 2, 3, 4, 5];
  1. 对象（Object）：表示一组无序的键值对。
   let person = {
     name: "John",
     age: 25,
     isStudent: true
   };
  1. 空（Null）：表示一个空值。
   let myVariable = null;

  1. 未定义（Undefined）：表示变量没有被赋予一个定义的值。

    let myVariable;

下面是一些使用不同数据类型的案例代码：

let name = "John";
let age = 25;
let isStudent = true;
let numbers = [1, 2, 3, 4, 5];
let person = {
  name: "John",
  age: 25,
  isStudent: true
};
let myVariable = null;
let myUndefinedVariable;

console.log(name);
console.log(age);
console.log(isStudent);
console.log(numbers);
console.log(person);
console.log(myVariable);
console.log(myUndefinedVariable);

上述代码分别声明了不同类型的变量，并通过console.log()方法将它们输出到控制台。你可以根据需要修改或扩展这些示例代码。

七、JavaScript的定义变量/函数

在JavaScript中，可以使用关键字var、let或const来定义变量和函数。

  • 使用var关键字定义变量会将其提升到其作用域的顶部，变量的作用域可以是全局或局部。它可以被重新赋值。
  var x = 5;
  console.log(x); // 输出 5
  • 使用let关键字定义变量具有块级作用域，并且它的值可以被修改。
  let y = 10;
  console.log(y); // 输出 10
  y = 15;
  console.log(y); // 输出 15
  • 使用const关键字定义常量，它的值是恒定不变的，不能被重新赋值。
  const z = 20;
  console.log(z); // 输出 20
  z = 25; // 抛出错误，常量不能被重新赋值
  • 使用function关键字定义函数，可以使用函数表达式或函数声明。

使用函数表达式的示例：

  let add = function(a, b) {
    return a + b;
  };

  console.log(add(2, 3)); // 输出 5

使用函数声明的示例：

  function multiply(a, b) {
    return a * b;
  }

  console.log(multiply(2, 3)); // 输出 6

注意，函数声明在变量声明之前就可以使用，而函数表达式必须在其后面定义才能使用。

以上是JavaScript中定义变量和函数的示例代码。请根据需求进行修改和扩展。

八、热门文章

【温故而知新】JavaScript数字精度丢失问题
【温故而知新】JavaScript的继承方式有那些
【温故而知新】JavaScript中内存泄露有那几种
【温故而知新】JavaScript函数式编程
【温故而知新】JavaScript的防抖与节流
【温故而知新】JavaScript事件循环

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

假期刷题打卡--Day12

假期刷题打卡--Day12

1、MT1128骰子的反面 小码哥抛出一个六面骰子。每个面上都印有一个数字&#xff0c;数字在1到6之间。输入正面的数字&#xff0c;输出对面的数字。 其他情况输出-1。 格式 输入格式&#xff1a; 输入为整型 输出格式&#xff1a; 输出为整型 样例 1 输入&#xff1a; …
阅读更多...
【CANoe使用大全】——工程新建

【CANoe使用大全】——工程新建

文章目录 1、硬件连接2、通道配置2.1通道协议选择2.2映射通道配置2.3.波特率采样点配置 1、硬件连接 前提条件&#xff1a;软件、驱动均已经安装完成 硬件通过UBS接入电脑&#xff0c;Status状态灯为黄色闪烁状态说明硬件设备与电脑连接正常 2、通道配置 2.1通道协议选择 …
阅读更多...
npm i 报一堆版本问题

npm i 报一堆版本问题

1&#xff0c;先npm cache clean --force 再下载 插件后缀加上 --legacy-peer-deps 2&#xff0c; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz failed, reason…
阅读更多...
Linux之安装配置VCentOS7+换源

Linux之安装配置VCentOS7+换源

目录 一、安装 二、配置 三、安装工具XSHELL 3.1 使用XSHELL连接Linux 四、换源 前言 首先需要安装VMware虚拟机&#xff0c;在虚拟机里进行安装Linux 简介 Linux&#xff0c;一般指GNU/Linux&#xff08;单独的Linux内核并不可直接使用&#xff0c;一般搭配GNU套件&#…
阅读更多...
SQL注入示例

SQL注入示例

例一、基础SQL注入&#xff1a;load_file读文件 CISP-PTE 认证考试 首先是有单引号和括号的&#xff0c;首要是要闭合&#xff0c;然后回显点是在-1的位置&#xff0c;读取文件上面的key的话使用的是load_file(/tmp/360/key) id-1)%09ununionion%09select%091,2,3,load_file…
阅读更多...
Open3D 最小二乘拟合二维直线（拉格朗日乘子法）

Open3D 最小二乘拟合二维直线（拉格朗日乘子法）

目录 一、算法原理二、代码实现三、结果展示Open3D 最小二乘拟合二维直线（拉格朗日乘子法）由CSDN点云侠原创。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫。 一、算法原理 平面直线的表达式为： y = k x
阅读更多...
【BIAI】Lecture 8 - EEG data analysis hands on

【BIAI】Lecture 8 - EEG data analysis hands on

Lecture 8 - EEG data analysis hands on 分析流程 Recap: 频域上的分析 Recap: ICA降噪 ICA: 用于从混合信号中分离出独立的成分或因素。它可以将观测到的多个信号分解为相互独立的成分&#xff0c;这些成分在原始信号中可能是混合在一起的。 假设采集EEG信号的帽子上有n个电…
阅读更多...
C语言快速排序（非递归）图文详解

C语言快速排序（非递归）图文详解

前言&#xff1a; 上一期分析了快速排序的三种写法&#xff0c;这三种写法有一个相同点&#xff0c;都是采用递归形式来实现的&#xff0c;那么有没有非递归的方法实现呢&#xff1f;答案是当然有&#xff0c;用非递归的方法实现快速排序&#xff0c;其实可以借助数据结构中的栈…
阅读更多...
docker 部署及命令

docker 部署及命令

一、容器概述 1、为什么要用到容器&#xff1f; ①容器可以屏蔽底层操作系统的差异性&#xff0c;让业务应用不管在哪里都是使用容器的环境运行&#xff0c;从而保证开发测试环境与生产环境的一致性 ②容器部署起来非常便捷和迅速&#xff0c;缩短开发测试部署的周期时间 2…
阅读更多...
关于在Ubuntu20.04（ROS1 noetic）中使用catkin_make编译时发生的与pyhton版本不兼容的问题解决办法

关于在Ubuntu20.04（ROS1 noetic）中使用catkin_make编译时发生的与pyhton版本不兼容的问题解决办法

今天在另外一台电脑上操作复现【ROS建模&#xff1a;一起从零手写URDF模型】这个博客时&#xff0c;发生了一些问题&#xff0c;特此记录下来 【ROS建模&#xff1a;一起从零手写URDF模型】链接&#xff1a;https://blog.csdn.net/qq_54900679/article/details/135726348?spm…
阅读更多...
C++高精度问题

C++高精度问题

高精度前言 C中int不能超过2^31-1&#xff0c;最长的long long也不能超过2^63-1,所以我们在题目中如果碰到了很长很长的数&#xff0c;并且需要进行大数运算时&#xff0c;就需要高精度存储。 高精度总体思路 由于int和long long的限制&#xff0c;我们要想存放很长的数就需…
阅读更多...
数据分析的理念、流程、方法、工具（下）

数据分析的理念、流程、方法、工具（下）

四、用户分群 1、用户分群 用户分群是精细化运营的基础要求&#xff0c;也是数据分析的最基础方式。对用户进行分群&#xff0c;能帮助我们了解每个细分群体用户的变化情况&#xff0c;进而了解用户的整体现状及发展趋势。同时&#xff0c;由于运营资源本身有限&#xff0c;不…
阅读更多...
web开发学习笔记（14.mybatis基于xml配置）

web开发学习笔记（14.mybatis基于xml配置）

1.基本介绍 2.基本使用 在mapper中定义 在xml中定义&#xff0c;id为方法名&#xff0c;resultType为实体类的路径 在测试类中写 3. 动态sql&#xff0c;if和where关键字 动态sql添加<where>关键字可以自动产生where和过滤and或者or关键字 where关键字可以动态生成whe…
阅读更多...
【论文阅读|2024 WACV 多目标跟踪Deep-EloU】

【论文阅读|2024 WACV 多目标跟踪Deep-EloU】

论文阅读|2024 WACV 多目标跟踪Deep-EloU 摘要1 引言&#xff08;Introduction&#xff09;2 相关工作&#xff08;Related Work&#xff09;2.1 基于卡尔曼滤波器的多目标跟踪算法&#xff08;Multi-Object Tracking using Kalman Filter&#xff09;2.2 基于定位的多目标跟踪…
阅读更多...
云原生网关哪家强：Sealos 网关血泪史

云原生网关哪家强：Sealos 网关血泪史

作者&#xff1a;Sealos 创始人&#xff0c;环界云计算 CEO 方海涛 Sealos 公有云 &#xff08;https://cloud.sealos.io&#xff09; 几乎打爆了市面上所有主流的开源网关&#xff0c;本文可以给大家很好的避坑&#xff0c;在网关选型方面做一些参考。 Sealos Cloud 的复杂场…
阅读更多...
opencv011 滤波器03 高斯滤波

opencv011 滤波器03 高斯滤波

今天来学习一下高斯滤波&#xff01;高斯滤波是一种线性平滑滤波&#xff0c;适用于消除高斯噪声&#xff0c;广泛应用于图像处理的减噪过程。通俗的讲&#xff0c;高斯滤波就是对整幅图像进行加权平均的过程&#xff0c;每一个像素点的值&#xff0c;都由其本身和邻域内的其他…
阅读更多...
Android开发之状态栏布局隐藏的方法

Android开发之状态栏布局隐藏的方法

1.问题如下&#xff0c;安卓布局很不协调 2.先将ActionBar设置为NoActionBar 先打开styles.xml 3.使用工具类 package com.afison.newfault.utils;import android.annotation.TargetApi; import android.app.Activity; import android.content.Context; import android.graph…
阅读更多...
Python实现两因素独立设计方差分析，简单效应分析

Python实现两因素独立设计方差分析，简单效应分析

# Python实现两因素独立设计方差分析 1. 背景 1. 有研究者探讨了在不同企业文化下&#xff0c;管理者的不同语言风格所产生的影响 有的企业注重员工的独立性&#xff0c;强调个人努力和内部竞争&#xff1b;有的企业注重员工的整体性&#xff0c;强调团队合作和团队绩效。 …
阅读更多...
MySQL函数—数值函数,随机数验证码生成

MySQL函数—数值函数,随机数验证码生成

MySQL函数—日期函数 函数功能CEIL(x)向上取整FLOOR(x)向下取整MOD(x,y)返回x/y的模&#xff08;取余&#xff09;RAND()返回0-1的随机数ROUND(x,y)求参数x的四舍五入&#xff0c;保留y位小数 1、向上取整&#xff1a;CEIL。只要小数点后的数字大于0就取整。 select CEIL(1.2…
阅读更多...
《Linux C编程实战》笔记：信号的发送

《Linux C编程实战》笔记：信号的发送

信号的发送主要由函数kill、raise、sigqueue、alarm、setitimer以及abort来完成 kill函数 kill函数用来发送信号给指定的进程。 #include<sys/types.h> #include<signal.h> int kill(pid_t pid,int sig); 该函数的行为与第一个参数pid有关&#xff0c;第二个参…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站