JavaScript快速入门一

概述

  • JavaScript = ECMAScript + JavaScript特有的东西(BOM + DOM)
    • ECMAScript客户端脚本语言,是欧洲计算机制造商协会ECMA,制定的标准,统一了所有客户端脚本语言的编码方式
    • BOM:Browser Object Model,浏览器对象模型,将浏览器的各个组成部分封装成对象。
    • DOM:Document Object Model,文档对象模型,将标记语言文档的各个组成部分,封装成对象,使用这些对象,对标记语言文档进行 CRUD 动态操作

基本语法

  • 内部JS,在HTML页面任何位置,定义,但是定义的位置会影响执行顺序

  • 外部JS,在外部定义个 .js 文件,通过以下命令引入

    <!-- 名字是自己定义的 --> 
    <script src="Learn.js"></script>
    

    注意:上述的 JS 都得定义在 标签中

数据类型
  • 原始数据类型
    • number:数字、整数、小数、NaN(Not a number 一个不是数字的数字类型)
    • string:字符串
    • boolean:布尔类型,true 和 false
    • null:一个对象为空的占位符
    • undefined:未定义类型,一个变量没有给初始值,则默认赋值为 undefined
  • 引用数据类型
    • 对象(Object):可以包含多个键值对,也可以包含函数作为其中的方法
    • 数组(Array):特殊类型的对象
    • 函数(Function):可以被赋值给变量,也可以作为参数传递给其他函数
    • 日期(Date):用于处理日期和时间
    • 正则表达式(RegExp):处理字符串的模式匹配
变量
  • 语法

    var 变量名 = 初始化值;
    
  • 注意

    • java 是强类型语言,强类型语言开辟变量空间时,定义了空间未来存储的数据类型。
    • JavaScript 是弱类型语言,弱类型语言开辟变量空间时,不定义了空间未来存储的数据类型,可以存放任意类型的数据。
    • null 运算后得到的是 Object 类型
运算符
  • 概述:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换

  • 类型转换

    • string 转 number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
    • boolean 转 number:true转为1,false转为0
    • number 转 boolean:0或NaN为假,其他为真
    • string 转 boolean:除了空字符串(“”),其他都是true
    • null undefined 转 boolean:都是false
    • 对象 转 boolean:所有非空对象都为true,空对象为 false
  • 比较运算符

    • “===”:全等于
    类型相同:直接比较字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止
    类型不同:先进行类型转换,再比较===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
  • 分支结构

    • JavaScript 可以接受所有原始数据类型
  • var 关键字在函数中

    • 用 var 定义的变量是局部变量
    • 不用 var 定义的变量是全局变量(不太建议)

注意:以上写的只是和 Java 中有区别的一些特性,其他和Java中一致


基本对象

