0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

JavaScript的基础知识和代码写法说明

Wildesbeast 来源:今日头条 作者:小白冲冲冲冲 2020-02-13 14:20 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

JavaScript基础概念

JS的组成:

1.ECMAScript:Js语法

2.DOM:文档对象模型 , 文档:html文档 ,操作html文档 (操作html文档的工具)

3.BOM:浏览器对象模型 , 操作浏览器的工具

JS的三种书写方式

行内式,内嵌式,外部链接

JavaScript输入·输出语句

alert(msg) 浏览器弹出警告框

consle.log(msg) 浏览器控制台打印输出信息

prompt(info) 浏览器弹出输入框 用户可以输入信息

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

变量的概念

通俗:变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改。

变量理解:变化的量,变化的内容,变化的数据

变量存储数据理解:程序运行过程中的数据存储在内存中,但是内存比较大,为了方便管理,所以将内存分成一个一个的盒子(变量)来存储

变量的使用

1.声明变量 var 变量名;var age;(声明一个 名称为age 的变量)

2.变量的赋值 var 变量名 = 值; var age = 18; 声明变量age同时赋值为 18

变量案例

var myname = '旗木卡卡西'; // 字符串 var address = '火影村'; var age = 30; // 数字 var email = 'kakaxi@itcast.cn'; var gz = 2000; console.log(myname); console.log(address); console.log(age); console.log(email); console.log(‘gz’); // gz console.log(gz); // 2000

注意:

变量赋值时,值如果是字符串需要添加’’,“”

每行代码结束,都需要添加;

变量在使用时,不能添加引号 (定义,声明变量的时候,没有引号,使用的时候自然也不能添加引号)
案例2:

// 1. 用户输入姓名 存储到一个 myname的变量里面 var myname = prompt('请输入您的名字'); // prompt 做的事情: // (1). 弹出输入框 , 用户输入内容:zs // (2). 将用户输入内容返回 ,相当于 :var myname = 'zs'; // 2. 输出这个用户名 alert(myname); // zs

变量命名规范

规则

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name ***

严格区分大小写。var app; 和 var App; 是两个变量

不能 以数字开头。 18age 是错误的

不能 是关键字、保留字。例如:var、for、while

变量名必须有意义。 MMD BBD nl → age

遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName

推荐翻译网站: 有道 爱词霸

变量案例-交换两个变量

// js 是编程语言有很强的逻辑性在里面: 实现这个要求的思路 先怎么做后怎么做 // 1. 我们需要一个临时变量帮我们 // 2. 把apple1 给我们的临时变量 temp // 3. 把apple2 里面的苹果给 apple1 // 4. 把临时变量里面的值 给 apple2 var temp; // 声明了一个临时变量为空 var apple1 = '青苹果'; var apple2 = '红苹果'; temp = apple1; // 把右边给左边 apple1 = apple2; apple2 = temp; console.log(apple1); console.log(apple2);

简单数据类型
JavaScript 中的简单数据类型及其说明如下:


数字型范围:JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308 (10的正308次方)alert(Number.MIN_VALUE); // 5e-324 5e-324 (10的负324次方)

数字型三个特殊值

alert(Infinity); // Infinity alert(-Infinity); // -Infinity alert(NaN); // NaN *** //课堂代码: // 5. 无穷大 console.log(Number.MAX_VALUE * 2); // Infinity 无穷大 // 6. 无穷小 console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大 // 7. 非数字 console.log('pink老师' - 100); // NaN:字符串是无法与数字进行运算的,所以结果是一个非数字

Infinity ,代表无穷大,大于任何数值

-Infinity ,代表无穷小,小于任何数值

NaN ,Not a number,代表一个非数值

isNaN
用来判断一个变量是否为非数字的类型,返回 true 或者 false

var usrAge = 21; var isOk = isNaN(userAge); console.log(isNum); // false ,21 不是一个非数字 var usrName = "andy"; console.log(isNaN(userName)); // true ,"andy"是一个非数字

字符串型 String
字符串型可以是引号中的任意文本,其语法为 双引号 “” 和 单引号’’

var strMsg = "我爱北京***~"; // 使用双引号表示字符串 var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串 // 常见错误 var strMsg3 = 我爱大肘子; // 报错,没使用引号,会被认为是js代码,但js没有这些语法

字符串引号嵌套
JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)

var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''// 常见错误var badQuotes = 'What on earth?"; // 报错,不能 单双引号搭配

字符串转义符

类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。

转义符都是 \ 开头的,常用的转义符及其说明如下:

字符串长度

字符串是由若干字符组成的,这些字符的数量就是字符串的长度

通过字符串的length属性可以获取整个字符串的长度

var strMsg = "我是帅气多金的程序猿!";alert(strMsg.length); // 显示 11

字符串拼接

多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串

