前端之javaScript
css之javaScript
JS简介
JS属于编写运行在浏览器上的脚本语言。JS采用ECMScript语法。
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:
- 核心(ECMAScript)
- 操作BOM:浏览器对象模型。整合js和浏览器
- 操作DOM:文档对象模型。整合js,css,html
ps:
JavaScript 是脚本语言。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
eg:使用浏览器的历史记录,使用浏览器的弹出框,修改页面内容,修改页面样式,响应用户交互事件等。
JavaScript引入
- 行间式:存在于行间事件中
<!--行间式:就是代码块书写在全局事件属性中--> <!--单击,this就是激活该代码块(脚本)的页面标签(页面元素对象)--> <div id="box" onclick="this.style.borderRadius= '10px'"></div> <!--双击--> <div id="box2" ondblclick="this.style.backgroundColor='orange'"></div>
- 内联式:存在于页面中script标签中
<div id="temp"></div> <!--内联式:id为标签的唯一标识,使用可以识别到HTML的具体标签--> <script> temp.onclick=function () {//完成某一项功能 this.style.width="280px" //this=>temp } </script>
- 外联式:存在于外部JS文件中,通过script标签src属性连接
<div id="res"></div> </body> <!--外联式--> <script src="外联式JS文件.js"></script> </html>
JS的语言规范
JS的注释规则
js的注释规则分为单行注释和多行注释两种方式。
// 这是单行注释 /* 这是多行注释 */
JS的结束符号
JavaScript中的语句要以分号 ; 为结束符。eg:console.log('hello world'); 其中【console.log就相当于print】。
JS的变量声明规则
- 在JS的语言规则当中,定义一个变量必须要先用关键字声明才能够使用。声明变量使用var关键字来声明,格式为:>>> 【 var 变量名 ;】
- JavaScript的变量名可以使用_,数字,字母,$组成,但不能以数字开头。
//var声明都是全局变量 var name = "Alex"; var age = 18; //let可以声明局部变量,存在于ES6版本重 let name = 'jason' //JS存在绝对的常量,即常量声明,也是存在于ES6版本当中,一旦声明,它的值就不能改变 const pi = 3.14
note:
- 在网页源代码的console当中编写JS代码。
- 变量名是区分大小写的。
- 推荐使用驼峰式命名规则。
- 保留字不能用做变量名。
JS的数据类型
JS当中使用typeof来查看数据类型,相当于python当中的type。
数值类型Number
JavaScript不区分整型int和浮点型float,就只有一种数字类型。
// Number: 数字类型 var a1 = 10; //整型int var a2 = 3.14 //浮点型float //NaN:属于数值类型,代表非数字值的一个特殊值。意思是'不是一个数字'(not a number),
/* eg: parseInt('abc') 不报错返回NaN parseFloat('abc')不报错返回NaN /*
字符串类型string
字符串只能是单引号和双引号两种类型。只支持单行文本格式。
ES6版本提供了多行文本的格式,使用小顿号 [ ` 文本内容`]。
var a = "Hello" var b = "world; var c = a + b; console.log(c); // 得到Helloworld
字符串类型的常用方法
- 字符串的拼接
JS当中拼接字符串一般使用“+”
- 统计长度
JS中使用 .length ; python中使用len()
- 移除空白(不能指定移除)
JS中使用 trim()、trimLeft()、trimRight()
python中使用strip()、lstrip()、rstrip()
- 字符串的切片操作
JS中使用substring(start,stop)、和slice(start,stop)>>>:前者不支持负数索引取值,后者可以支持负数
python中使用 >>>:[index1:index2]
- 字符串的大小写转换
JS中使用.toLowerCase()、.toUpperCase()
python中使用lower()、upper()
- 切割字符串
JS和python都是用split()来分割字符串
ss1.split(' ') 》》》['jason', 'say', 'hello', 'big', 'baby'] ss1.split(' ', 1) 》》》['jason'] ss1.split(' ', 2) 》》》['jason', 'say'] //数字代表控制切割之后的个数
- 字符串的格式化
//js当中使用小顿号来引用,$格式化字符串,而python当中使用%或者format var name = 'jason' var age = 18 console.log(` my name is ${name} my age is ${age} `) >>>:my name is jason my age is 18
ps:
方法 | 说明 |
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, ...) | 拼接 |
.indexOf(substring, start) | 子序列位置 |
.substring(from, to) | 根据索引获取子序列 |
.slice(start, end) | 切片 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
布尔类型
- JS中的布尔值是Boolean;相当于python中的布尔值bool
- js中布尔值是全小写>>>:true和false;而python中的布尔值首字母大写>>>:True和False
- JS当中布尔值为false的值为:0;空字符串;null(空);underfined(没有定义);NaN
- python当中的布尔值为False的值为:0;None;空字符串;空列表;空字典
null和undefined
- null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
- undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
- null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。
引用类型:对象
JavaScript 中的所有事物都是对象:字符串、数值、数组(相当于列表)、函数...此外,JavaScript 允许自定义对象。
// Object var obj = {}; // Function var func = function(){} // Null var n = null;
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。
数组
数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。
var a = [123, "ABC"]; console.log(a[1]); // 输出"ABC"
数组的常用方法
- 追加元素
JS中使用push() ;python中使用append()
- 弹出元素
JS和python都用的pop()
- 头部插入元素
JS中使用unshift() ;python中使用insert()
- 头部移除元素
JS中使用shift() ;python中可以使用pop(0)
- 扩展列表
JS中使用concat() ;python中使用extend()
- .forEach()
将数组的每个元素传递给回调函数
forEach(function(currentValue, index, arr), thisValue)
- .splice()
删除元素,并向数组添加新元素。
splice(index,howmany,item1,.....,itemX)
ps:
方法 | 说明 |
.length | 数组的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串 |
.concat(val, ...) | 连接数组 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步