JavaScript入门——笔记用

news2024/11/26 0:53:27

JavaScript入门

    • 变量
    • 数组
    • 常量
    • 模板字符串
    • 检测数据类型
    • 判断
    • 分支判断
    • 循环
    • 数组
    • 函数
    • 对象

与html和css不同的是js并不是一门标记语言,而是与java等相同,也是一门编程语言(实现人机交互的运行在客户端即浏览器的编程语言)

JavaScript作用:

  • 1、网页特效(监听用户行为让网页做出对应反馈)
  • 2、表单验证(针对表单数据做合法性判断)
  • 3、数据交互(获取后端数据,渲染到前端)
  • 4、服务端编程(node.js)

js组成

输出语法:

  • 文档输出内容:document.write(‘xxxxx’)
  • 页面弹窗:alert(‘xxxxxx’)
  • 控制台日志打印输出:console.log(‘xxxxx’)

输入语法:

  • 页面弹窗提示框:prompt(‘xxxxxx’)
    alert()与prompt()会跳过页面渲染先被执行

变量

存储数据的容器

不推荐使用var、重要的事情要加重,不推荐使用var哦,目前几乎已经淘汰它咯

//声明变量:let 变量名
let age
//赋值:变量名 = 赋值
age = 18
console.log(age)
//变量初始化
let name = 芋头

数组

//数组初始化: let 数组名 = [数据1 , 数据2 , 数据3]
let ages = [18 , 19 , 20]
//splice(x , y)从x下标开始删除y个元素
ages.splice(0 , 1)

常量

const声明表示内存地址不可改变,当声明为数组时,数组中数据仍可改变哦

 const PI = 3.14

模板字符串

外面用反引号里面变量“${变量名}”

let age = 22
document.write(`芋头今年${age}岁了  `)

检测数据类型

//typeof 数据
let age = null 
typeof age

判断

" == " :值相等
" === " :完全相等
" != " : 值不相等
" !== " : 完全不相等

if (1 != '1'){
	console.log('相等')
} else {
	console.log('不相等')
}

分支判断

case做的判断是全等于判断哦~~

	let num1 = +prompt("输入第一个数")
   switch (num1){
    case 1: 
      alert("一") 
      break
    case 2:
      alert("二")
      break
    default:
      alert("不是一和二")
      break
      
   }

循环

while、do…while ; for
break:退出整个循环 ; continue:结束本次循环继续下一次循环

 		let num = 0
        while (num < 10){
            document.write(`现在这个数是${num}<br>`)
            num ++
        }
        do {
            document.write(`现在这个数是${num}<br>`)
            num ++
        } while (num < 20)
        for (;num < 30 ; num ++){
            document.write(`现在这个数是${num}<br>`)
        }

循环结果

数组

  • 添加
    let arr = ['张飞', '赵云']
    // 新增  push 推末尾并返回该数组的新长度
    console.log(arr.push('黄忠'))  
    arr.push('马超', '关羽')
    console.log(arr)
    // 开头追加 并且返回数组新长度
    arr.unshift('吕布')
    console.log(arr)
  • 删除
 let arr = [0 , 1 , 2 , 3 , 4 , 5]
    //pop():删除最后一个元素并返回该元素的值
    arr.pop()
    console.log(arr)
    //shift():删除第一个元素并返回元素的值
    arr.shift()
    //splice(start , deleteCount):从start位置开始删除deleteCount个元素
    arr.splice(0 , 2)

函数

//交换a , b的值
    let a = 10 
    let b = 20
    console.log(`a 现在的值是:${a};b现在的值是:${b}`)
    serve(a,b)
    function serve(a , b) {
      let temp = a 
      a = b
      b = temp
      console.log(`a 现在的值是:${a};b现在的值是:${b}`)
    }
    //实际不会换,实参与形参问题

函数内部不声明直接复制的变量会当作全局变量处理

    let num = 10 
    function fun (){
	    //let num = 20   局部变量使用不影响num
 	    num = 20     //全局变量会影响num的值
    }
    fun()
    console.log(num)

函数在查找变量时会一层一层向外查找

当然这里还得提一嘴立即执行函数,话不多说如下代码所示

