JavaScrpit—数据类型转换

news/2025/2/11 3:40:36/

目录

 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=`hellowoed`

4.模板字符串

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

 6、类型转换 

//数字转字符串String(数字)数字+""数字.toString()

字符串转数字

//字符串转数字字符串-0Number(字符串)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.ppmy.cn/news/58572.html

相关文章

leetcode657. 机器人能否返回原点

题目描述解题思路执行结果 leetcode657. 机器人能否返回原点 题目描述 机器人能否返回原点 在二维平面上&#xff0c;有一个机器人从原点 (0, 0) 开始。给出它的移动顺序&#xff0c;判断这个机器人在完成移动后是否在 (0, 0) 处结束。 移动顺序由字符串 moves 表示。字符 mov…

1992-2022年31省GDP、第一产业增加值、第二产业增加值 第三产业增加值

1992-2022年31省GDP、第一产业增加值、第二产业增加值 第三产业增加值 1、时间&#xff1a;1992-2022年 2、范围&#xff1a;包括31省 3、指标&#xff1a;省GDP、省第一产业增加值、省第二产业增加值、省第三产业增加值 4、缺失情况说明&#xff1a;无缺失 5、来源&#…

我想知道,就目前形势而言,学java好还是C++好?

前言 就现实点看看&#xff0c;可以对比现在Java和C的市场占有率&#xff0c;可以看到&#xff0c;到目前为止&#xff0c;Java在国内编程语言的市场仍然是占据着大头&#xff0c;在招聘当中Java的人数占有率仍然是遥遥领先于C&#xff0c;Java目前开阔的市场以及其巨大的岗位…

【stm32疑难杂症】:Error: L6218E: Undefined symbol TIM_Cmd (referred from timer.o).

项目场景&#xff1a; 在使用工程是发现问题&#xff1a; ..\OBJ\OLED.axf: Error: L6218E: Undefined symbol TIM_Cmd (referred from timer.o). ..\OBJ\OLED.axf: Error: L6218E: Undefined symbol TIM_ITConfig (referred from timer.o). ..\OBJ\OLED.axf: Error: L6218E: …

搭建electron-vue下

搭建electron-vue下 npm install 后续问题Version 9 of Highlight.js has reached EOL. npm run dev 后续ReferenceError: Unknown plugin "component" specified in ...Error: Cannot find module electron-logCant resolve axios inCant resolve vue-electronCant …

1.软件测试

目录 一、面试重点 1.什么是软件测试&#xff1f; 2.软件测试和软件开发的区别 3.你为什么选择软件测试&#xff1f; 4.什么是需求&#xff1f; 5.软件测试人员如何深入了解需求&#xff1f; 6.什么是内存泄露&#xff1f; 7.什么是测试用例&#xff1f; 8.测试用例有…

HTTP协议:大文件传输

有时候从服务器下载的文件会很大&#xff0c;HTTP 协议本身支持一些头部字段能够让你在下载这类文件时进行一些控制。 数据压缩 首先想到的肯定是数据压缩。这个功能在请求方需要用 Accept-Encoding 字段来表明客户端支持什么样的压缩类型&#xff0c;在服务端&#xff0c;是通…

「OceanBase 4.1 体验」OceanBase 4.1社区版的部署及使用体验

「OceanBase 4.1 体验」OceanBase 4.1社区版的部署及使用体验 一、前言1.1 本次实践介绍1.2 本次实践目的 二、准备环境资源2.1 部署前需准备工作2.2 本地环境规划 三、部署Docker环境3.1 安装Docker3.2 配置Docker镜像加速3.3 开启路由转发3.4 重启Docker服务 四、检查本地Doc…