JavaScript入门学习

JavaScript

一.什么是JavaScript与作用

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言 

  1. 嵌入HTML中，与Css一样。
  2. 对浏览器事件作出响应
  3. 操作HTML元素及节点。
  4. 可以动态操作CSS样式。
  5. 在数据被提交到服务器之前验证数据。

二.两种引入方式 

1.内部标签

demo.html

<script>
    alert("hello")
</script>

2.外部引入

demo.js

// 代码

demo.html

<script src="路径"></script>

三.浏览器控制台调试

四.数据类型 

1.变量与严格检查格式

// 统一用 var 来声明变量。
// 在ES6新增加了let 和const来声明变量。

var fuck = "fuck";
var number = 1;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
前提：Idea，设置支持ES6语法

'use strict';严格检查模式，预防JavaScript随意性导致产生的一些问题

必须写在script标签内的第一行！

局部变量建议都使用let去定义
-->
<script>
    'use strict';
    let a = 1;
</script>
</body>
</html>

2.基本变量类型 

//--- number
var a  = 1;
a = 123 //整数
a = 123.1 //浮点数
a = -99 //负数
a = NaN //not a number

//--- 字符串
var b = "abc";
b = 'cba';


//--- 布尔值
var c = true;
c = false;

3.运算符

// 1.逻辑运算符

&&  //两个都为真，结果为真
||  //一个为真，结果为真
!   //真即假，假即真


// 2.比较运算符
=    //赋值预算法
==   //等于（类型不一致，值一样，也会判断为true  即判断1=='1'）
===  //绝对等于（类型一样，值一样，结果为true）

（1）NaN，与所有的数值都不相等，包括自己

NaN === NaN; //false

只能通过isNaN()来判断这个数是不是NaN。

（2）浮点数问题

(1/3)===(1-2/3) //结果为false

尽量避免使用浮点数进行运算，存在精度问题

Math.abs(1/3-(1-2/3))<0.00000001 //结果为true

4.null和undifined 

  • null 空
  • undefined 未定义

5.字符串

（1）正常字符串我们使用单引号或者双引号包裹。

let a = "fuck";
let b = 'fuck';