//立即执行函数不需要调用会直接执行函数里的内容
(function(){
	console.log("这是一个立即执行函数")
})();

(function(a , b){
	console.log(a + b)
})(10 , 20);

对象

    let man = {
      name: "芋头",
      num: 22,
      sex: "男",
      powers: function (a) {
        console.log(`make ${a} fly`)
      }
    }
    console.log(man.name)
    console.log(man["sex"])
    console.log(man.powers("person"))
    delete man.sex//删除属性

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

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

相关文章

算法训练营第四十三天||● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

● 1049. 最后一块石头的重量 II 这道题和昨天的分割等和子集一样&#xff0c;只是最后返回值不一样 class Solution { public:int lastStoneWeightII(vector<int>& stones) {int sum 0;for(int i 0;i<stones.size();i){sum stones[i];}int target sum / 2;…

结构型模式 - 享元模式

概述 定义&#xff1a; 运用共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来大幅度减少需要创建的对象数量、避免大量相似对象的开销&#xff0c;从而提高系统资源的利用率。 结构 享元&#xff08;Flyweight &#xff09;模式中存在以下两种状态&…

Python案例之新浪世界杯各国球队数据(德国VS日本)

目录标题 前言知识点:开发环境:实现代码:代码展示尾语 前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 知识点: 动态数据抓包 requests发送请求 json数据解析 开发环境: python 3.8 运行代码 pycharm 2021.2 辅助敲代码 requests pip install requests 第三方模块…

linux系统上安装R语言并安装mclust包

请注意&#xff0c;如果你本来就是root账号&#xff0c;则所有的sudo都不用加。 x.1 安装R语言 安装R语言建议使用清华源&#xff0c;链接https://mirrors.tuna.tsinghua.edu.cn/CRAN/bin/linux/ubuntu/ 把下面这一串代码在terminal中全部输入便可&#xff0c;5000个R包也建…

分类管理业务开发 -- 手把手教你做ssm+springboot入门后端项目黑马程序员瑞吉外卖(四)

文章目录 前言一、开发功能预览二、公共字段自动填充1.问题分析2.代码实现3.功能测试4.功能完善 三、新增分类1.需求分析2.数据模型3.代码开发4.功能测试 四、分类信息分页查询1.需求分析2.代码开发3.功能测试 五、删除分类1.需求分析2.代码开发3.功能测试4.功能完善 六、修改分…

VS2013配置所有项目附加包含目录的办法

任意打开一个项目&#xff0c;点击视图->其他窗口->属性管理器 在属性管理器中打开Debug|Win32&#xff0c;找到Microsoft.Cpp.Win32.user&#xff0c;双击打开 直接配置VC的附加包含目录就可以了 之后所有项目都会继承这些目录 这样就不用为每个项目配置库包含目录了…

[微信小程序] 关于自定义字体的坑

报错&#xff1a; [渲染层网络层错误] Failed to load local font resource... the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) ... 原因&#xff1a;小程序不允许引用本地ttf等字体文件 解决办法&#xff1a;改成网络引用&#xff0c;或者…

通过xshell连接服务器后出现中文乱码的解决方法

先查看服务器环境变量中设置的是什么字符集&#xff0c;命令为&#xff1a;locale 然后在xshell工具中把字符集设置为上面查出来的 然后关掉xshell工具再重新打开。

Python SMTP发送邮件

如何使用Python发送QQ邮件&#xff1f;如何发送带附件的邮件&#xff1f;这篇文章将详细说明 目录 一、发送邮件 二、发送HTML格式的邮件 三、在HTML中添加图片 四、发送带附件的邮件 五、最终整合版 六、配置指引 一、发送邮件 import smtplib from email.mime.text im…

疑问:为什么我的手机不能同时放两张电信卡呢?联通移动可以

很多后台的小伙伴私信我&#xff1a;“为什么我的双卡双待手机不能用两张电信卡呢&#xff1f;”其实我一直在认真的去查证这个问题&#xff0c;因为现在普遍网上的大流量手机卡套餐&#xff0c;电信是主力&#xff0c;如果第一张卡是电信&#xff0c;第二张卡不能使用电信了&a…

