JavaScript初级部分总结

最新推荐文章于 2023-07-25 01:42:36 发布

Q久夏青

最新推荐文章于 2023-07-25 01:42:36 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏：前端攻城狮成长记录

本文链接：https://blog.youkuaiyun.com/Starjg101/article/details/82877301

前端攻城狮成长记录专栏收录该内容

54 篇文章

订阅专栏

本文深入浅出地介绍了JavaScript的基础知识，涵盖了语法特性、数据类型、运算符、控制结构、函数、对象、内置对象如Math和Date，以及DOM操作、事件处理和定时器等关键概念，适合初学者快速掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是JavaScript

	1.解释型语言，可以被浏览器逐行执行解析
	2.弱类型语言
	3.声明变量：var
		var 变量名 = 变量值
	4.声明规则： 只能是字母数字下划线美元符，不能以数字开头，不能是javascript关键字和保留字
		break  do  instanceof  typeof  case  else  new  var  catch  finally  return  void  continue  for  switch 
	while  debugger(第五版新增)  function  this  with  default  if  throw  delete  in   try
		数据类型是变量值决定的，类型可随意更改
		原始数据类型：		
					 number		数值类型
					 string 			字符串类型
					 undefined 	未定义类型
					 null				空 
					 boolean 		布尔类型
		引用数据类型：	object		对象
		
	**typeof**		返回六种数据类型   
	 number		数值类型
	 string 			字符串类型
	 undefined 	未定义类型
	 function		函数 
	 boolean 		布尔类型
	 object 		对象
	Object.prototype.toString.call()   //查看详细类型

Script使用方式

	 1.直接script标签
	 	只要放在页面中就可以
	 	区别：加载顺序，  习惯性的将JS代码放在body最下面		
	 2.外部引入
	 如果上面两种一起使用，则以第二种为主，第一种代码全部失效
	 3.外部倒入
	 4.句柄方式

JavaScript三种输出方式

	console.log();			F12调试查看
	alert();						页面弹框
	document.write();	页面上显示

JavaScript中的运算

	 **数学运算：**
	>			>=			<			<=			==			!==			===			!==
													等于		不等于		全等于		不全等
	 **逻辑运算：**
	 		与	&	只有都为true才为true
	 		或	||	一个为true都为true
	 		非	！	取反
	 **比较运算**  
	 		 ==    !=      只需要比较内容
	         ===   !==     内容和类型都要比较
	var a = 10;   
	var b = "10";  
	console.log(a === b);		false

	var c = new String("10");
	console.log(b == c);	true
	console.log(b === c);		false

	 地址比较 ：    对象类型中的比较 
	 对象和对象的比较都是比较地址,地址相同就相等，地址不同就不等
	var arr1 = [1,2,3,4,5];
	var arr2 = arr1;
	console.log(arr1 == arr2);	true

JavaScript判断和循环

	**if判断**
		一组if判断，必须含有一个if可以没有或者多个else if 可以没有或者一个else
			if(条件){
			}else if{
			
			}else if{
			
			}else...{
			}
		一组判断里面，如果前后有一个条件为true，后面的即使为true也不会执行，当上面的条件全都不满足的时候就走else
	*注意：*
		1.不要做无谓的比较
			NaN不会等于任何东西包括它自己
		2.在判断里面不要写小数的运算
			高精度的数			小数 + 小数 = 高精度数
		3.除了0，空的字符串“”，undefined和null会转换成false
			在隐式转换中，true转换成1，false转换成0
			0转换成false，非0转换成true
			
	**三元表达式**
	   表达式1?表达式2:表达式3;
            bool    true   false
            
	**for循环**
		for（条件1；条件2；条件；）{
				循环执行的语句
		}						
				break		退出、循环终止
				contiune	跳出本次循环

函数

	**作用：**
			1.封装
			2.高内聚，低耦合	降低代码重复
			3.提高性能
			4.保护变量安全
		function 函数名 （形参名1，形参名2···）{
							函数体
							返回值
		}
	**函数名：**目前阶段必须存在	命名规则，跟变量一样
	**形参名：**可以为任意类型
	**函数体：**调用以后执行的代码
	**返回值：**调用函数以后返回的内容，如果没有返回值，将返回undefind

对象

	**系统规定**
		is开头的函数，返回boolean		isNaN()		isSunsu()
	
	**构造函数定义对象：**首字母大写，全部人写的变量用作常亮，以__开头的函数表示内部函数，外部不允许访问系统规定

    **内置对象**
    Math     
    属性:　　Math.PI		圆周率
    方法:  随机数			random
              四舍五入		round
              向下取整		Floor
              向上取整		ceil
              ...
    **Date**   
    		  var date = new Date()
             当前的年月日时分秒
             月份要+1
             星期：0代表星期天

    **字符串**
    属性 ： length
    方法 ： 
    
    **数组**
    属性 ： length
    方法 ：
    对象
    增  对象打点
    删  delete obj.name
    改  对象打点
    查  对象打点
    对象的遍历   for(var key in obj){}


    **自定义对象**
   	new Object()
   	字面量
   	new 构造函数
   	以...为原型创建对象

   	**window底下常用的方法**
   	alert()				弹框
   	confirm()			确定取消弹框
   	prompt()			弹出的输入框，（提示内容，默认值）
	
	**定时器**
   	setTimeout()    一个是迟钝
   	setInterval()     一个是循环
   	clearTimeout()	 迟钝对应的清除
   	clearInterval()	循环对应的清除
	
	**强制转换**
   	parseInt()			解析字符串，返回一个整数
   	parseFloat()		解析字符串，返回一个浮点数

   	eval()    会执行字符串中的代码
   	1.网页特效
   	 2.数据交互    前后台   传递的字符串
   	 3.服务端+数据库

   	**事件**
   	鼠标事件
   	click					鼠标单击
   	mouseover		鼠标移入
   	mouseout		鼠标移出
   	mousemove	鼠标移动
   	**键盘事件**
   	keydown			按下
   	keyup				抬起
	event			对象，只有当用户操作的时候才会产生	
	keyCode 		这个属性代表按下键盘的编码，每个按键对应一个键盘码
	
	foucs			聚焦
	btur				失焦
   	change		 	input		内容变化
  	文本内容发生变化，必须失焦才能触发
  
   	**文本框事件**
   	focus			获取焦点
   	blur				失去焦点
   	 文档加载事件
   	...

   	**绑定**
   	句柄方式
   	dom0级
   	dom2级

   	**dom获取方法**
    实时的
   	document.getelementById()   IE8
   	class                       IE8
   	标签                        IE4
   	属性                        IE8

   	**非实时的**
   	document.querySelectorAll() 
   	document.querySelector()

   	**事件委托**
   	把自己要做的事情委托给父元素来完成