//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 数值字符串 "相加" alert('100' + '100'); // 100100 //1.3 数值字符串 + 数值 alert('11' + 12); // 1112 //以上的字符串拼接都没有意义,一般我们字符串会与变量进行拼接

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 浏览器
    +关注

    关注

    1

    文章

    1043

    浏览量

    37254
  • 字符
    +关注

    关注

    0

    文章

    237

    浏览量

    26348
  • javascript
    +关注

    关注

    0

    文章

    526

    浏览量

    56661
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    2026年Java 24新特性实战:用Gemini快速掌握虚拟线程与流式编程

    这种学习曲线拉平。 答案胶囊 :Gemini在Java新特性学习中扮演“即时文档翻译+实战代码生成器”的角色。你可以让它联网读取OpenJDK官方JEP,然后用中文总结核心原理、对比旧写法与新写法,并生成可直接编译的示例
    的头像 发表于 06-07 22:18 75次阅读

    TCP三次握手和四次挥手的基础知识

    TCP 三次握手和四次挥手是网络基础知识中的基础,面试时能背出来的人很多,但真正遇到生产环境问题需要排查时,很多人就傻眼了。比如:连接建立后客户端马上断开是怎么回事?为什么 TIME_WAIT 状态的连接这么多?服务端为什么会产生大量 CLOSE_WAIT?RST 报文什么时候会出现?
    的头像 发表于 05-25 11:02 413次阅读

    学习STM32单片机,从菜鸟到牛人应该怎么走?

    第一步 编程及硬件基础知识 1.掌握C语言基础 作为STM32的主要编程语言,C语言的基础知识是必不可少的。建议通过书籍、在线课程或者教学视频系统地学习C语言的基础知识,包括语法、数据类型
    发表于 05-11 15:38

    基于JavaScript的仿生交互桌面机器人开源项目介绍

    轻量化嵌入式开发早已成为创意装置设计的主流方向,传统嵌入式开发受语言门槛、编译环境、硬件适配限制,研发成本居高不下。这作为一款基于 M5Stack 架构打造的桌面仿生机器人,以 JavaScript
    的头像 发表于 05-06 11:26 611次阅读
    基于<b class='flag-5'>JavaScript</b>的仿生交互桌面机器人开源项目介绍

    工作流代码节点说明工作流代码节点说明

    代码节点支持通过编写代码来生成返回值。平台支持在代码节点内使用IDE工具,通过编写自定义代码逻辑,来处理输入参数并返回相应结果。注意:代码
    发表于 03-26 16:56

    HPM知识库 | [EtherCAT] 从站运行过程中报错(错误码:0x1A\\0x1B\\0x2C)的代码分析

    ://kb.hpmicro.com/一、背景本文将以SSC从站协议栈代码为例,分析EtherCAT从站运行过程中报错(错误码:0x1A\0x1B\0x2C),说明协议栈的检测
    的头像 发表于 03-13 08:34 485次阅读
    HPM<b class='flag-5'>知识</b>库 | [EtherCAT] 从站运行过程中报错(错误码:0x1A\\0x1B\\0x2C)的<b class='flag-5'>代码</b>分析

    labview编程及基础知识分享

    最近建了一个公众号,本人会在上面进行labview编程知识的分享,欢迎大家关注;公众号叫:上位机知识分享LABVIEW
    发表于 02-13 10:08

    阻燃系列基础知识

    我很荣幸有机会在这里与大家分享我对阻燃系列基础知识的研究。今天,我们将探讨的主题是“阻燃系列基础知识”。在我们日常生活中,火灾事故频发,造成巨大的财产损失和人员伤亡。因此,了解阻燃材料的基础知识对于
    的头像 发表于 02-06 08:07 799次阅读
    阻燃系列<b class='flag-5'>基础知识</b>

    嵌入式基础知识-系统调度

    恢复任务的优先级高于正在运行任务的优先级,则会发生任务切换,将该任务将再次转换任务状态,由就绪态变成运行态。 5、总结 本篇介绍了系统调度的基础知识,包括进程的三种基本状态,进程切换,AUTOSAR与RTOS的任务切换基础知识
    发表于 12-16 08:15

    无刷电机驱动器的基础知识

    本文将从技术角度出发,对三相无刷电机的电机驱动器的作用、种类和规格进行介绍。通过本文,您可以学习到电机驱动器选型所需的基础知识
    的头像 发表于 12-10 14:13 7114次阅读
    无刷电机驱动器的<b class='flag-5'>基础知识</b>

    Linux驱动开发的必备知识

    内核基础知识: 1、熟悉 Linux 内核的架构、模块系统、进程管理、内存管理等。 了解内核的编译和加载过程。 2、C编程技能: 精通 C 语言编程,包括指针操作、内存管理、结构体等
    发表于 12-04 07:58

    RK 平台 Vendor Storage 开发指南:基础知识、流程与实用技巧

    备可靠性校验、掉电恢复等关键特性,是保障设备身份标识、功能授权等核心信息安全的重要组件。本文将从基础知识、开发流程、使用途径三方面,为开发者梳理完整的开发逻辑。 一、核心基础知识:了解 Vendor Storage 是什么? 1. 核心定位与核心特性 Vendor Sto
    的头像 发表于 11-22 07:11 1627次阅读
    RK 平台 Vendor Storage 开发指南:<b class='flag-5'>基础知识</b>、流程与实用技巧

    视觉工程师必须知道的工业相机基础知识

    工业相机基础知识概述。
    的头像 发表于 09-19 17:04 1965次阅读
    视觉工程师必须知道的工业相机<b class='flag-5'>基础知识</b>

    如何用Renix实现网络测试自动化: 从配置分离到多厂商设备支持

    文章主要介绍如何使用Renix高层封装API编写自动化脚本的基础知识和技巧。只要您熟悉测试流程,不需要很强的代码能力就可以顺利编写自动化测试。 本教程将以实践为导向,引导您逐步掌握Renix高层封装API Python编码的基础知识
    的头像 发表于 08-27 15:21 884次阅读
    如何用Renix实现网络测试自动化: 从配置分离到多厂商设备支持

    ArkUI-X平台桥接Bridge说明

    介绍如何通过平台桥接编写自定义的Android、iOS平台代码。ArkUI侧具体用法请参考Bridge API,Android侧参考BridgePlugin,iOS侧参考BridgePlugin
    发表于 06-19 23:12