javascript基础

最新推荐文章于 2024-09-12 16:05:15 发布

Follow your steps

最新推荐文章于 2024-09-12 16:05:15 发布

阅读量380

点赞数

分类专栏：代码世界

本文链接：https://blog.youkuaiyun.com/weixin_44949525/article/details/101014844

版权

代码世界专栏收录该内容

2 篇文章

订阅专栏

一、什么是javascript

运行在浏览器上的脚本语言，让页面更生动，交互性更强；

javascript包括三块：
ECAMScript(核心语法，ES规范)
DOM（文档对象模型）
BOM（浏览器对象模型）

DOM和BOM的联系？
BOM的顶级对象是：window
DOM的顶级对象是：window.document
实际上BOM是包括DOM的

二、在HTML中嵌入javascript代码的方式

1.事件：事件驱动型的编程语言：

οnclick="js代码"执行原理：

	页面打开的时候，js代码不会执行，只是把这段js代码注册到按钮的click事件中；等按钮发生click事件之后，才会执行

window对象

1、在js中内置对象，可以直接使用，代表的是浏览器对象
2、window对象有函数：alert,用法：window.alert("消息")；

2.脚本块的方式

<script type="text/javascript">
		window.alert("hello world");  
</script>

3.引入外部js文件

<script type="text/javascript" src="引入路径"></script>	js文件中的代码自上而下依次执行

三、标识符

命名规则：
数字、字母、美元符号、下划线组成
不能用数字开头
严格区分大小写

四、变量

javascript是一种弱类型语言

在js当中变量没有手动赋值的时候，系统默认复制undefined;

声明
		var i;
赋值
		i=10;

全局变量

	1、在函数体之外声明的变量
	2、生命周期：浏览器打开时声明，浏览器关闭时销毁，尽量少用，占用内存；

局部变量

	1、在函数体中声明
	2、生命周期：函数开始执行时局部变量的内存空间开辟，函数执行结束

当一个变量声明时不使用var,则该变量一定是成员变量；

	i=10；

五、函数

函数定义

function  sum(a,b){
};

sum = function(a,b){
}

js函数在调用的时候，参数类型没有限制，参数个数也没有限制；

六、数据类型

原始类型

	Undefined、Number、String、Boolean、Null、Symbol

引用类型；

	Object以及其子类；

typeof+变量名

	在程序运行阶段动态的获取变量的类型；
		返回值：
		undefined、number、string、boolean、object、function

“==”

	js中做比较运算

undefined类型

	当一个变量没有手动复制，系统默认复制undefined；

number类型

	NaN  0 1 2 ....  Infinity
	整数、小数、负数、不是数字、无穷大都是Number类型。
什么情况下出现NaN：
	not a number :运算结果本来应该是一个数字，但实际不是一个数字；
    Infinity：当除数为0的时候，为无穷大
	
	函数：
	isNaN()：判断是不是一个数字；不是返回true，是返回false
	parseInt():将字符串转换成数字，并取整数位
	parseFloat()：将字符串转换成数字
	Math.ceil():向上取整

boolean类型

	true/false
	函数：
	Boolean（数据）：会将数据转换为boolean类型的
		Boolean(1); true
			Boolean(0); false
				Boolean(""); false
					Boolean("abc"); true
						Boolean(null); false
							Boolean(NaN); false
								Boolean(undefined); false
									Boolean(Infinity); true
	js中会自动调用该函数；

string类型

1、js中可以使用单引号/双引号；
2、创建字符串对象
		var s  = "字符串" ;     string
		var s2 = new String("abc")   object
		String是内置的支持类，父类是Object；
3、常用函数
		indexOf
		lastIndexOf
		replace
		spilt
		substring(startIndex,endIndex)：注意不包含endIndex
		substr(startIndex,length)：

Object类型

		1、Object类型是所有类型的超类，自定义的任何类型，默认继承Object；
		2、属性
			prototype属性：给类动态的扩展属性和函数（重点）
			consturctor属性
		3、定义类的方法(和定义函数是一样的，看你怎么调用)
			第一种方法：
			function 类名(形参){
			}
			第二种方法：
			类名=function(形参){
			}
		4、创建对象的语法：
			new 构造器方法();
		5、在js种类的定义和构造函数的定义是放在一起完成的；

null、NaN、undefined区别

	数据类型不一致
			null null类型/object
			NaN number类型
			undefined undefined类型

运算符"==="

	==比较值
	===比较值和数据类型