物联网大数据传输安全难题与解决方案

随着物联网时代的到来&#xff0c;大数据传输变得更加频繁和庞大&#xff0c;同时也给传输安全带来了更高的风险和挑战。本文将探讨物联网时代的大数据传输安全问题&#xff0c;并介绍镭速传输如何有效地解决这些问题。 首先&#xff0c;物联网时代的大数据传输面临的一个主要问…

查看IP地址方法(电脑IP地址方法)

查看IP地址方法 如何识别win7还是win10系统&#xff1f; &#xff08;一&#xff09;Win7系统电脑导航栏如下&#xff1a; &#xff08;二&#xff09;Win10系统电脑导航栏如下&#xff1a; 一、win7系统查看IP地址 方法一&#xff1a;查看网络设置 点击电脑导航栏最右下…

中间件上云部署 rocketmq

中间件上云部署 rocketmq rocketmq部署一、rokectmq介绍二、rokectmq特性三、使用rocketmq理由四、rocketmq 核心概念五、rocketmq角色六、rocketmq集群部署方式七、rocketmq集群部署7.1 环境说明7.2 构建rocketmq镜像7.3 获取rocketmq-dashboard镜像7.4 rocketmq部署描述文件编…

ROS学习——常用API

一、初始化 1.作用 ROS初始化函数 2.参数列表 argc------------封装实参的个数&#xff08;n1&#xff09; argv------------封装参数的数组 name----------为 节点命名&#xff0c;需要保证其唯一性 options---------节点启动选项 返回值&#xff1a;void 3.使用细节 …

超低输入电压升压电路解决方案

便携式产品一般都采用电池供电&#xff0c;而因为成本和体积方面的考虑&#xff0c;在设计上有减少使用电池数量及体积的趋势。另外&#xff0c;亦因全球能源问题&#xff0c;各种各类的电池使用已备受关注了。当中包括太阳能电池及燃料电池。 而这样就会影响到电源电压比设备所…

人工智能革命|是疯狂炒作还是大势所趋?

近期关于人工智能的话题与炒作激增。如果你看看过去五年“AI”一词的搜索量&#xff0c;就会发现它一直停滞&#xff0c;直到2022年11月30日&#xff0c;OpenAI 凭借 ChatGPT 引发了人工智能革命。 Google 趋势 — 过去 5 年“AI”搜索量 短短六个月内&#xff0c;究竟发生了…

系统学习Linux-搭建基础服务器实验集合

实验分析 主机DHCP分配静态253地址&#xff0c;需配置网关主机DNF静态分配252地址域名机dhcp自动分配地址要求251中继主机添加成两块网卡并配置两个网段的网卡地址DNS解析域名并把客户机251装apache、tomcat、ngnix并把根目录设置成web下 一、搭建DHCP服务器 vm1网卡 配置网…

「硬核」实操如何拥有一个自己的数字人模型

一、前言 近年来&#xff0c;随着人工智能技术&#xff0c;VR&#xff0c;元宇宙等技术的发展&#xff0c;数字人&#xff08;Digital Human&#xff09;逐渐成为研究的热点之一&#xff0c;数字人是指通过计算机技术模拟出的具有人类外表&#xff0c;动作和语言能力的虚拟人物…

【想要学习适当技能来处理复杂数据科学项目和“用数据思考”?看《现代数据科学(R语言·第2版)》就对了】

《现代数据科学(R语言●第2版)》是面向本科生的综合性数据科学教材&#xff0c;通过结合使用统计和计算方式来解决现实中的数据问题。本书不仅专注于案例或编程语法&#xff0c;还讲述如何利用最新R/RStudio计算环境中的统计编程&#xff0c;从各种数据中提取有意义的信息&…

Jmeter性能测试通过插件监控服务器资源使用情况

Jmeter作为性能测试的首选工具&#xff0c;那么在性能测试过程中如何方便快捷的监测服务器资源使用情况&#xff1f; 可以通过jmeter 安装"PerfMon(Servers Performance Monitoting)"插件并配合服务端资源监控工具进行实现&#xff0c;详细操作流程如下&#xff1a;…