Function(函数)
  • 概述:这个函数就是一个对象

  • 创建函数格式

    // 格式一
    function 方法名称(形式参数列表){方法体
    }
    // 格式二
    var 方法名 = function(形式参数列表){方法体
    }
    
  • 方法调用格式

    // 实际参数列表,根据自己需要的个数填写
    方法名称(实际参数列表);// 例如:下述调用的都是一个 add() 方法
    add(1,2);
    add(1,2,3);
    add(true,1);
    
  • 方法(函数)的特点

    • 方法定义时,形参的类型不写、返回值类型也不写
    • 方法是一个对象,如果定义名称相同的方法,会覆盖之前的同名方法
    • 在JavaScript中,方法的调用只和方法的名称有关和参数列表无关
    • 在方法声明中有一个隐藏的内置对象(数组)-arguments 封装所有实参
  • 示例代码

    <script>/* 方法的定义:不写形参、不写返回值类型 */function add(){// 定义一个求和变量 sumvar sum = 0;for(var i = 0; i < arguments.length; ++i){sum += arguments[i];}return sum;}    /* 方法的调用:只和方法名有关,实参自己随意写 */var sum = add(1,2,3,4,5);/* 弹出 */alert(sum);
    </script>
    
Array(数组)
  • 概述:这是一个数组对象

  • 数组特点

    • 数组元素的类型是可变的
    • 数组长度是可变的
  • 创建数组格式

    // 格式一
    var arr = new Array(元素列表);
    // 格式二
    var arr = new Array(默认长度);
    // 格式三
    var arr = [元素列表];
    
  • 常用方法和属性

    方法和属性(带括号是方法,不带括号是属性)作用
    length计算数组的长度
    join(参数)将数组中的元素按照指定的分隔符拼接为字符串
    push()向数组的末尾添加一个或更多元素,并返回新的长度
  • 示例代码

    <script>// 格式一:定义一个数组alert("arr1数组:");var arr1 = new Array(1,2,3,4);for(var i = 0; i < arr1.length; ++i){alert(arr1[i]);}alert("arr2数组:");// 格式二:定义一个数组var arr2 = new Array(2);/* 数组末尾添加 */let len = arr2.push(9,8);/* 输出数组新的长度 4,前两个都是未定义 */alert(len);for(var i = 0; i < arr2.length; ++i){alert(arr2[i]);}// 格式三:定义一个数组alert("arr3数组:");var arr3 = [1,true,'a','cd'];let s = arr3.join("-");alert(s);
    </script>
    
Date(日期)
  • 概述:日期对象

  • 创建格式

    var date = new Date();
    
  • 常用方法

    方法作用
    toLocalString()返回当前 date 对象对应的时间 本地字符串格式
    getTime()获取毫秒值,返回当前对象描述的时间到 1970.1.1 号零点的毫秒值差
  • 示例代码

    <script>// 创建日期对象var date = new Date();// 调用方法let time = date.toLocaleDateString();// 弹出当前年月日alert(time);// 获取时间差let time1 = date.getTime();// 弹出毫秒差alert(time1);
    </script>
    
RegExp(正则表达式)
  • 概述:正则表达式对象,定义字符串的组成规则

  • 格式

    • 单个字符:[]
      • 例如:[a]、[ab]、[a-z]、[A-Z]、[0-9]
      • 特殊符号代表特殊含义的单个字符
        • \d:单个数字字符 [0-9]
        • \w:单个单词字符 [a-z A-Z 0-9 _ ]
    • 量词符号
      • :表示出现 0 次或者 1次
      • *: 表示出现 0 次或者 多次
      • +: 表示出现 1 次或者 多次
      • {m,n}:表示 m <= 数量 <= n
        • m 如果缺省,{,n} 最多 n 次
        • n 如果缺省,{m,}最少 m 次
    • 开始结束符号
      • ^:开始符号
      • $:结束符号
  • 正则对象创建格式

    // 格式一
    var reg = new RegExp("正则表达式");
    // 格式二
    var reg = /正则表达式/;
    
  • 常用方法

    方法作用
    test(参数)验证指定的字符串是否符合正则定义的规范
  • 示例代码

    <script>// 创建 正则表达式对象,规则是:匹配长度为 6到12 个字符的数字字母下划线var reg = new RegExp("^\\w{6,12}$");// var reg = /^\w{6,12}$/;let a = reg.test("123_anc");let b = reg.test("an");alert(a);alert(b);
    </script>
    
Global(全局)
  • 概述:全局对象,Global 中封装的方法不需要对象就可以直接调用

  • 调用格式

    方法名();
    
  • 常用方法

    方法作用注意
    encodeURI()url 编码
    decodeURI()url 解码
    encodeURIComponent()url 编码编码的字符更多
    decodeURIComponent()url 解码
    parseInt()将字符串转为数字逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为 number
    isNaN()判断一个值是否是 NaNNaN 六亲不认,连自己都不认,NaN参与的 == 比较全为 false
    eval()JavaScript字符串,并把它作为脚本代码来执行并不太建议使用
  • 示例代码

    <script>/* 将特殊字符转为相应的编码格式,空格转换为 %20 */var url = "https://www.example.com/search?q=" + encodeURIComponent("JavaScript Tutorial");alert(url);/* 解码 */let durl = decodeURIComponent(url);alert(durl);/* 转换为数字 */var s = "123a4";let number = parseInt(s);alert(number);/* 判断 */var a = "abc";let b = isNaN(a);alert(b);
    </script>
    

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

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

相关文章

C#调用C动态链接库

前言 已经没写过博客好久了&#xff0c;上一篇还是1年半前写的LTE Gold序列学习笔记&#xff0c;因为工作是做通信协议的&#xff0c;然后因为大学时没好好学习专业课&#xff0c;现在理论还不扎实&#xff0c;不敢瞎写&#xff1b; 因为工作原因&#xff0c;经常需要分析一些字…

Gin之gin介绍和安装

1、gin介绍 1.1 gin 是什么&#xff1f; Gin 是一个用 Go (Golang) 编写的 HTTP web 框架。 它是一个类似于 martini 但拥有更好性能的 API 框架&#xff0c;由于 httprouter&#xff0c;速度提高了近 40 倍。如果你需要极好的性能&#xff0c;使用 Gin 吧。 https://githu…

Unity-Arduino Bluetooth Plugin蓝牙插件使用时需要注意的一些事项(附插件下载链接)

一些参考链接 1.Android 无法扫描蓝牙设备踩坑 2.权限相关 1-首先要明确你的蓝牙设备是经典蓝牙还是低功耗&#xff08;BLE)蓝牙&#xff1a; 转载&#xff1a;Android蓝牙开发—经典蓝牙和BLE&#xff08;低功耗&#xff09;蓝牙的区别 2.如果是BLE蓝牙&#xff0c;需要打勾…

display布局实现一侧的盒子高度与另一侧盒子的高度等高

实现两边容器的高度等高主要是用 align-items: stretch 这个属性 stretch 拉伸: 子元素没有高度或高度为auto&#xff0c;将占满整个容器的高度 <template><div><h3>我是测试页面</h3><div class"container"><div class"left-…

原码,补码的除法

目录 一.原码的除法 &#xff08;1&#xff09;恢复余数法 重点看这 &#xff08;2&#xff09;不恢复余数法&#xff08;加减交替法&#xff09; 重点看这 二. 补码除法运算 重点看这 我们已经学习了如何进行原码&#xff0c;补码的乘法&#xff1a; http://t.csdnimg…

RibbonGroup 添加QAction下拉带Menu

实现代码如下所示&#xff1a; { QMenu* pMenu new QMenu(this); pMenu->addAction(QIcon(":/QRibbonDemo/res/smallpaste.png"), tr("Menu1")); pMenu->addAction(QIcon(":/QRibbonDemo/res…

Django随笔

关于Django的admin 1. 在url中把 from django.contrib import admin 重新解开 把path(admin/,admin.site.urls), 解开 2. 注册app&#xff0c;在配置文件中写 django.contrib.admin, 3.输入命令进行数据库迁移 Django国际化 配置文件中&#xff08;改成中文&#xff09; LA…

NLP自然语言处理介绍

自然语言处理&#xff08;NLP&#xff0c;Natural Language Processing&#xff09;是一门涉及计算机与人类语言之间交互的学科。它的目标是使计算机能够理解和生成人类语言&#xff0c;从而更好地处理和解析大量的文本数据。NLP不仅是人工智能领域中一个重要的分支&#xff0c…

62 C++ 多线程 -- mutex互斥量只能使用一次的问题分析-----以及解决方案递归mutex:recursive_mutex。

一 前提 以及问题 我们注意到&#xff0c;如果mutex.lock()两次&#xff0c;就会有问题 如下的代码有runtime exception mutex mymutex;mymutex.lock();mymutex.lock();//共享数据访问处理代码mymutex.unlock();mymutex.unlock(); 但是有这样的case存在 class Teacher183 …

SPI 动态服务发现机制

SPI&#xff08;Service Provier Interface&#xff09;是一种服务发现机制&#xff0c;通过ClassPath下的META—INF/services文件查找文件&#xff0c;自动加载文件中定义的类&#xff0c;再调用forName加载&#xff1b; spi可以很灵活的让接口和实现分离&#xff0c; 让API提…

Spring Boot整合Redis的高效数据缓存实践

引言 在现代Web应用开发中&#xff0c;数据缓存是提高系统性能和响应速度的关键。Redis作为一种高性能的缓存和数据存储解决方案&#xff0c;被广泛应用于各种场景。本文将研究如何使用Spring Boot整合Redis&#xff0c;通过这个强大的缓存工具提高应用的性能和可伸缩性。 整合…

Pyro —— 简介

目录 Differences between legacy and sparse pyro Getting started with pyro using shelf tools Related pyro nodes Sourcing DOP simulation SOP simulation Post-Processing Rendering Simple FX shelf tools Pyro为Houdini的体积流体&#xff08;volumetric flu…

c++函数重载(同名函数)功能,区别于c语言

c可以使用同名函数&#xff0c;实现功能类似的多个功能 规则&#xff1a; ①函数名相同&#xff0c;但是函数的参数&#xff08;形参&#xff09;绝不相同 ②参数个数不同 ③参数个数相同&#xff0c;参数类型不同 只有返回值类型不同&#xff0c;不可以&#xff1b;只有形…

力扣hot100 找到字符串中所有字母异位词 滑动窗口 双指针 一题双解

Problem: 438. 找到字符串中所有字母异位词 文章目录 思路滑动窗口 数组滑动窗口 双指针 思路 &#x1f469;‍&#x1f3eb; 参考题解 滑动窗口 数组 ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( 1 ) O(1) O(1) class Solution { // 滑动窗口 …

VM使用教程--SDK取图 视频笔记

本笔记均由海康机器人官网的V学院视频中记录所得&#xff0c;属于省流大师了[doge] 图像采集 图像采集包括1图像源&#xff0c;2多图采集&#xff0c;3输出图像&#xff0c;4缓存图像&#xff0c;5光源 1图像源 图像源包括本地图像&#xff0c;相机采图&#xff0c;SDK 本…

【JSON2WEB】01 WEB管理信息系统架构设计

WEB管理信息系统分三层设计&#xff0c;分别为DataBase数据库、REST2SQL后端、JSON2WEB前端&#xff0c;三层都可以单独部署。 1 DataBase数据库 数据库根据需要选型即可&#xff0c;不需要自己设计开发&#xff0c;一般管理信息系统都选关系数据库&#xff0c;比如Oracle、…

设计模式--组合模式

缘起 某日&#xff0c;小明公司最近接到一个办公管理系统的项目&#xff0c;并且在每个城市都有分部。这属于是很常见的OA系统&#xff0c;只要前期将需求分析完善好&#xff0c;中后期开发维护是不难的。 然而&#xff0c;总部公司使用后觉得很OK&#xff0c;想要其他城市的…

【日常聊聊】自然语言处理的发展

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; 日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 技术进步 应用场景 挑战与前景 伦理和社会影响 实践经验 结语 我的其他博客 前言 自然语言处理&#xff08;NLP&#xf…

Template -- Vue2

Vue2 版本 Node 14.14.0Npm 6.14.8Vue vue/cli 5.0.3 npm install -g vue/cli5.0.3 cnpm cnpm7.1.0 npm install -g cnpm7.1.0 --registryhttps://registry.npm.taobao.org 项目 创建 vue create single # vue 2.6.14配置 // vue.config.js const { defineConfi…

PLC物联网网关BL104实现PLC协议转MQTT、OPC UA、Modbus TCP

随着物联网技术的迅猛发展&#xff0c;人们深刻认识到在智能化生产和生活中&#xff0c;实时、可靠、安全的数据传输至关重要。在此背景下&#xff0c;高性能的物联网数据传输解决方案——协议转换网关应运而生&#xff0c;广泛应用于工业自动化和数字化工厂应用环境中。 无缝衔…