javascript基础知识01

今夜2022-01-29 17:18:23

JavaScript

JavaScript :简称:js，分三个部分:

ECMAScript 标准----js的基本的语法
DOM------Document Object Model 文档对象模型
BOM------Browser Object Model 浏览器对象模型

JavaScript是什么？

是一门脚本语言不需要编译直接运行
是一门解释性语言
是一门动态类型的语言
是一门基于对象的语言

JavaScript的书写位置

写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />

2.写在script标签中

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

写在外部js文件中，在页面引入引用外部js文件的script标签中不可以写JavaScript代码

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

JavaScript的变量

定义方式

var num;

变量的赋值

var age;
age = 18;

同时声明多个变量及初始化

var age, name;
age = 10;
name = 'zs';

var age = 10, name = 'tom';

JavaScript变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for、while。
- 区分大小写
规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义，做到见名知意
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

JavaScript数据类型

Number、 String、 Boolean、 Undefined、 Null

Number

十进制
	var num = 9;
	进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
十六进制
	var num = 0xA;
	数字序列范围：0~9以及A~F

浮点数
	var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
   var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
   console.log(0.07 * 100);
   不要判断两个浮点数是否相等

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

NaN：not a number
  NaN 与任何值都不相等，包括他本身
isNaN: is not a number

String类型

'abc'   "abc"   '中国人'
var str = 'Hello World';
console.log(str.length);

/*
    字符串拼接使用 + 连接
    两边只要有一个是字符串，那么+就是字符串拼接功能
    两边如果都是数字，那么就是算术功
*/
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);

Boolean类型

Boolean字面量： true和false，区分大小写
计算机内部存储：true为1，false为0

Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置

获取变量的类型

var i = 'hello';
console.log(typeof i);  // 'string'

字面量

在源代码中一个固定值的表示法。

数值字面量：8, 9, 10

字符串字面量：'黑马程序员', "大前端"

布尔字面量：true，false

注释

// 单行注释 这是一个变量
var name = 'hm';

/*
'abc'   "abc"   '中国人'
var str = 'Hello World';
console.log(str.length);
*/

数组

所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

数组的定义

数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。

// 创建一个空数组
var arr1 = []; 
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 

// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;

数组的取值

// 格式：数组名[下标]	下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0];	// red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined

遍历数组

for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}

数组元素的新增

// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";

函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用，函数的作用就是封装一段代码，将来可以重复使用

函数的定义

//①函数声明
function 函数名(){
  // 函数体
}
function method(){
    alert("helloMethod");
}
method();

//===================================
//②函数表达式
var fn = function() {
  // 函数体
}

var method = funtion(){
    alert("helloMethod");
}
method();

函数的参数

形参不用var去修饰

形参和实参个数不一定相等

arguments对象是个数组会将传递的实参进行封装

function fn(a,b,c){
	//var sum = a+b+c;
	//alert(sum);
	//arguments是个数组 会将传递的实参进行封装
	for(var i=0;i<arguments.length;i++){
			alert(arguments[i]);
		}
	}
	fn(1,2,4,8);

函数的返回值

在定义函数的时候不必表明是否具有返回值

返回值仅仅通过return关键字就可以了 return后的代码不执行

function fn(a,b){
	return a+b;
	//alert("xxxx");
}
alert(fn(2,3));

函数的使用

// 声明函数
function sayHi() {
  console.log("吃了没？");
}
// 调用函数
sayHi();

// 求1-100之间所有数的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 调用
getSum();

var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}

自调用函数

(function () {
  alert(123);
})();

函数是一种数据类型

function fn() {}
console.log(typeof fn);


/*
函数做为返回值
函数是一种类型，所以可以把函数可以作为返回值从函数内部返回，这种用法很常见
*/
function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象

JavaScript的对象是无序属性的集合。

其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。

对象的行为和特征

特征---属性

行为---方法

var o = {
  name: 'zs,
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};

//new Object()创建对象
var person = new Object();
  person.name = 'lisi';
  person.age = 35;
  person.job = 'actor';
  person.sayHi = function(){
  console.log('Hello,everyBody');
}

//工厂函数创建对象
function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
  }
  return person;
}
var p1 = createPerson('张三', 22, 'actor');

//自定义构造函数
function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
  	console.log('Hello,everyBody');
  }
}
var p1 = new Person('张三', 22, 'actor');

对象的使用

//遍历对象
var obj = {};
for (var i = 0; i < 10; i++) {
  obj[i] = i * 2;
}
for(var key in obj) {
  console.log(key + "==" + obj[key]);
}

