JavaScrpit—数据类型转换

news2024/11/24 16:37:09

目录

 1、起  源 

 理 念 

 2、特 点 

 框 架 

AngularJS框架

WebSocket协议

 3、书 写 位 置 

 注 释 

 浏览器调试js代码 

 4、变量作用 

 全局变量 

 局部变量 

 常量 

 5、数据类型 

 数 组 

 严格检查数据类型 

 字符串 

 6、类型转换 

字符串转数字

转bool值

能力判断

 7、编码方式 

 js三元表达式的简写 

 js与CSS的区别 


结构层:HTML 决定网页内容

表现层:CSS 提供样式

行为层:javascript 网页动起来

 1、起  源 

处理网页中的前端验证(指检查用户输入的内容是否符合一定规则)

 理 念 

这些验证过于简单,放在服务器没必要,因此把它放在浏览器。

 2、特 点 

 框 架 

  1. AngularJS框架

  1. WebSocket协议

 3、书 写 位 置 

1. 在head标签中添加<script>标签

<script type="text/javascript">

    alert("第一行js代码哟");   //弹出提示框

</script>

2. 写在标签的属性中(结构与行为耦合,不方便维护)

<body>

    <!--点击按钮,执行js代码-->

    <button onclick="alert('不许点');">点我一下</button>

</body>

3. 写在超链接href属性中

<a href="javascript:alert('还点');">我是超链接</a>

4. 写在外部js文件中,通过script标签引入(一旦被引用,再修改js文件的代码也没用了)

<script type="text/javascript" scr="js/script.js">

</script>

 注 释 

  1. 多行/**/
  2. 单行//

 浏览器调试js代码 

  1. 按F12找到脚本代码
  2. 设置断点
  3. IE:刷新后按F11调试
  4. 谷歌:F10调试
  5. 在控制台打印变量值

 4、变量作用 

  1. 在函数体声明的,函数外不能用
  2. 函数内可以访问函数外的成员
  3. 内外函数重名,就近原则

 全局变量 

js只有一个全局变量——window,很容易发生重名的冲突,所以可以自己绑定一个全局变量。

//自己写的全局变量

var quanju={};

//把函数和字段绑定在这个全局变量中

quanju.name='lala';

quanju.add=function(a,b){

    return a+b;

}

 局部变量 

建议使用let,不用var

 常量 

所有字母大写

const IP='不能变了';

 5、数据类型 

  1. 基本类型:数字类型(数字是浮点类型,不精确)、布尔类型、字符串类型(单、双引号都行,视情况而定,一般双引号里嵌套单引号)
  2. 引用类型:对象类型(用new生成的对象就是)、函数类型
  3. 空类型:unll、undefined
  4. 包装类型(Number、String、Boolean)(首字母大写)

        基本类型不是对象,不具备方法,只是一个简单的数据。在执行诸如“num.toString()”的时候,编译器会自动根据num生成一个Number类型的对象,并调用toString方法将结果返回,然后释放Number对象,等待垃圾回收。

        NaN与自己不相等

 数 组 

① 数组的字面值、直接量(js里就大量使用字面值)

var arr=[1,2,2,true,'hello'];     //直接直观,什么类型都能放

② 构造方法创建数组(①②是一样的)

var arr=new Array(1,2,2,true,'hello');  //对象是(),数组是[]

取数组下标,如果越界了会报undefind

给arr.length赋值,数据长度就会变化(慎用)

 严格检查数据类型 

i=1; //不写类型时是全局变量

var i=1;//局部

let i=1; //局部,建议使用

const i=1;//常量

因为js的数据类型非常灵活,为了防止出错,有了严格检查模式‘use strict’

'use strict'   //必须写在script的第一行,有格式不严谨的就会报错

let i=1;

 字符串 

不可变

1.正常字符串使用单引号 或双引号包裹

2.注意转义字符\

\n  换行

\r

3.多行字符串编写(esc下边,tab上边)

var msg=

`hello

woed`

4.模板字符串

let name="xiaxia";

let msg='你好呀,${name}'

 6、类型转换 

//数字转字符串

String(数字)

数字+""

数字.toString()

字符串转数字

//字符串转数字

字符串-0

Number(字符串)

parseInt()

parseFloat()

转bool值

加两个!!(意思是否定一次再否定一次)

if(!!val){

}

能力判断

(判断对象里是否有某个函数)

//判断o里是否有函数foo,没有就添加

if(!o.foo){

    o.off=function(){};

}



//典型:JQuery中trim方法(不做赘述)

剩下的好好看图,图上都有:

 7、编码方式 

  1. 无论是js还是css都可以写在页面中
  2. <script>、<style>可以放在页面中的任何一个地方,可写一个或多个
  3. 为了页面流畅,一般将<style>和<link>放在前面,<script>放在后面

 js三元表达式的简写 

        对于js中的逻辑或运算,如果参与运算的数据不是布尔类型,看第一个操作数是否为真,如果是,整个表达式的返回值就是第一个操作数(可以是函数、字符串等等)

