前端--JS

一、JS书写的规范

  1.1、放在head头中:
    文件引入:<script src="test.js"></script>

<head>
    <script src="test.js"></script>
</head>

  1.2、写在body体后面  

<body>
     <script>
         alert('asdasdasda');
     </script>
</body>

二、JS常见的调试格式

2.1、alert('asdasdasda')                #打开页面上时,弹出一个对话框,内容为'asdasdasda'。
2.2、console.log('asdasdasda');    #在console里面显示内容 (console是一个对象,log是console的一个函数)
2.3、单行注释: //
2.4、多行注释:/* balabalabala */
2.5、JS代码是以";" 结尾的。
2.6、JS的变量声明
	局部变量:var name "sudada";
	全局变量:name "sudada";

  2.7、JS变量类型

 1)num
	var age = 12;
	var age = 1.1;
 2)字符串
	var name = "sudada";
 3)数组
	var array = [1,2,3,"sudada"];
 4)字典
	mydict = {"name":"sudada","age":12}
 5)布尔值
	true
 	false
 6)null
	变量的值是null
 7)undefined	
	变量声明但是没有给具体的值

 2.8、常用方法

obj.length           					# 查看字符的长度
obj.trim               					# 移除空白
obj.trimLeft       						# 移除空白(左)
obj.trimRight    						# 移除空白(右)
obj.charAt(n)    						# 按照索引取值
obj.concat(valur1,valur2)    			# 字符拼接  valur1 + valur2
obj.indexOf(substring,start)     		# 根据值取索引
obj.substring(0,3)                		# 根据索引做切分
obj.slice(start,end)                    # 切片
obj.splice("2,1")                       # 用于添加或删除数组中的元素(方法用于添加或删除数组中的元素,例子:splice(2,1)表示对第二个索引进行删除,删除一个值,splice(2,0)表示删除0个值)
obj.toLowerCase()                       # 小写
obj.toUpperCase()                       # 大写
obj.split(",")                          # 指定逗号","为分隔符

 2.9、运算符介绍

1、加减法
	i = i+1
	i = i-1
		
2、比较运算符
	>  # 大于
	>= # 大于等于
	<  # 小于
	<= # 小于等于
	!= # 不等于
	==   #  值相等,类型不相等
	===  #  值相等,且类型相等
    !==         # 值不相等且类型不相等
	 例子:
	 a = "11"
	 b = 11
	 那么:
	 a == b;     # 返回true
	 a === b;    # 返回false
		
3、逻辑运算符
	&&   # 与
	||      #  或
	!       #  非

  2.10、流程控制

if (条件){
		
	}else if(条件){
		
	}else{
		
	}
		
	for 循环:
	obj = {"name":"sudada","age":12}
	for (var i in obj) {
		console.log(obj[i])
}

  2.11、函数表达式

第一种:普通写法(常用)
	function test(a,b){  # a,b指的是传的参数
		console.log();
		return;
	}
	test();              # 执行函数

第二种:匿名函数(常用)
    var test = function () {
    }

第三种:自执行函数(立即就执行的函数)
    (function () {console.log('hello')}) ()

  2.12、switch 语句

var day=new Data().getDay();
  switch (day){
      case 0:
            x="Today is 0";
            break;
      case 1:
            x="Today is 1";
            break;
      case 2:
            x="Today is 2";
            break;
      case 3:
            x="Today is 3";
            break;
      default:
            x = "xxx"
}

  2.13、三元运算符

var a = 3;
var b = 5;
		
c = a > b ? a:b     # 如果a>b则c的值为b,反之c的值为a。
console.log(c);

三、词法分析

function t(age) {
    console.log(age);
    var age = 99;
    console.log(age);
    function age() {
    }
    console.log(age);
    }
t(12);

输出结果:
ƒ age() {}   # 函数的声明(注意:函数的优先声明是最高的,谁都覆盖不了这个值)
99           # age的值为99
99           # 由于已经赋值var age = 99;那么console.log(age);拿到的值还是99

分析过程:
1.函数的参数  age      AO.age = undefined
2.函数的局部变量       AO.age = undefined 
3.函数声明(优先级最高)  AO.age = function () {}

函数的调用过程:
t()                # 执行函数
console.log(age)   # 都是从AO上去找相关的变量

四、常用模块和常用方法

 4.1、日期类Date

var d = new Date('1999');     # new一个Date()对象,实例化一个d。

  d.getYear()      # 从Date()对象返回一个月中的某一天
  d.getFullYear()  # 从Date()对象返回年份
  d.getMonth()     # 从Date()对象返回月份
  d.getDate()      # 从Date()对象返回一个月中的某一天
  d.getDay()       # 从Date()对象返回一周中的某一天
  d.getHours()     # 返回Date()对象的小时(0-23)
  d.getMinutes()   # 返回Date()对象的分钟(0-59)
  d.getSeconds()   # 返回Date()对象的秒数(0-59)

  4.2、Math数学对象

Math.ceil(3.5);   # 向上取值,得到4
Math.floor(3.5);  # 向下取值,得到3
Math.round(3.5);  # 四舍五入
Math.min(1,2)     # 返回最小值 
Math.max(3,4)     # 返回最大值
Math.random()     # 获取0-1之间的随机数

  4.3、常见的其他函数

          在数据传输流程中,json是以文件,即字符串的形式传递的,而js操作的是json对象,所以:json对象和json字符串之间的相互转换是关键,例如:

  1.序列化:JSON字符串转换成JSON对象  --  JSON.parse(str1);    str1是string