七、常用事件

 (1) blur失去焦点
 (2) focus获得焦点
 
 (3) click鼠标单击
 (4) dblclock鼠标双击
 
 (5) keydown键盘按下
 (6) keyup键盘弹起
 
 (7) mousedown鼠标按下
 (8) mouseover鼠标经过
 (9) mousemove鼠标移动
 (10)mouseout 鼠标离开
 (11) mouseup 鼠标谈起
 
 (12) reset 表单重置
 (13) submit表单提交
 (14)change下拉列表选中项改变，或文本框内容改变

(15) select文本选定

(16) load页面加载完毕

任何一个事件都对应一个事件句柄，事件句柄以标签的属性方式存在；

回调函数

	特点：自己将函数写出来，但是别人调用；

注册事件的两种方式

1、使用事件句柄：

	<input type="button" value="hello" onclick="函数" />

2、使用js代码完成事件的注册

	var btnObj =  document.getElementById("mybtn");  document内置对象，代表整个HTML页面
	btnObj.onclick =doSome; 注意别写小括号；btnObj.onclick=doSome();这是错误的写法
	btnObj.onclick=function(){   注册匿名函数
	}

js代码的执行顺序

HTML默认是从上而下依次执行

onload的用法

方式一

	
    <body onload="ready()">
    		<script type="text/javascript">
		function ready(){
			alert("在页面加载完成之后执行")
		}
			</script>
	</body>

方式二

	<body >
		<script type="text.text/javascript">
			window.onload = ready;
			
			function ready(){
				alert("在页面加载完成之后执行")
			}
			
		</script>
		
	</body>

捕捉回车键和esc键

<body >
		<script type="text/javascript">
			window.onload =function(){
				
				var btnObj = document.getElementById("username");
				//回车键的键值是13
				//ESC键的键值是27
				btnObj.onkeydown = function(event){
					//获取键值
					if(event.keyCode==13){
						alert("捕捉到回车键");
					}
				}
				
			}
			
		</script>
		<input type="text" id="username" />你好
	</body>

运算符void

需求：既保留超链接的样式，用户点击后执行一段js代码，但是页面不能跳转

	运算原理：执行表达式，但不返回任何结果
	”javascript:“ 的作用是告诉浏览器后面是一段javascript代码
	<a href="javascript:void(0)"  onclick="window.alert('test code')"></a>

js的控制语句

if
switch
while
do  while
for 
break
continue
for in
with

创建数组

var arr = [false,true,1,2] ；
js中数组元素的类型随意，个数随意，不统一

遍历数组

for(var i =0,i<arr.length,i++){
alert(arr[i]);
}

for in 语句：可以遍历对象的属性

for(var i in arr){      
	alert(arr[i]);
}

当遍历数组的时候：i为数组的下标

for(var i in object){
	alert(object[i])
}

当遍历对象的时候：i为对象的属性名

with语句

with(u){
	alert(username)       等同于 u.username
}

DOM编程

Document Object Model :对网页中的节点进行增删改查的过程。（HTML文档被当作一个dom树）

获取文本框的值

document.getElementById("id").value;

innetHTML和innerText操作div和span

相同点：都是设置元素内部的内容
不同点：
innerHTML会把后面的”字符串“当作一段HTML代码解释并执行；
innerText即使后面是一段HTML代码，也只是将其当作普通的字符串来看待；

正则表达式

Regular Expression
主要用在字符串格式匹配方面

创建正则表达式

	方式一
var regExp = /正则表达式/flags;
	方式二
var regExp = new RegExp("正则表达式","flags");
	关于flags可取值
		g:全局匹配
		i：忽略大小写
		m：多行查找

正则表达式的test()方法

true/false   = 正则表达式对象.test(用户填写的字符串);
true:字符串格式匹配成功
false:字符串格式匹配失败

trim：去除字符串的前后空白

” 字符串“.trim();

表单验证

单选全选

周期函数

v=window.setInterval(函数,间隔时间)；
clearInerval(v);

内置支持类date、array

array.join("—") 返回字符串以—分隔；
array.push(元素)；将该“元素”添加到末尾
array.pop()；将末尾元素弹出（模拟栈结构：先进后出，后进先出）
array.reverse();将数组元素顺序反转

BOM编程

Browser Object Model :包括关闭浏览器，打开一个新的浏览器，后退，前进，浏览器地址栏上的地址等

window.open("url");开启新窗口
window.close():关闭当前窗口
var ok = window.confirm("请，确认删除数据吗"); 点确认返回ture
window.history.back();
window.history.go(-1);
window.location.href="url"   操作url地址栏的地址；