//f=f ? f:function(a,b) {return a-b;};

//下面是三元表达式的简写,f为真,返回值就是f函数本身,否则就是第二个函数

f=f || function(a,b) {return a-b;};

 js与CSS的区别 

Css:有background-color 这种写法

js:使用小驼峰命名规则,或者使用关联数组(把一个对象当数组来用),js不支持重载

<head>

<meta charset="utf-8" />

<title></title>

<script type="text/javascript">

                  onload=function(){

                         var p=document.getElementsByTagName("p")[0];

                         //backgroundColor就是小驼峰命名

                         p.style.backgroundColor="pink";

                         p.style.borderTopColor="blue";

                         p.style.borderTopStyle="dashed";

                           //关联数组,数组内是css的写法,真灵活

                         p.style["border-top-widrh"]="1px";

                  };    

</script>

</head>

<body>

<p>我是一个段落</p>

</body>

效果如下:

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

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

相关文章

Spring IOC相关注解运用——上篇

目录 前言 一、Component 二、Repository、Service、Controller 三、Scope 四、Autowired 五、Qualifier 六、Value 1. 直接设置固定的属性值 2. 获取配置文件中的属性值 3. 测试结果 往期专栏&文章相关导读 1. Maven系列专栏文章 2. Mybatis系列专栏文章 3.…

记录一次Linux下ChatGLM部署过程

前言 本地化的GPT就是香&#xff0c;就是有点费钱。 项目地址&#xff1a;https://github.com/THUDM/ChatGLM-6B 前期准备 服务器&#xff08;本机的跳过&#xff09; 由于本地电脑显卡都不行&#xff0c;所以我租了AutoDL的一台算力服务器。Tesla T4 16G显存&#xff0c;…

自供电-测力刀柄资料整理

自供电-测力刀柄资料整理 2. 相关专利2.1 实时测量铣削过程中床主轴温度装置【1】2.2 一种基于应变片的测力系统【2】 3. 相关商业化产品3.1 spike 测力刀柄【3】3.2 瑞士奇石乐&#xff08;Kistler&#xff09;旋转切削测力仪【4】3.3 kistler的通用型压电式切削力测量系统3.4…

SPSS如何进行聚类分析之案例实训?

文章目录 0.引言1.快速聚类分析2.分层聚类分析3.两阶段聚类分析 0.引言 因科研等多场景需要进行绘图处理&#xff0c;笔者对SPSS进行了学习&#xff0c;本文通过《SPSS统计分析从入门到精通》及其配套素材结合网上相关资料进行学习笔记总结&#xff0c;本文对聚类分析进行阐述。…

【软考高项笔记】第1章 信息化发展1.5 数字化转型与元宇宙

1.5 数字化转型与元宇宙 元宇宙本质上是对现实世界的虚拟化、数字化过程&#xff0c;需要对内容生产、经济系统、用户体验以及实体世界内容等进行大量改造1.5.1 数字化转型 新建一个富有活力的数字化商业模式 组织对业务进行彻底重新定义&#xff08;大洗牌&#xff09;之后才…

浅谈明日方舟游戏系统

主要玩法&#xff1a;敌方阵营从敌方初始点进入战斗并且沿着怪物前进路线行驶到己方保护目标。玩家可以通过部署干员守护己方保护目标&#xff0c;防止敌方阵营进入&#xff1b;当保护目标的生命值为0时&#xff0c;则战斗失败&#xff0c;任务结束。 1 干员系统 1.1 职业分支…

linux(stat-readdir-dup2)04-虚拟地址空间,stat函数,文件,目录,errno说明,dup2和dup

01 学习目标 1.掌握stat/lstat函数的使用 2.了解文件属性相关的函数使用 3.了解目录操作相关的函数的使用 4.掌握目录遍历相关函数的使用 5.掌握dup,dup2函数的使用 6.掌握fcntl函数的使用 02 虚拟地址空间 03 打开最大文件数量 openmax.c #include<stdio.h> #include&…

Redo log详解

WAL&#xff08;Write-Ahead Logging&#xff09;机制 WAL 的全称是 Write-Ahead Logging&#xff0c;中文称预写式日志(日志先行)&#xff0c;是一种数据安全写入机制。就是先写日志&#xff0c;然后再写入磁盘&#xff0c;这样既能提高性能又可以保证数据的安全性。Mysql中的…

华为MPLS跨域C2方式RR场景(数据不经过RR)实验配置