var str1 = ' {"name" : "sudada" , "sex" : "male" } ' ;  # 定义函数的值为JSON字符串
通过 typeof(str1); 拿到的是一个string类型

JSON.parse(str1);      # 使用JSON.parse序列化字符串

拿到的值如下:{name: "sudada", sex: "male"}

 2.反序列化:JSON对象转换成JSON字符串  --  JSON.stringify(str2);    str2是object

var str2 = {"name" : "sudada" , "sex" : "male" } ;  # 定义JSON对象
通过 typeof(str2); 拿到的是一个object

JSON.stringify(str2);           # 使用JSON.stringify(str2)反序列化

拿到的值如下: "{"name":"sudada","sex":"male"}"

3.eval :JS中的eval既能执行表达式,也能执行代码

执行代码:

eval(2+3);
5


eval(console.log('hello'))
VM20210:1 hello

4.4、URL转译

1.1、decodeURI()           # 解码URI
    decodeURI("https://www.baidu.com/%E5%93%88%E5%93%88%E5%93%88/");  # 给这个URL解码
    "https://www.baidu.com/哈哈哈/"                                   # 得到的值如下

1.2、decodeURIComponent()  # 解码URI中的组件部分
    decodeURIComponent("https%3A%2F%2Fwww.baidu.com%2F%E5%93%88%E5%93%88%E5%93%88%2F")  # 解码URI中的组件部分(对斜杠做解码)
    "https://www.baidu.com/哈哈哈/"                        # 得到的值如下


2.1、encodeURI()           # 编码URI
    encodeURI('https://www.baidu.com/哈哈哈/');            # 给这个URL编码
    "https://www.baidu.com/%E5%93%88%E5%93%88%E5%93%88/"  # 得到的值如下

2.2、encodeURIComponent()  # 编码URI中的组件部分
    encodeURIComponent('https://www.baidu.com/哈哈哈/')              # 编码URI中的组件部分(对斜杠也做编码)
    "https%3A%2F%2Fwww.baidu.com%2F%E5%93%88%E5%93%88%E5%93%88%2F"  # 拿到的值如下


3.1、escaoe()              # 对字符串进行转译
3.2、unescaoe()            # 对字符串进行解码

五、JS中的面向对象创建 -- 三种方式

5.1、通过字面量的方式创建一个对象

定义类:
	var cat = {};
	var cat = {"color":"yellow",age:5,climb:function(){console.log("climbing...")}};

通过调用类的方法,获取类里面的值:
console.log(cat.color);
	yellow

console.log(cat.age);
	5

console.log(cat.climb);
	ƒ (){console.log("climbing...")}

5.2、通过 new 创建一个空对象

定义一个空对象:
	var obj = new Object();

给这个空对象赋值:
	obj.age = 4;

那么通过调用传入的值,获取内容:
	console.log(obj.age)
	4

5.3、通过函数创建一个类

定义函数(类):
	function Person() {
	    var salary = 2000;					# var salary = 2000; 是私有的属性(这里会涉及到一个私有属性如何调用的问题,如下:在函数内定义一个共有属性,用这个共有属性去调用这个私有属性)
		this.age=23; 
		this.leg=4;							# 函数中的this和Python中的self是一样的。  this是公开的属性
		this.getSalary = function () {  	# 函数内调用私有属性"var salary = 2000;"的共有属性。这里用的是一个匿名函数实现,那么调用的时候就按照调用函数的方式去调用。
				console.log(salary)
		}
	}

定义类,类的值为Person(上面的函数)。
	var p = new Person();

掉用类的某个值:
	console.log(p.age)
	23

掉用类的某个值:
	console.log(p.leg)
	4

调用类的私有属性:
    console.log(sudada.getSalary());
    2000

5.4、JS面向对象的封装 (也就是5.3里面的)

先定义一个函数:
	function Person() {
	    var salary = 2000;    函数的私有属性
		this.getSalary = function () {    然后写一个函数去访问该私有变量:
			console.log(salary)
		}
	}

5.5、JS面向对象的继承

继承1:实例的属性不相互共享
	定义函数:
	function Dog() {
		this.leg=4;
		this.species='犬科';
	}

	
	var d1 = new Dog();           # d1 继承的是完整的类
	d1.species = "动物";
	console.log(d1.species)
	拿到的值:动物
	
	var d2 = new Dog();         # d2 继承的是完整的类,不受d1的影响
	console.log(d2.species)
	拿到的值:犬科

	
继承2:实例属性的共享
	通过prototype来实现,2个实例属性的共享。
		function Dog() {
		this.leg=4;
	}

	Dog.prototype = {"species":"犬科"}
	
	var d1 = new Dog();           # d1 继承的是完整的类,species的值是根据Dog.prototype = {"species":"犬科"}拿到的
	console.log(d1.species)
	拿到的值:犬科
	
	var d2 = new Dog();         # d2 继承的是完整的类,species的值是根据Dog.prototype = {"species":"犬科"}拿到的
	console.log(d2.species)
	拿到的值:犬科

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值