//删除对象属性
function fun() { 
  this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined

内置对象

JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象

JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean...

对象只是带有属性和方法的特殊数据类型。

学习一个内置对象的使用，只要学会其常用的成员的使用（通过查文档学习）

可以通过MDN/W3C来查询

内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。

MDN

Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。

https://developer.mozilla.org/zh-CN/open in new window

Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供

跟数学相关的运算来找Math中的成员（求绝对值，取整）

Math.PI						// 圆周率
Math.random()				// 生成随机数
Math.floor()/Math.ceil()	 // 向下取整/向上取整
Math.round()				// 取整，四舍五入
Math.abs()					// 绝对值
Math.max()/Math.min()		 // 求最大和最小值

Math.sin()/Math.cos()		 // 正弦/余弦
Math.power()/Math.sqrt()	 // 求指数次幂/求平方根

RegExp

创建方式：

var reg = new RegExp(pattern);
	var reg = /^正则规则$/;

规则的写法

[0-9]

		[A-Z]

		[a-z]

		[A-z]

		\d 代表数据

		\D	非数字

		\w	查找单词字符

		\W	查找非单词字符

		\s	查找空白字符

		\S	查找非空白字符

		n+	出现至少一次

		n*	出现0次或多次

		n?	出现0次或1次

		{6} 出现6次

		{2,8} 2到8次

方法：	

	test(str):检索字符串中指定的值。返回 true 或 false

需求：

校验邮箱

var email = javascript_0912@163.com
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
reg.test(email);

js的事件

常用事件

  onclick:点击事件

onchange:域内容被改变的事件

应用示例：二级联动

<select id="city">
				<option value="bj">北京</option>
				<option value="hn">河南</option>
	</select>
			<select id="area">
				<option>海淀</option>
				<option>朝阳</option>
				<option>东城</option>
				<option>西城</option>
			</select>
			<script type="text/javascript">
				var select = document.getElementById("city");
				select.onchange = function(){
					var optionVal = select.value;
					switch(optionVal){
						case 'bj':
							var area = document.getElementById("area");
							area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
							break;
						case 'hn':
							var area = document.getElementById("area");
							area.innerHTML = "<option>郑州</option><option>洛阳</option><option>平顶山</option>";
							break;
						default:
							alert("error");
					}
				};				
				
			</script>

onfoucus:获得焦点的事件

onblur:失去焦点的事件

应用示例

<label for="txt">name</label>
    <input id="txt" type="text" />
    <span id="action"></span>
    <script type="text/javascript">
        var txt = document.getElementById("txt");
        txt.onfocus = function(){
            //友好提示
            var span = document.getElementById("action");
            span.innerHTML = "用户名格式最小8位";
            span.style.color = "green";
        };
        txt.onblur = function(){
            //没写出来
            var reg=/^$/;
            var inputEle = document.getElementById("txt");
            alert(inputEle.value);
            if(reg.test(inputEle.value)){
                var span = document.getElementById("action");
                span.innerHTML = "输入正确";
                span.style.color = "green";
            }else{
                //错误提示
                var span = document.getElementById("action");
                span.innerHTML = "对不起 格式不正确";
                span.style.color = "red";
            }
        };
    </script>

onload:页面加载完毕事件

<script type="text/javascript">
    //<body>里的内容加载完成后 再执行
        window.onload = function(){
            var span = document.getElementById("span");
            alert(span);
            span.innerHTML = "hello js";
        };
        </script>
</head>
<body>
    <span id="span"></span>
</body>

JS事件的绑定方式

(1)将事件和响应行为都内嵌到html标签中

<input type="button" value="button"  onclick="alert('abc')"/>

(2)将事件内嵌到html中而响应行为用函数进行封装

<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
	function fn(){
		alert("abc");
	}
</script>

(3)将事件和响应行为与html标签完全分离

<input id="btn" type="button" value="button"/>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.onclick = function(){
	alert("hello");
    };
</script>

(4)阻止事件的默认行为

<a href="https://www.baidu.com" onclick="return false">点击我吧</a>

JS的bom

window对象

	提示框：alert("提示信息");

	确认框：confirm("确认信息");

			有返回值：如果点击确认返回true 如果点击取消 返回false

			var res = confirm("您确认要删除吗？");

			alert(res);

	输入框：prompt("提示信息");

			有返回值：如果点击确认返回输入框的文本 点击取消返回null

			var res = prompt("请输入密码？");

			alert(res);

open方法：重新打开一标签页

window.open("http://www.baidu.com");

setTimeout(函数,毫秒值)：

<script>
        setTimeout(
            function () {
                alert("hello setTimeout");
            },
            3000
        );
    </script>
</head>

<body>
    <span>3秒后将弹出hello setTimeout</span>
</body>

clearTimeout(定时器的名称)

<script>
        var timer;
        var fn = function () {
            alert("将会一直执行");
            timer = setTimeout(fn, 2000);
        };
        var closer = function () {
            clearTimeout(timer);
        };
        fn();
    </script>
</head>

<body>
    <input type="button" onclick="closer()" value="清除定时器">
</body>

setInterval(函数,毫秒值)：间隔毫秒数执行

clearInterval(定时器的名称)

<script>
        var timer = setInterval(
            function () {
                alert("nihao");
            },
            2000
        );
        var closer = function () {
            clearInterval(timer);
        };
    </script>
</head>
<body>
    <input type="button" onclick="closer()" value="清除定时器">
</body>

应用示例

注册成功后3秒后跳转到首页

<script type="text/javascript">
        var time = 3;
        var timer;
        timer = setInterval(
            function () {
                var second = document.getElementById("second");
                if (time >= 1) {
                    second.innerHTML = time;
                    time--;
                } else {
                    clearInterval(timer);
                    location.href = "index.html";
                }
            },
            1000
        );
    </script>
</head>

<body>
    <span id="second" style="color: red;">3</span>秒后跳转到首页，如果不跳转请<a href="index.html">点击这里</a>
</body>

location.href

<script type="text/javascript">
        function redirectDemo() {
            location.href = "index.html";
        }
    </script>
</head>

<body>
    <input type="button" value="跳转" onclick="redirectDemo()">
</body>

history

back();

forward();

go();

<a href="index.html">后一页</a>
		<input type="button" value="上一页" onclick="history.back()">
		<input type="button" value="下一页" onclick="history.forward()">
		
		<input type="button" value="上一页" onclick="history.go(-1)">
		<input type="button" value="下一页" onclick="history.go(1)">

文档对象模型（Document Object Model，简称DOM），是[W3C](http://baike.baidu.com/item/W3C)组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与[Netscape](http://baike.baidu.com/item/Netscape)的“浏览器大战”，双方为了在[JavaScript](http://baike.baidu.com/item/JavaScript)与[JScript](http://baike.baidu.com/item/JScript)一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有[VBScript](http://baike.baidu.com/item/VBScript)、[ActiveX](http://baike.baidu.com/item/ActiveX)、以及微软自家的[DHTML](http://baike.baidu.com/item/DHTML)格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。DOM又称为文档树模型

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签的属性

文档树

DOM经常进行的操作

获取元素
动态创建元素
对元素进行操作(设置其属性或调用其方法)
事件(什么时机做相应的操作)

应用示例

//根据id获取元素*****
var div = document.getElementById('div');
console.log(div);

//根据标签名获取元素******
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

//根据name获取元素**
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

//根据类名获取元素**
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

创建元素的方式

//document.write()    
<script>
		document.write('新设置的内容<p>标签也可以生成</p>');
	</script>
</head>

//innerHTML
<body>
		<p id="pid"></p>
</body>
<script>
		var p = document.getElementById("pid");
		p.innerHTML = "待文档加载完再执行";
</script>

//document.createElement() 示例①
<body>
<p id="demo">单击按钮创建有文本的按钮</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var btn=document.createElement("BUTTON");
	var t=document.createTextNode("CLICK ME");
	btn.appendChild(t);
	document.body.appendChild(btn);
};
</script>
</body>

//document.createElement() 示例②
<body>

<p id="demo">单击按钮创建有文本的按钮</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var btn=document.createElement("p");
	var t=document.createTextNode("hello p");
	btn.appendChild(t);
	document.body.appendChild(btn);
};
</script>
</body>

javascript基础知识01

JavaScript

JavaScript的书写位置

JavaScript的变量

JavaScript变量的命名规则和规范

JavaScript数据类型

获取变量的类型

字面量

注释

数组

数组的定义

数组的取值

遍历数组

数组元素的新增

函数

函数的定义

函数的参数

函数的返回值

函数的使用

自调用函数

函数是一种数据类型

JavaScript中的对象

对象的使用

内置对象

MDN

Math对象

RegExp

js的事件

JS事件的绑定方式

JS的bom

window对象

location.href

history

JS DOM

DOM经常进行的操作

创建元素的方式

页面导航

今夜星辉灿烂

欢迎来到我的博客