目录 配置BGP邻居的建立 配置MPLS LDP 配置RR之间的MP-BGP邻居 配置通过ASBR学习PE路由并为PE分配标签&#xff08;实现Vpnv4路由传递和数据传输&#xff09; 根据图配置接口的IP地址和IGP协议 配置BGP邻居的建立 PE1和RR1建立MP-IBGP邻居&#xff08;RR1传给PE1的Vpnv4路…

进程/线程 状态模型详解

前言&#xff1a;最近操作系统复习到线程的状态模型&#xff08;也可以说进程的状态模型&#xff0c;本文直接用线程来说&#xff09;时候&#xff0c;网上查阅资料&#xff0c;发现很多文章都说的很不一样&#xff0c;有五状态模型、六状态模型、七状态模型.......虽然都是对的…

【1024杯】web

文章目录 1024_fastapi信息收集SSTI 1024_柏拉图信息收集phar反序列化 1024_WEB签到1024_图片代理信息收集gopherus|fastcgi 1024_hello_world信息收集ssti盲注 1024_fastapi 信息收集 FastAPI 是一个高性能 Web 框架&#xff0c;用于构建 API。 主要特性&#xff1a; 快速&am…

【头歌】完整汇编语言程序设计

摘自头歌实训​​​​​​ 目录 相关知识 1.1 RISC-V 汇编语言程序基本结构 1.2 RISC-V 汇编语言程序主要元素 1.2.1 汇编指令 1.2.2 标签 1.2.3 汇编指示语句 1.3 RISC-V 汇编语言程序示例 相关知识 RISC-V 操作数类型、基本调用约定等已在前序关卡中介绍&#xff0c;…

云渲染是您3D项目的最佳选择吗?

市面上很多优秀的大型动画电影&#xff0c;一般都是由实力较大的视觉特效团队制作的&#xff0c;而且大部分使用的是基于云的渲染服务来进行最终渲染。像《哪吒之魔童降世》这样 IMAX 3D 首部国产动画电影、并且刷新了中国动画电影票房纪录的作品&#xff0c;就是现代3D动画提供…

ChatGPT做PPT方案,10组提示词方案!

今天我们要搞定的PPT内容是&#xff1a; 活动类型&#xff1a;节日活动、会员活动、新品活动分析类型&#xff1a;用户分析、新品立项、项目汇报内容类型&#xff1a;内容规划、品牌策划 用到的工具&#xff1a; mindshow 邀请码 6509097ChatGPT传送门&#xff08;免费使用…

《Linux0.11源码解读》理解(二) 加载setup、加载system

现在CPU开始执行bootsect&#xff0c;它的作用是把第二部分、第三部分程序陆续加载到内存中。把放到合理的内存位置需要先对内存进行规划。 根据上一节&#xff0c;boostsect当前所在内存位置是0x07c0&#xff0c;大小为512byte&#xff0c;现在要将其挪动到内存的0x9000&…

无代码时代来了,程序员会失业吗?不,程序员又不够用了!

有人问我无代码时代来了&#xff0c;程序员会失业吗&#xff1f;太难了&#xff0c;秃了头就算了&#xff0c;连工作也保不住了&#xff1f; 先说观点&#xff1a;并不会 因为&#xff0c;无代码不是真正意义上的无代码。 无代码开发的使用对象是编程小白&#xff08;我猿是…

Redis的命令以及数据类型

1.Redis的通用命令 KEYS&#xff1a;查看符合模板的所有key&#xff0c;不建议在生产环境设备上使用 DEL&#xff1a;删除一个指定的key EXISTS&#xff1a;判断key是否存在 TTL&#xff1a;查看一个KEY的剩余有效期 2.String类型 String类型&#xff0c;也就是字符串类型…

【Halcon】 Halcon 22.11 安装详细教程

文章目录 1安装2 获取许可证 license2.1 license下载2.2 激活 license放置在相应文件夹下 3 DLT 安装 1安装 1.解压安装包 2.打开运行 exe 程序 跳转至页面 点击“可获得的”&#xff0c;并安装 选择&#xff1a; AVAILABLE ->INSTALL 可获得的 ->安装 5. 等待安装 6…

jQuery -- 常用API(下)

4. jQuery属性操作 4.1 设置或获取元素固有属性值prop() 所谓元素固有属性就是元素本身自带的属性&#xff0c;比如 元素里面的 href &#xff0c;比如 元素里面的 type。 获取属性语法&#xff1a;prop(属性)设置属性语法&#xff1a;prop(属性, 属性值) 4.2 设置或获取元…

掌握黑客技术:从Kali渗透测试开始

前言 Kali Linux是一种流行的渗透测试和网络安全工具&#xff0c;广泛用于测试和评估网络系统和应用程序的安全性。下面是一个简单的Kali Linux使用教程&#xff08;Kali使用教程中需要学习的知识点&#xff09;&#xff0c;旨在帮助初学者了解如何使用Kali Linux进行渗透测试…