Javascript由浅到深

关注我,持续分享逻辑思维&管理思维; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导;
有意找工作的同学,请参考博主的原创:《面试官心得--面试前应该如何准备》,《面试官心得--面试时如何进行自我介绍》, 《做好面试准备,迎接2024金三银四》。
推荐热榜内容:《C#实战分享--爬虫的基础原理及实现

-------------------------------------正文----------------------------------------

JavaScript基础知识

1.区分大小写
var a;var A是不一样的。
function myName();function myname() 也是不一样的

2.每行以分号结尾,分号可有可无,但为了保持良好编码习惯,我们以后都加上;
var a = 'hello'
var b = 'javascript';

3.JavaScript注释
单行注释//;
多行注释/*开头,*/结尾。中间部分都是被注释掉的内容。
//var a='123'我被注释掉了,不会被执行。
/* var b ='123';alert(b);*/中间部分都被注释掉了不会执行。

4.{}花括号表示代码块,代码块里封装一系列语句。
window.onload()=function()
{
      语句

if(true)
{
       语句

5.忽略多余空白
var num = 1;
var num=1;
以上两句是一样的。
var result = 1+   2;
var result=1+2;
以上两句也是一样的。

一个简单的例子
 

<html>
<head><meta charset="UTF-8"><title>测试JS</title><script>function sayHello(){//我是注释var a = "hello, javascript!!!";alert('我先执行');alert(a);}</script>
</head><body>
<input type="button" value='hello' onclick="sayHello()"/>
</body></html>

以上示例,在网页上显示一个按钮,点这个按钮,会弹出两句话。“我先执行”,以及“hello, javascript!!!”。
把以上内容用记事本打开,复制进去。然后保存为x.html(把默认后缀txt改成html)。然后双击用浏览器打开,即可测试。

JavaScript变量
JavaScript变量标识符标识符 var +变量名称来定义变量。
变量名称以字母,下划线,美元$符号开头,余下字符可以是字母,数字,下划线,美元符号。
eg: 
var name = 'hello';
var a1 = 'hello';
var _test = 'hello';
var $test = 'hello';
以上变量名称均为正确。
var 1a='hello';//数字开头错误。
JavaScript允许一次声明多个变量。中间以逗号分隔。
eg: var a1 = 'hello1', a2 = 'hello2';

JavaScript是弱类型语言。

所谓弱类型语言即变量没有固定类型,也无需明确类型。相比于Java、C++语言,定义一个变量必须要声明其类型。
如Java代码: 
String str = 'hello';
int num= 19;
而JavaScript代码: 
var str = 'hello';
var num = 19;
JavaScript中的变量类型是根据其内容改变而改变的。

变量的作用域

变量按照作用域划分为全局变量和局部变量。其区别在于生命周期。
局部变量一般声明在函数内部,其使用范围也是在其声明的地方开始到其所在的函数代码块结束。函数结束,其内部的局部变量注销。全局变量声明在函数外部,其使用范围从其生命的地方开始,</script>标签结束,浏览器关闭,全局变量注销。例:
<script>
var a=1;//全局变量a,任何地方都可以使用
function test1()
{
        var a=12;//局部变量a。
        alert(a);//12,此时是局部变量。但不建议这样用。建议用其它变量名,以免混淆
}
function test()
{
        alert(a);//全局变量a,1
}
</script>

Javascript中的5种数据类型:Null, Undefined, string, Boolean, number。

字符串类型——String
字符串由单引号或双引号引起来。
字符串每个字符都有其特定的位置,第一个字符index是0。eg:<script>
var str = 'hello';
alert(typeof str);//string
alert(str.length);//5
alert(str.charAt(0));//h
</script>

数字类型——Number
可以表示32位的整数,也可以表示64位的浮点数。
可以表示为八进制必须0开头,也可以表示为十六进制0x开头。
科学计数法表示数字。
eg1:
var num1 = 12;
var num2 = 12.01;
alert(typeof num1);//Number
alert(typeof num2);//Number
eg2:
var num1=030//等于十进制的24
var num2=0×1a//等于十进制的26
eg3:
var num1=2.13e6//2.13*10的六次方。

布尔类型——Boolean
表示逻辑真与假。定义时不可加引号。true和false其值可以与0,1相等价。
eg:
<script>
var a = true;
alert(typeof a) //boolean
alert(a==1); //true
alert(a==0); //false
var a = 1;
alert(typeof a);//number
alert(a==true); //true
var b = 1;
alert(a==b) //true
</script>

Undefined类型
Undefined即未定义类型。其默认值为Undefined。对于不存在的变量或者变量未赋初始值都为Undefined类型。Undefined类型的默认值为Undefined,但值Undefined不同于未定义的值。eg:
<script>
var a;//变量a没有赋初始值,
alert(typeof a);//类型为Undefined
alert(a==undefined);//值为undefined
alert(typeof c);//未定义的值c。
alert(c==a);//出错,对c使用除typeof运算符的其它运算符都会出现错误,因为无法对一个不存在的变量进行运算
</script>

Null类型
表示空值,其默认值即null。Undefined是从null中派生出来的。Null的typeof是Object,是由于历史原因所出现的bug,后来解释null为对象的占位符。eg:
<script>
var a=null//变量a有值,值为null
alert(typeof a); //object
var b //变量b没有值undefined
alert(a==b);//true
</script>

字符串常用方法

字符串的长度: str.length
根据索引查找字符:str.charAt(index) 没有找到返回空字符
根据索引查字符编码:str.charCodeAt(index) 没有找到返回 NaN
根据字符查索引:str.indexOf(“要查找的字符”) 没有找到返回 -1
字符串的截取
str.slice(start, end) 从 start 开始,到 end 结束,不包括 end
str.substring(start, end) 从 start 开始,到 end 结束,不包括 end ,不能为 负数
str.substr(start, length) 从 start 开始,截取 length 个字符
字符串转数组:str.split(“分隔符”) 默认分割成一个元素
转大写:str.toUpperCode()
转小写:str.toLowerCode()

Math 对象

平方根:Math.sprt()
求 m 的 n 次方:Math.pow(m, n)
向上取整:Math.ceil()
向下取整:Math.floor()
0-1 之间的随机数:Math.random()
四舍五入:Math.round()
绝对值:Math.abs()
最大值:Math.max()
最小值:Math.min()
圆周率:Math.PI

Date 对象

定义日期对象
var date = new Date()
// 不加参数表示当前时间,参数可以是具体时间,也可以是距离 1970.1.1 的毫秒值
// 参数加引号和不加引号的区别:不加引号月份是 0-11 之间

// 获取距离 1970.1.1 的毫秒值
Date.now()   ||  date.getTime()  ||  Date.parse("具体时间")

// 将毫秒值转成具体时间
date.setTime(毫秒值)

// 获取年份
date.getFullYear()

// 获取月份
date.getMounth()

// 获取日
date.getDate()

// 获取小时
date.getHours()

// 获取分钟
date.getMinutes()

// 获取秒
date.getSecends()

// 获取星期
date.getDay()

定时器

 1.倒计时 (一次性)

setTimeout(function() {}, 时间, 实参)
/*  第一个参数:时间到了要执行的函数,函数只执行一次
    第二个参数:倒计时的时间
    第三个参数:第一个参数函数的实参
*/

 2.循环定时器

setInterval(function() {}, 间隔时间, 实参)
/*  第一个参数:每个一定时间要执行的函数,函数执行多次
    第二个参数:时间间隔
    第三个参数:第一个参数函数的实参
*/

特殊标签的获取

  • body 标签: document.body
  • head 标签:document.head
  • title 标签:document.title 获取的是 title 标签里的内容
  • html 标签:document.documentElement

实战:验证码的生成

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>验证码生成及校验</title><style type="text/css">body {margin: 0;padding: 0;}a {text-decoration: none;color: #fff;}.Box{margin: 100px auto 0;text-align: center;}.box {width: 300px;color: #fff;background-color: rgba(0, 0, 0, 0.5);margin: auto;text-align: center;}.boxCode {width: 300px;background-color: rgba(0, 0, 0, 0.5);margin: auto;}.code {color: red;font-size: 30px;}</style></head><body><div class="Box"><div class="boxCode"><span class="code" id="code"></span><a href="" id="linkbt">看不清换一张</a></div><div class="box"><label for="inputCode">验证码:</label><input type="text" id="inputCode"><input type="button" id="Button1" value="确定"></div></div><script type="text/javascript">'user strict';function getCode(){var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];var str = '';for (let i = 0; i < 6; ++i) {//取0到15let num = Math.round(Math.random() * (15 - 0) + 0);//得到0-15的一个随机数str += arr[num];//拼接字符串}return str;}window.onload=function(){let res=getCode();document.getElementById("code").innerText=res;document.getElementById("linkbt").onclick=function(){document.getElementById("code").innerText=res;}document.getElementById('Button1').onclick=function(){let code=document.getElementById('code').innerText;let inputCode=document.getElementById('inputCode').value;//console.log(code);//console.log(inputCode);if(code!=inputCode){alert('输入错误!');document.getElementById('inputCode').value='';return false;}else{location.href='https://blog.csdn.net/pipihan21';}}}</script></body>
</html>

把以上内容用记事本打开,复制进去。然后保存为x.html(把默认后缀txt改成html)。然后双击,即可显示

实战:勾选框选择效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>勾选框选择效果</title></head><body><form action=""><p><input type="checkbox" name="" id="">郭子晗</p><p><input type="checkbox" name="" id="">赵四</p><p><input type="checkbox" name="" id="">小沈阳</p><p><input type="checkbox" name="" id="">宋小宝</p></form><button onclick="getAll(0)">全选</button><button onclick="getAll(1)">全不选</button><button onclick="getAll(2)">反选</button><script>'user strict';let but = document.getElementsByTagName('button');let input = document.getElementsByTagName('input');//封装函数function getAll(num){for (let i = 0; i < input.length; ++i) {if(num===0){//全选input[i].checked = true;}else if(num===1){//全不选input[i].checked = false;}else{//反选input[i].checked = !input[i].checked;}}}</script></body>
</html>

把以上内容用记事本打开,复制进去。然后保存为x.html(把默认后缀txt改成html)。然后双击,即可显示

感兴趣的同学辛苦 关注/点赞 ,持续分享逻辑、算法、管理、技术、人工智能相关的文章。

博主其它经典原创:《管理心得--工作目标应该是解决业务问题,而非感动自己》,《管理心得--如何高效进行跨部门合作》,《管理心得--员工最容易犯的错误:以错误去掩盖错误》,《技术心得--如何成为优秀的架构师》、《管理心得--如何成为优秀的架构师》、《管理心理--程序员如何选择职业赛道》。欢迎大家阅读。

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

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

相关文章

蓝桥杯day11刷题日记

P8615 [蓝桥杯 2014 国 C] 拼接平方数 思路&#xff1a;先把数据范围内的平方数打上标记&#xff0c;然后就是遍历这个区间&#xff0c;转成字符串&#xff08;好拆数据&#xff09;&#xff0c;用substr拆开数据&#xff0c;再强转成整数类型&#xff0c;最后查看拆开的数据是…

【WPF应用13】WPF基本控件-DockPanel布局详解与示例

引言 WPF (Windows Presentation Foundation) 是微软 .NET 框架的一个组成部分&#xff0c;它用于构建桌面应用程序的用户界面。在 WPF 中&#xff0c;控件是构建用户界面的基本元素&#xff0c;而布局控件则负责安排其他控件的位置和大小。DockPanel 是 WPF 中的一个布局控件&…

如何使用PHP和RabbitMQ实现消息队列?

前言 今天我们来做个小试验&#xff0c;用PHP和RabbitMQ实现消息队列功能。 前期准备&#xff0c;需要安装好docker、docker-compose的运行环境。 如何使用docker部署php服务_php如何使用docker发布-CSDN博客 一、安装RabbitMQ 1、创建相关目录&#xff0c;执行如下命令。…

计算机网络⑦ —— 网络层协议

1. ARP协议 在传输⼀个 IP 数据报的时候&#xff0c;确定了源 IP 地址和⽬标 IP 地址后&#xff0c;就会通过主机路由表确定 IP 数据包下⼀跳。然⽽&#xff0c;⽹络层的下⼀层是数据链路层&#xff0c;所以我们还要知道下⼀跳的 MAC 地址。由于主机的路由表中可以找到下⼀跳的…

手撕算法-接雨水

描述 分析 i位置能积累的雨水量&#xff0c;等于其左右两边最大高度的最小值。为了能获取i位置左右两边的最大高度。使用动态规划。两个dp数组&#xff1a; leftMaxrightMax 其中 leftMax[i] 代表i位置左边的最大高度rightMax[i] 代表i位置右边的最大高度 初始状态&#x…

npm 包管理工具:常用命令详解与使用指南

npm常用命令的更详细解释和使用场景&#xff1a; npm init 详细说明&#xff1a;此命令用于初始化一个新的Node.js项目。它会创建一个package.json文件&#xff0c;其中包含项目的基本信息&#xff0c;如名称、版本、描述、入口点&#xff08;main file&#xff09;、测试命令、…

Python Flask 自定义过滤器

{{ data.list | li2 }} li2就是自定义的 from flask import Flask, render_templateapp Flask(__name__)app.route("/index") def index():data {name: "张三","age": 18,list: [123123, 41, 123]}return render_template("index2.html…

[AIGC] 使用Spring Boot进行单元测试:一份指南

在现代软件开发过程中&#xff0c;确认你的应用正确运行是至关重要的一步。Spring Boot提供了一组实用工具和注解来辅助你在测试你的应用时&#xff0c;使得这个过程变得简单。下面就来分享一下如何在Spring Boot中进行单元测试。 文章目录 为什么需要单元测试Spring Boot单元测…

Redis中RDB中的文件写入

RDB文件的创建与载入。 有两个Redis命令可以用于生成RDB文件&#xff0c;一个是SAVE&#xff0c;另一个是BGSAVE. SAVE命令会阻塞Redis服务器进程&#xff0c;直到RDB文件创建完毕为止&#xff0c;在服务器进程阻塞期间&#xff0c;服务器 不能处理任何命令请求: 127.0.0.1:6…

枚举的详解

枚举的讲解 在C语言中&#xff0c;没有内置的枚举&#xff08;enum&#xff09;数据类型&#xff0c;但我们可以使用整数类型来模拟枚举的行为。C99标准之前&#xff0c;C语言使用#define指令来定义枚举&#xff0c;但这种方式并不安全&#xff0c;因为如果枚举值发生变化&…

Ubuntu Desktop Server - user 用户与 root 用户切换

Ubuntu Desktop Server - user 用户与 root 用户切换 1. user 用户与 root 用户切换2. root 用户与 user 用户切换References 1. user 用户与 root 用户切换 strongforeverstrong:~$ strongforeverstrong:~$ sudo su [sudo] password for strong: rootforeverstrong:/home/s…

【matlab程序】海洋资料的获取与分析--AO/NAO

海洋资料的获取与分析 相关数据代码等资料已上传入群中 海洋资料下载和介绍 AO和NAO指数均取自美国气候预测中心&#xff08;Climate Prediction Center, CPC&#xff09;发布的月平均指数&#xff0c;时间跨度为1950-2022年。由于AO和NAO在冬季最强&#xff0c;因此本文选取…

trt | torch2trt的使用方式

一、安装 1. 安装 tensorrt python 接口 下载 trt 包 .tar.gz https://developer.nvidia.com/nvidia-tensorrt-5x-download 解压 tar xvf TensorRT-6.0.1.5.Ubuntu-18.04.x86_64-gnu.cuda-10.1.cudnn7.6.tar.gz 安装 trt python 接口 cd pythonpip install tensorrt-6.0…

springboot结合mongodb使用(一)

配置连接 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId><version>${spring.boot.version}</version></dependency>#mongodb 这里是没有设置密码sprin…

406. 根据身高重建队列(力扣LeetCode)

文章目录 406. 根据身高重建队列题目描述贪心算法代码 406. 根据身高重建队列 题目描述 假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &…

阿里云倚天云服务器怎么样?如何收费?

阿里云倚天云服务器CPU采用倚天710处理器&#xff0c;租用倚天服务器c8y、g8y和r8y可以享受优惠价格&#xff0c;阿里云服务器网aliyunfuwuqi.com整理倚天云服务器详细介绍、倚天710处理器性能测评、CIPU架构优势、倚天服务器使用场景及生态支持&#xff1a; 阿里云倚天云服务…

2024.3.22FunPlus客户端开发工程师笔试记录

仅做笔试记录之用。 FunPlus客户端开发工程师笔试分为以下题型&#xff1a; 15道单选、5道多选、5道填空、2道编程 相比起上次考多益的时候&#xff0c;确实是感觉轻松多了。可能是选择题难度比起上次更简单的原因。这次的考题出的相对更加全面&#xff0c;但是同时显现出的就…

macOS访问samba文件夹的正确姿势,在哪里更改“macOS的连接身份“?还真不好找!

环境&#xff1a;路由器上需要身份认证的Mini NAS macOS Sonoma 14 这是一个非常简单的问题&#xff0c;但解决方法却藏得比较深&#xff0c;不够直观&#xff0c;GPT也没有给出明确的解决提示&#xff0c;特意记录一下。 macOS很多地方都很自动&#xff0c;有时候让人找不到设…

基于单片机的语音识别智能窗帘控制器的设计

摘要 系统以单片机STC89C52 芯片作为主控模块,可以对窗帘实现光照度检测、语音识别、 按键手动等智能控制功能。光照度模块采集室外光照度数据上传至单片机,单片机发送控制指令 驱动步进电动机驱动模块,控制步进电动机转动实现窗帘的自动开合,LCD 显示屏显示实时的温 度和时…

3.20日哈啰面试纪要

1.介绍自己&#xff0c;巴拉巴拉 2.面试官谈到了redis 问&#xff1a;redis在项目中你们主要用来干什么的&#xff1f; 答&#xff1a;分布式锁、存储图标信息 问&#xff1a;你们hash类型主要用来做什么&#xff1f; 答&#xff1a;主要用来存储token 问&#xff1a;token不应…