前端之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的变量声明规则

  1. 在JS的语言规则当中,定义一个变量必须要先用关键字声明才能够使用。声明变量使用var关键字来声明,格式为:>>> 【 var 变量名 ;】
  2. JavaScript的变量名可以使用_,数字,字母,$组成,但不能以数字开头。
复制代码
//var声明都是全局变量
var name = "Alex";
var age = 18;

//let可以声明局部变量,存在于ES6版本重
let name = 'jason'


//JS存在绝对的常量,即常量声明,也是存在于ES6版本当中,一旦声明,它的值就不能改变
const pi = 3.14
复制代码

 

note:

  1. 在网页源代码的console当中编写JS代码。
  2. 变量名是区分大小写的。
  3. 推荐使用驼峰式命名规则。
  4. 保留字不能用做变量名。

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) 分割

布尔类型

  1. JS中的布尔值是Boolean;相当于python中的布尔值bool
  2. js中布尔值是全小写>>>:true和false;而python中的布尔值首字母大写>>>:True和False
  3. JS当中布尔值为false的值为:0;空字符串;null(空);underfined(没有定义);NaN
  4. 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() 返回一个数组元素调用函数处理后的值的新数组

 

posted @   *sunflower*  阅读(81)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示