Javascripts基础（与python比较）

目录：

js基础

1. js介绍
2. js基础语法
   • 变量声明
   • js变量类型
   • js运算符
   • js流程控制
   • js函数
   • js类
   • js的常用函数

Javascripts基础

js介绍

1. js书写的格式

   css:
   	style
   js:
   	<script>
   	..js代码
   	</script>
   

2. 放置的位置

   css:
   	head标签中
   js:
   	1. head标签中
   	2. 可以放置在body之后（推荐）
   

3. 引入第三方的js文件

   <script src="js的资源路径"></script>
   

4. 打印输出

   console.log("helloworld")
   注：
   建议在写js代码时，加上分号
   

5. 写js代码的选择

   1. 编辑器 例如：pycharm vscode （永久生效）
   2. 浏览器开发者工具 例如：chrome firefox （F12）（临时测试js代码）
   

回到目录

js基础语法

1. 变量声明

   python:
   	name = "jeff"
   js:
   	var name = "jeff"
   变量命名规则与python相同
   可以使用_, 数字, 字母组成，且不能以数字开头
   

2. js变量类型

   python：
   	- 字符串 str
   	- 整型 int
   	- 浮点型 float
   	- 布尔 bool 例如：True,False
   	- 列表 list
   	- 字典 dict
   	- 元组 tuple
   	- 集合 set
   
   js：
   	字符串 str
   		var name = "jeff" ## 字符串类型
   		
   		常用方法：
               obj.length　　　　　　　　　　　　　　　长度  
               obj.trim()　　　　　　　　　　　　　　　移除空白
               obj.trimLeft()
               obj.trimRight()
               obj.charAt(n)　　　　　　　　　　　　　返回字符串中的第n个字符
               obj.concat(value, …)　　　　　　　　 拼接
               obj.indexOf(substring,start)　　　　子序列位置
               obj.substring(from, to)　　　　　　　根据索引获取子序列
               obj.slice(start, end)　　　　　　　　切片
               obj.toLowerCase()　　　　　　　　　　大写
               obj.toUpperCase()　　　　　　　　　　小写
               obj.split(delimiter, limit)　　　　　分割
   		
   	整型 int
   		var age = 12 ## 整数类型
   	
   	浮点型 float
   		var salary = 13421.123
   
   	布尔 bool
   		var b = true / false  ## 与python的布尔值为首字母大写不同
   
   	数组 array
   		var arr = ["jeff", 18, "didiao"];
   
   		常用方法：
   	        obj.length 数组的大小
   	        obj.push(ele) 尾部追加元素
   	        obj.pop() 尾部获取一个元素
   	        obj.unshift(ele) 头部插入元素
   	        obj.shift() 头部移除元素
   	        obj.slice( ) 切片
   	        obj.reverse( ) 反转
   	        obj.join(sep) 将数组元素连接起来以构建一个字符串
   	        obj.concat(val,..) 连接数组
   	        obj.sort( ) 对数组元素进行排序
   
   	字典（json） dict
   		var d = {"name":"jeff", "age":18}
   

回到目录

3. js运算符

   1. 算数运算符
   
   	+ - * %
   	a++ ⇒ a += 1
   	a-- ⇒ a -= 1
   
   2. 比较运算符
   
   	> >= < <= != == ===
   	其中 === ：全等  （数据类型和值都要相等）
   	!== : 不全等
   	
   	示例：
          var a = 10;
          
          var b = "10";
          
          a == b
          true
          a === b
          false
   
   3. 赋值运算符
   
   	= += -= *= /=
   	示例：
   	a += 1 ⇒ a = a + 1
   

4. js流程控制

   顺序结构：
   
   分支结构：
   	python：
   		
   		if 表达式判断:
   			...
   		elif 表达式判断:
   			...
   		elif 表达式判断:
   			...
   		else:
   			...
   
   	js:
   		var age = 18;
   		if (age > 20) {
   			console.log("...")
   		} else if (age > 40 && age < 50) {
   			console.log("xxx")
   		} else {
   			console.log("yyy")
   		}
   		
   循环结构：
   	python：
   		for i in item"
   			print(i)
   		while 循环
   		
   	js：
   		数组：
   			var arr = ["jeff", "jeff1", "jeff2"]
   
   			第一种：
   				for (var i in arr) {
   					console.log(arr[i]);
   				}
   			第二种：
   				for (var i = 0; i <arr.length; i++){
   					console.log(arr[i]);
   				}
   		
   		字典：
   			var d = {"name":"jeff", "age":18}
   
   			第一种：
   				for (var i in d){
   					console.log(d[i])
   				}
   			第二种：
   				无
   

回到目录

5. js函数

   python:
   	def test():
   		print("helloworld")
   
   js:
   	第一种方式：
   		function test() {
   			console.log("xxxx");
   			return "asdf"
   		}
   		也有返回值
   		test();
   	
   	第二种方式：
   		var test = function (){
   			console.log("hellotest");
   		}
   		test();
   
   ps:语言有相通性
   

6. js类

   python：
   	class Test():
   		pass
   	t = Test()
   
   js:
   	class Test(){
   	类体
   	}
   
   var t = new Test();  ## 需要使用new来实例化
   

7. js的常用函数

   • 日期类Date
     var d = new Date();　　　返回当日的日期和时间

     方法：
     getYear() 　　　　　　　从 Date 对象返回一个月中的某一天 (1 ~ 31)
     getFullYear()　　　　　从 Date 对象以四位数字返回年份
     getMonth() 　　　　　　从 Date 对象返回月份 (0 ~ 11)
     getDate() 　　　　　　　从 Date 对象返回一个月中的某一天 (1 ~ 31)
     getDay() 　　　　　　　从 Date 对象返回一周中的某一天 (0 ~ 6)
     getHours() 　　　　　 返回 Date 对象的小时 (0 ~ 23)
     getMinutes()　　　　　返回 Date 对象的分钟 (0 ~ 59)
     getSeconds() 　　　　返回 Date 对象的秒数 (0 ~ 59)

     示例：

     当前时间：<input type='text' value='' id='time'/>
     function change(){
     	var time = document.getElementById("time");
     	var d = new Date();
     	time.value = d;
     }
     setInterval(change, 1000);
     

   • Math数学对象

     方法：
     Math.ceil(数值) 　　　　向上取整
     Math.floor(数值) 　　　向下取整
     Math.round(数值) 　　　把数四舍五入为最接近的整数
     Math.min(数值1,数值2)　　　返回最小值
     Math.max(数值1,数值2) 　　返回最大值
     Math.random() 　　　　　获得0-1之间的随机数

   • JSON对象

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

     JSON字符串转换成JSON对象：

       var obj = JSON.parse(str); // 反序列化
     

     JSON对象转换成JSON字符串：

       var str = JSON.stringify(obj); // 序列化
     

回到目录