(2）注意转义字符 

let a = '\u4e2d ' //\u#### Unicode 字符
let a = '\x41' //Ascll字符

（3）多行字符串编写 ``

var msg = `
        hello
        你好,张三。
        `

（4）模板字符串，拼接字符串

let name = '张三';
let msg = `你好呀，${name}`; //'你好呀，张三'

（5）字符串长度：

msg.length; //6

（6）大小写转换

let a = "student";
a.toUpperCase(); // 'STUDENT'
a.toLowerCase(); // 'student'

（7）字符串查找

a.indexOf(‘t’); //1

 （8）截取

a.substring(2) //udent, 下标几到最后
a.substring(2,3) //u, 下标几到下标几

6.数组

Java的数组必须是相同类型的对象。JS中不需要这样！

Array可以包含任意的数据类型

// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];//取数组下标：如果越界了，就会报undefined
arr[1]; //2
arr[9]; //undefined

（1）获取长度 

arr.length; // 6
//假如给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就会丢失
arr.length = 5; // a = [1, 2, 3, 4, 5]

 （2）获得下标索引

arr.indexOf(2); // 1

（3） 数组截取

arr.slice(2); //[3, 4, 5]  类似于String中的substring
arr.slice(2,4); //[3, 4]

（4）元素操作

//插入最后一位
arr.push("a"); //[1, 2, 3, 4, 5, 'a']

//插入最前一位
arr.unshift("b") //['b', 1, 2, 3, 4, 5, 'a']

//删除最后一位
arr.pop(); //['b', 1, 2, 3, 4, 5]

//删除最前一位
arr.shift(); //[1, 2, 3, 4, 5]

 （5）排序

arr.sort(); //[1, 2, 3, 4, 5]

（6）反转

arr.reverse();// [5, 4, 3, 2, 1]

（7）合并

let arr2 = ['a','b','c']
arr.concat(arr2); //[1, 2, 3, 4, 5, 'a', 'b', 'c']
//返回一个新的数组，不改变原来的数组arr

（8）连接符

// join();//默认，去拼装数组。可以指定
arr.join("-");//'1-2-3-4-5'

7.对象 

对象是大括号，数组是中括号，每一个属性之间使用逗号隔开，最后一个不需要加逗号

/*
var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}
*/

let obj = {
    name : "张三",
    tags : ['吃饭','睡觉','打豆豆']
}

 js中的对象， {…..}表示一个对象，键值对描述属性xx : xx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

js 中的所有键都是字符串，值是任意对象！

（1）取值

obj.name;// 法外狂徒
obj.sex;// 取一个不存在的对象属性，不会报错！会显示:undefined

（2）赋值

obj.name = "法外狂徒";

 （3）添加属性,直接给新的属性添加值即可

obj.sex = '男';

（4）删除属性

delete obj.sex;

（5）判断属性值是否在这个对象中 XX in XXX

"name" in obj; //true
'toString' in obj; //true,父类中有。

(6）判断属性值是否在这个对象的自身上

obj.hasOwnProperty("toString"); // false
obj.hasOwnProperty("name"); // true

五.流程控制 

1.判断语句 

// if 判断
let a = 1;
if (a > 1){
    console.log("判断一")
}else if (a > 5){
    console.log("判断二")
}else {
    console.log("判断三")
}

2.循环语句

// while循环
while(a < 10){
    a ++;
    console.log(a);
}

// for循环
for(let i = 0; i < 10; i++){
    console.log(i);
}

//forEach循环
let tags = ['吃饭','睡觉','打豆豆'];
tags.forEach((value,index)=>{
    console.log(value+','+index);
})

// for in 遍历下标
for (let tag in tags){
    console.log(tag[num]);
}

//通过for of遍历值
for (let tag of tags){
    console.log(tag);
}

六.Map 和 Set 

1.Map

let map = new Map([['1',"小明"],['2',"小华"],['3',"张三"]]);
    map.get('3'); // 张三
    map.delete('1'); // 删除元素
    map.set('6',"kuangstudy"); // 存在就修改，不存在就添加


//遍历map
for (let x of map){
    console.log(x);
}

2.Set

无序不重复的集合 

var set = new Set([3,2,1]);
set.add(5);//增加元素

set.delete(3);//删除元素

set.has(1);//判断是否包含元素

set.size;//长度

//遍历遍历set
for (var x of set){
    console.log(x);
}

七.函数 

1.定义函数

定义方式一：

function abs(x){

    if(x >= 0){
        return x;
    }else{
        return -x;
    }

}

一旦执行到return 代表函数结束，返回结果！

如果没有执行return ， 函数执行完也会返回结果，结果就是undefined

定义方式二：

var abs = function(x){

    if(x >= 0){
        return x;
    }else{
        return -x;
    }

}

 function(x){….} 这是一个匿名函数，把结果赋值给abs，通过abs可以调用函数！

方式一和方式二等价！ 

2.调用与参数问题

abs(10); // 10
abs(-10); // 10

参数问题：JavaScript 可以传任意多个参数，也可以不传

 （1）arguments：代表传递进来的所有参数，是一个数组 


function abs(x){

    for(let i of arguments){
        console.log(i);
    }

    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

3. rest：定义参数以外的所有参数，返回一个数组


function abs(a,b,...rest){

console.log(a);
console.log(b);
console.log(rest);

}

3.局部变量

访问不存在的变量名会报XXX is not defined

function abs(x) {
    var a = 1;
}
a = a + 2; //报错：a is not defined
function abs(x) {

    //手动抛出异常
    if(typeof x!= 'number') {
        throw 'Not a number';
    }
    if(x>=0) {
        return x;
    }else {
        return -x;
    }
}

内部函数可以访问外部函数的成员，反之则不行（与Java一样内部类可以访问外部类，外部类访问不了内部类）

var a = 1;
function abs(x) {
    var b = a + 2;
}
a = b + 2;//报错：b is not defined

假设，内部函数变量和外部函数的变量重名


function f(){
var a = 1;

function d(){
    var a ="A";
}
    console.log("内部"+a); // A 从内向外查找
}
f();//内部A
console.log("外部"+a);// 1

使用闭包可以解决外部访问函数内部变量的方法。

 let关键字，解决局部作用域冲突问题 

function ab(){
    for(vat i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i);// 100 出了作用域还可以使用
}
function ab(){
    for(let i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i);//报错
}

4.全局变量

var x = 1;

function abc() {

console.log(x);// 1

}

abc()

console.log(x);// 1

全局对象

var a = "xxx";

window.alert(a); // xxx 
alert(window.a); // xxx

结论：默认所有全局变量都绑定到window对象下，alert本身属于window对象下的变量； 

var a = 1;

window.alert(a); // 1

var fuck = window.alert;

fuck(a) // 1

window.alert = function() {

};

window.alert(a); // 失效

window.alert = fuck;

window.alert(a);// 1

 JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有函数作用范围内找到，就会向外查找，如果全集作用域都没有找到，就报错；

规范：由于我们所有的全局变量都会绑定到我们的window 上，如果不同的js文件，使用了相同的全局变量，冲突~> 如何减少冲突 

// 唯一全局变量
var xxlApp={};
 
// 定义全局变量
xxlApp.name = "王小姐";

xxlApp.age = function (a,b){
    return a + b;
}

将自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突问题

 5.常量

var PI = 3.14
console.log(PI);

PI = 123; //可以修改
console.log(PI);

在ES6引入了常量关键字 const

const PI = 3.14; //只读变量
PI = 123;//报错 Attempt to assign to const or readonly variable
console.log(PI);

6.方法定义与调用

var fuck = {
    name:"fuck",
    bitrh:2000,
// 方法定义
    age : function() {
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
    
}

function getAge() {
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var fuck = {
    name:"nn",
    bitrh:1111,
    age:getAge
    
}


 getAge() // Nan
 fuck.age() // yes

apply:

在js中可以控制this的指向 

function getAge() {
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var fuck = {
    name:"nn",
    bitrh:1111,
    age:getAge
    
}

getAge.apply(fuck,[]);// this 指向fuck，参数为空

 getAge() // Nan
 fuck.age() // yes

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

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

相关文章

操作系统基础：磁盘组织与管理【上】

操作系统基础：磁盘组织与管理【上】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;OS从基础到进阶 &#x1f6e0;️1 磁盘的结构&#x1f4e1;1.1 总览&#x1f4e1;1.2 磁盘、磁道、扇区⚗️1.2.1 什么是磁盘⚗️1.2.2 什么是磁道⚗️1.2.3 什么是扇区 &#x1f4e1;1.3 …
阅读更多...
使用No-SQL数据库支持连接查询用例的讨论

使用No-SQL数据库支持连接查询用例的讨论

简介 在本文中&#xff0c;我们将简单介绍什么是No-SQL数据库。然后我们会讨论一种使用关系数据库比较容易实现的查询&#xff0c;即连接查询&#xff0c;怎么样使用No-SQL来实现。 什么是No-SQL数据库 与No-SQL数据库相对应的是传统的关系数据库&#xff08;RDBMS&#xff…
阅读更多...
【教程】Linux使用git自动备份和使用支持文件恢复的rm命令

【教程】Linux使用git自动备份和使用支持文件恢复的rm命令

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 背景介绍 首先非常不幸地告诉你&#xff1a;Linux 系统的标准 rm 命令不支持文件恢复功能。一旦使用 rm 删除了文件或目录&#xff0c;它们就会从文件系统中永久删除&#xff0c;除非你使用专门的文件恢复工具尝试…
阅读更多...
如何在 Ubuntu 上安装 ONLYOFFICE 文档 8.0

如何在 Ubuntu 上安装 ONLYOFFICE 文档 8.0

通过使用社区版&#xff0c;您有能力在您自己的服务器上部署 ONLYOFFICE 文档&#xff0c;从而使在线编辑器与 ​​ONLYOFFICE 协作平台​​​或​​其他热门系统​​进行无缝集成。 ONLYOFFICE 文档是什么 ONLYOFFICE 文档是一款全面的在线办公工具&#xff0c;提供了文本文档…
阅读更多...
ELAdmin 前端启动

ELAdmin 前端启动

开发工具 官方指导的是使用WebStorm&#xff0c;但是本人后端开发一枚&#xff0c;最终还是继续使用了 idea&#xff0c;主打一个能用就行。 idea正式版激活方式&#xff1a; 访问这个查找可用链接&#xff1a;https://3.jetbra.in/进入任意一个能用的里面&#xff0c;顶部提…
阅读更多...
代码随想录算法训练营第四十五天（动态规划篇）|01背包

代码随想录算法训练营第四十五天（动态规划篇）|01背包

01背包理论基础 学习资料&#xff1a;代码随想录 (programmercarl.com) 相关链接&#xff1a;题目页面 (kamacoder.com) 背包题目分类 01背包定义 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次…
阅读更多...
【Ftp客户端】FTPBox starter

【Ftp客户端】FTPBox starter

Github&#xff1a; https://github.com/lihewei7/ftpbox-spring-boot-starterGitee&#xff1a; https://gitee.com/lihewei7/ftpbox-spring-boot-starter 文章目录 FTPBox是什么&#xff1f;Maven依赖使用APIuploaddownloadexistslistexecuteexecuteWithoutResult 配置单主机…
阅读更多...
有责无权的PM如何管好项目？

有责无权的PM如何管好项目？

一、项目经理的责任和权力分析 项目经理作为项目的责任主体&#xff0c;承担着确保项目顺利完成的重要责任。他们需要确保项目达到预期目标&#xff0c;控制项目进度、成本和质量&#xff0c;并保证项目团队的有效运作。然而&#xff0c;与责任相对应的权力却并不总是与之匹配…
阅读更多...
Linux（三）--文件系统

Linux（三）--文件系统

Linux命令简介 [rootlocalhost ~]# 表示 Linux 系统的命令提示符。 []&#xff1a;这是提示符的分隔符号&#xff0c;没有特殊含义。 root&#xff1a;显示的是当前的登录用户&#xff0c;笔者现在使用的是 root 用户登录。 &#xff1a;分隔符号&#xff0c;没有特殊含义。 l…
阅读更多...
安卓Termux+Hexo博客框架快速搭建本地网站并实现公网访问

安卓Termux+Hexo博客框架快速搭建本地网站并实现公网访问

文章目录 前言 1.安装 Hexo2.安装cpolar3.远程访问4.固定公网地址 前言 Hexo 是一个用 Nodejs 编写的快速、简洁且高效的博客框架。Hexo 使用 Markdown 解析文章&#xff0c;在几秒内&#xff0c;即可利用靓丽的主题生成静态网页。 下面介绍在Termux中安装个人hexo博客并结合…
阅读更多...
C语言在Visual Studio 2010环境下使用＜regex.h＞正则表达式函数库

C语言在Visual Studio 2010环境下使用＜regex.h＞正则表达式函数库

在Visual Studio 2010环境下&#xff0c;如果C语言想要使用<regex.h>头文件进行正则表达式匹配&#xff0c;则需要pcre3.dll这个动态链接库&#xff0c;可以去网上下载。 下载的网址是&#xff1a;Pcre for Windowspcre {whatisit}https://gnuwin32.sourceforge.net/pac…
阅读更多...
获取 Github XX项目软件最新版本方法（通过命令行）

获取 Github XX项目软件最新版本方法（通过命令行）

场景&#xff1a; 如果我们项目中需要实现某个Github公共软件的最新版本更新 那么获取软件的最新的发布版本就是一个比较重要的工作了 对此&#xff0c;Github提供对外api不需要自己手动填写脚本了 解决方案&#xff1a; 替换黄色字体的项目地址&#xff0c;然后在cmd中执行…
阅读更多...
第1章 认识Flask

第1章 认识Flask

学习目标 了解Flask框架&#xff0c;能够说出Flask框架的发展史以及特点 熟悉隔离Python环境的创建方式&#xff0c;能够独立在计算机上创建隔离的Python环境 掌握Flask的安装方式&#xff0c;能够独立在计算机上安装Flask框架 掌握PyCharm配置隔离环境的方式&#xff0c;能…
阅读更多...
算法提升——LeetCode123场双周赛总结

算法提升——LeetCode123场双周赛总结

周赛题目 三角形类型 II 给你一个下标从0开始长度为3的整数数组nums&#xff0c;需要用它们来构造三角形。 如果一个三角形的所有边长度相等&#xff0c;那么这个三角形称为equilateral。 如果一个三角形恰好有两条边长度相等&#xff0c;那么这个三角形称为isosceles。 如…
阅读更多...
位运算：进制

位运算：进制

4982. 进制 - AcWing题库 给定两个整数 a,b 请你计算&#xff0c;在 [a,b] 范围内有多少个整数满足其二进制表示恰好有一个 0。 不考虑前导 0。 例如&#xff0c;当 a5,b10 时&#xff0c;[5,10]范围内的所有整数及其二进制表示如下&#xff1a; 可以看出&#xff0c;只有 5 和…
阅读更多...
鸿蒙开发系列教程（十四）--组件导航：Tabs 导航

鸿蒙开发系列教程（十四）--组件导航：Tabs 导航

Tabs 导航 Tabs组件的页面组成包含两个部分&#xff0c;分别是TabContent和TabBar。TabContent是内容页&#xff0c;TabBar是导航页签栏 每一个TabContent对应的内容需要有一个页签&#xff0c;可以通过TabContent的tabBar属性进行配置 设置多个内容时&#xff0c;需在Tabs…
阅读更多...
消息队列使用的四种场景介绍

消息队列使用的四种场景介绍

一、简介 消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用耦合&#xff0c;异步消息&#xff0c;流量削锋等问题。 实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性架构。 使用较多的消息队列有ActiveMQ&#xff0c;RabbitMQ&#xff0c;ZeroMQ…
阅读更多...
Paper - VQGAN: Taming Transformers for High-Resolution Image Synthesis 简读

Paper - VQGAN: Taming Transformers for High-Resolution Image Synthesis 简读

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/136055085 VQGAN: Taming Transformers for High-Resolution Image Synthesis, CVPR 2021 VQGAN: 改良 Transformer 模型以实现高清图像合成 源码…
阅读更多...
CentOS7搭建Hadoop集群

CentOS7搭建Hadoop集群

准备工作 1、准备三台虚拟机&#xff0c;参考&#xff1a;CentOS7集群环境搭建&#xff08;3台&#xff09;-CSDN博客 2、配置虚拟机之间免密登录&#xff0c;参考&#xff1a;CentOS7集群配置免密登录-CSDN博客 3、虚拟机分别安装jdk&#xff0c;参考&#xff1a;CentOS7集…
阅读更多...
mysql入门到精通005-基础篇-约束

mysql入门到精通005-基础篇-约束

1、概述 1.1 概念 约束是作用于表中字段上的规则&#xff0c;用于限制储存在表中的数据。 1.2 目的 保证数据库中数据的正确性、有效性和完整性。 1.3 常见的约束分类 一旦谈到外键&#xff0c;则至少涉及2张表约束是作用于表中字段上的&#xff0c;可以在创建表/修改表的…
阅读更多...
最新文章

Copyright @ 2022~2023