JavaScript详细内容介绍

内容回顾

• 浮动

  """主要用于页面布局"""
  	可以让块级标签出现在同一行
      	float:left\right
              eg:正常网站都在使用
  """浮动的元素就是脱离文档流>>>:父标签塌陷"""
  	通用的解决方案
      	.clearfix:after {
              content:'';
              display:block;
              clear:both
          }
  	# 谁塌陷就给谁添加该class属性值
  

• 定位

  静态定位	static
  	所有标签默认的定位状态 该状态下是无法通过定位移动
  相对定位	relative
  	相对于标签原来的位置
  绝对定位	absolute
  	相对于已经定位过的父标签
  固定定位	fixed
  	相对于浏览器窗口
  

• 溢出

  # 标签内元素大于标准尺寸
  	overflow:hidden
  """例:圆形头像"""
  

• 透明度

  rgba(1,1,1,0.5)
  opacity:0.5
  

• 模态框

  z-index:999
  

• 博客园首页搭建

  1.先利用div和span完成页面布局
  2.填充页面基本内容
  3.调整页面样式
  # 知识内容整合练习
  

• JS简介

  注释、结束符、历史背景、引入方式
  

  内容概要

  • 变量与常量
  • 基本数据类型
  • 数据类型内置方法
  • 函数
  • 常见内置对象
  • BOM与DOM操作

  内容详细

  变量与常量

  在JS中声明变量需要使用关键字
  	老版本	var(全部都是全局变量)
      新版本	let(可以声明局部变量)
      # 推荐使用let(其实问题不大)
  在JS中声明常量也需要使用关键字
  	const # 声明一个真正意义上的常量
      
  如何创建变量
  	var name = 'tom'
      let name = 'tony'
  如何创建常量
  	const pi = 3.14
      
  """
  可以编写JS代码的地方
  	1.pycharm提供的JS文件
  	2.直接使用浏览器提供的编程环境
  """
  ps:pycharm在使用上述关键字的时候如果出现了报错,说明JS版本没有选择6
  需要我们自定义设置 settings>>>Languages&Frameworks>>>javaScript>>>ECMAScript 6+
  

  基本数据类型

  python基本数据类型
  	int整型、float浮点型、list列表、dict字典、tuple元组、str字符串、bool布尔值、set集合
  JS基本数据类型
  	number、string、boolean、undefined、object()
      
  查看数据类型
  	python中使用type()
      JS中使用typeof
  

  number类型

  # 数值类型:包含了整型与浮点型
  parseInt、parseFloat
  
  NaN:Not A Number
  """NaN属于数值类型 表示的意思是 不是一个数字"""
  

  string类型

  # 定义字符串类型的方式
  	1.单引号
      2.双引号
      3.`号
      	let s1 = `
          	jason
              tom
              tony
          `
  # 在JS中字符串的拼接推荐使用+号
  	let s3 = s1+s2
  
  # 格式化输出(模板字符串的功能)
  	var name = 'jason'
      var age = 18
      `my name is ${name},my age is ${age}`
  

  boolean类型

  在python中布尔值类型首字母大写
  	True False
  在JS中布尔值类型全部小写
  	true fales
  

  null与undefined类型

  null表示的意思是空
  undefined表示的意思是未定义
  	eg:null意思是厕纸用完了 undefined意思是厕所纸都没装
  

  对象值数组类型

  # 对应到python中就是列表list
  var l1 = [1,2,3,4,5,6,7]
  l1.splice(2,1)  # 第一个参数是其实位置 第二个参数是删除元素的个数
  l1 = [1,2,4,5,6,7] 
  

  运算符

  1.比较运算符
  	==	弱等于  # 会自动转换数据类型至相同状态 例：10 == '10' 结果为:true
      ===	强等于	  # 不会自动转换数据类型 例:10 === '10' 结果为:false
  
  2.逻辑运算符
  	python中
      	and or not
  	JS中
      	&& || !
  

  流程控制

  """if判断"""
  python中
  	if 条件:
          条件成立之后执行的代码
  	elif 条件:
          if条件不成立，elif条件成立之后执行的代码
  	else:
          条件都不成立之后执行的代码
  JS中
  	if(条件){
          条件成立之后执行的代码
      }else{
          条件不成立执行的代码
      }
      
      if(条件1){
          条件1成立之后执行的代码
      }else if(条件2){
          条件2成立之后执行的代码
      }else{
          条件都不成立执行的代码
      }
  """switch"""
  var day = new Date().getDay(); # 获取当前时间
      switch (day) {
        case 0:
        console.log("Sunday");
        break;
        case 1:
        console.log("Monday");
        break;
      default:
        console.log("...")
      }
      
  """for循环"""
  	for(起始值;循环条件;每次循环后执行的操作){
          for循环体代码
      }
      	for(var i=0;i<10;i++){
              console.log(i);
          }
  	# 练习:如何使用for循环取出数组内的每个元素
      	var l1 = [11,22,33,44,55]
          for(let i=0;i<l1.length;i++){
              console.log(l1[i])
          }
  """while循环"""
  	while(循环条件){
          循环体代码
      }
  

  三元运算符

  在python中
  	res = '吃饭' if < 10 else '不吃饭'
  在JS中
  	res = 18 > 10 ? '吃饭':'不吃饭'
  

  函数

  在python中
  	def 函数名(参数1,参数2...)
      	"""函数注释"""
          函数体代码
          return返回值
      
  在JS中
  	function 函数名(参数1,参数2...){
          // 函数注释
          函数体代码
          return 返回值
      }
  """
  arguments参数 可以获取传入的所有数据
  	也支持return和匿名函数
  """
  var f = v => v;
  // 等同于
  var f = function(v){
      return v;
  }
  

  自定义对象

  # 相当于python中的字典类型
  	方式1: var d = {'name':'tom',;age:18}
  	方式2: var d = Object({'name':'tom','age':18})
  
  class MyDict(dict):
      def __getattr__(self,item):
          return self.get(item)
      def __setattr__(self,key,value):
          self[key] = value
          
  res = MyDict(name='tom',age=18)
  print(res.name)  # tom
  print(res.age)  # 18
  res.xxx=123
  print(res.xxx)  # 123
  print(res)  # {'name': 'tom', 'age': 18, 'xxx': 123}
  

  内置对象

  # 如果需要使用内置对象 需要关键字 new
  在python中
  	import date
      date()
  在JS中
  	new date()
      
  ##########################################################
  序列化
  	python中
      	import json
          json.dumps() # 序列化
          json.loads() # 反序列化
  	JS中
      	JSON.stringify() # 序列化
          JSON.parse() # 反序列化
  """
  如果当前js中有一个布尔值true需要基于网络发送给python程序并且放python转换成布尔值 该如何操作？
  	1.在JS中使用JSON.stringify()序列化成json格式字符串
  	2.基于网络发送给python程序(自动编码)
  	3.python接收 解码并反序列化
  """
  ##########################################################
  
  regexp对象
  	方式1:var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
  	方式2:var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}/;
  
  全局匹配
  	正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
      # 全局匹配会有一个lastindex属性
      reg2
      /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
      reg2.test('jason666')
      true
      reg2.test('jason666')
      false
      reg2.lastIndex
      0
      reg2.test('jason666')
      true
      reg2.lastIndex
      8
  校验时不传参数默认传的是undefined
  

  BOM与DOM操作

  BOM		浏览器对象模型>>>:使用JS操作浏览器
  DOM		文档对象模型>>>:使用JS操作前端页面
  

  BOM操作

  window.open()				- 打开新窗口
  window.close()				- 关闭当前窗口
  window.history.forward()	// 前进一页
  window.history.back()		// 后退一页
  window.location.href		- 获取URL
  window.location.href='URL'	// 跳转到指定页面
  window.location.reload()	重新加载页面
  window.alert('内容')			- 弹框内容
  window.confirm('内容')		- 弹框有返回值(bool值)
  window.prompt('内容')			- 用户可填写的弹框
  
  setTimeout()  				- 计时相关，几秒弹框一次...
  clearTimeout()
  setInterval()
  clearInterval()