JavaScript

最新推荐文章于 2021-07-08 16:58:06 发布

编程有了模型

最新推荐文章于 2021-07-08 16:58:06 发布

阅读量466

点赞数 1

分类专栏： JavaScript Java EE

本文链接：https://blog.csdn.net/qq_1018944104/article/details/83098336

版权

Java EE 同时被 2 个专栏收录

20 篇文章 3 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

1.什么是JavaSript？

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。

2.JavaSript产生的背景

95年在网景公司在导航者浏览器发布，官方名称ECMAscript。

3.JavaSript的作用

动态实现html和样式修改
对事件做出响应
对表单进行验证
实现后台操作

4.JavaSript的特点

交互性
安全性：不能直接访问本地磁盘文件
跨平台：运行在浏览器上，自然可夸平台

5.JavaScript的引入方式

内部使用js：

在html文档中，和css一样需要在<style></style>标签中进行编写，js需要在<script></spript>标签中进行编写。
和普通html标签一样，可以在任意位置。

引入外部js：

单独创建js脚本文件并编写js代码，如何编写？和css文件一样，不需要标签，直接写js代码即可。
引入方式，在html代码中写入<script type="text/javascript" src="js/myjs.js"></script>，一般放在<head></head>标签内部。

6.变量和数据类型

声明变量的关键词：var

数据类型：如何判断一个数据的数据类型？使用typeof关键词，代码如下：

alert(typeof sum);

number：数值类型
string：字符串类型
boolean：布尔类型
array：数组
object：对象
undefined：未定义
null：空值

类型转换：

boolean / undefined / null 与 number参与运算，是先转换成number类型，然后再计算，其中boolean是0和1，undefined和null都是0.
string和其他类型数据参与运算都表示连接。

7.运算符

算术运算符

+ - * / %
/ 运算保留小数点，比如5 / 2 = 2.5

比较运算符

> >= == === != < <=
==只比较内容，包括str = “12” 和 n = 12，这二者是相等的，因为只比较内容。
===比较内容和类型，str = “12” 和 n = 12，这二者不等，因为类型不一致。

逻辑运算符

&&，|| ， !

三元运算符

var max = a > b ? a : b;

8.流程控制

if / switch，与java用法一致。
for / while / do ... while，与java用法一致。
for ... in ... ，也是循环，代码如下：

//for ... in ...,i是索引
for(var i in arr){console.log(arr[i]);}
var arr1 = new Array();
arr1["北京市"] = ["昌平区","西城区","朝阳区"]
for(var i in arr1){console.log(i);}

9.函数

函数定义：可以被重复调用的代码块，除了被手动调用外，还可以通过事件调用。

自定义函数：参见代码

//1.声明无参没有返回值函数
//所有的直接声明的函数都是window的函数
function aa(){console.log("aa");}
aa();
//2.声明带参
function calc(a,b){return a + b;}
var sum = calc(1,2);
//3.匿名函数(只是用一次)
(function(a,b){
    console.log(a+b);
})(1,2);

内置函数：

isNaN()：判断是否为非数字
parseInt()：将字符串转换为整型数据
parseFloat()：将字符转换为浮点型数据
eval()：字符串运算，类型转换
示例代码如下：

//isNaN():判断是否是一个非数字
var bool = isNaN("1");
var a = "1.3";
var b = "2.5";
//字符串转换为数值
console.log(parseInt(a)+parseInt(b));//3
console.log(parseFloat(a)+parseFloat(b));//3.8
//eval()函数的使用
//1.计算字符串
var str = "1+3*4";
console.log(eval(str));
//2.类型转换
var person = {name:"zs",age:12};  //js对象
//用于数据传输
var json = "{'name':'zs','age':12}";  //json
//json-->js对象
var jsObj = eval("("+json+")");
console.log(jsObj.name);

10.对象

JavaScript是基于对象的语言，提供了创建对象、扩展属性及方法的方式。

如何创建对象？内置对象：string（字符串）、array（数组）、date（日期）

//创建字符串对象的2种方式
var str = "abc";
str = new string("abc");
//字符串中常见属性和方法：
length;//长度
str.concat();//连接字符串
str.charAt();//根据索引获取字符
str.indexOf();//根据字符串获取起始位置
str.match();//字符串匹配正则表达式，不匹配返回null

//创建数组的3种方式
var arr = ["aa","bb"];
arr = new Array(3);
arr = new Array("aa","bb","cc");
//数组的常见属性和方法
length;//获取长度
concat;//连接数组
sort;//排序
reverse;//反转
toString//转换为字符串

//创建日期对象
var date = new Date();
//日期对象的常用方法
var year = date.getFullYear();//获取年份
var month = date.getMonth() + 1;//获取月份：0-11
var dayOfWeek = date.getDay();//周中的天0-6
var day = date.getDate();//月中的天
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();

如何扩展属性及方法？

js中每个类都有对象原型prototype，比如Date的对象原型就是Date.prototype。我们可以通过对象原型扩展对象的属性及方法。以Date类为例，进行说明：

/以下扩展相当于修改类，Date每一个对象都将获得扩展
//扩展属性，在Date中添加name属性并赋值"aa"
Date.prototype.name = "aa";
//扩展方法，在Date中添加bb方法
Date.prototype.bb = function(){
	console.log("bb");
}

11.bom（browser object model：浏览器对象模型）

bom作用：控制浏览器的行为

bom中的常用对象：

window对象代表窗口
document对象代表当前文档（即html文档）
location对象代表当前url信息，其属性href 用于返回或设置url信息，并控制页面跳转。

window对象：

属性：
- document代表文档的只读对象
- innerWidth文档显示区的宽度
- innerHeight文档显示区的高度
- location获取窗口的location对象
- name获取窗口的name值
方法：
- alert()：警告框
- confirm("确认删除？")：对话框
- prompt("请输入密码", "123")：带有输入框的对话框
- open()：打开新窗口
- close()：关闭窗口
- setTimeout()：在指定时间段后，执行某个函数或表达式
- clearTimeout()：清除定时
- setInterval()：间隔执行某个函数
- clearIntval()：清理间隔执行

实例代码：

var width = window.innerWidth;//文档显示区的宽度
var height = window.innerHeight;//文档显示区的高度
console.log(width+":"+height);
var bool = confirm("确认删除?");//对话框
console.log(bool);
var msg = prompt("请输入密码","123");//带有输入框的对话框
console.log(msg);
//打开新窗口
var newwindow = open("http://www.baidu.com","baidu","width=200px,height=200px,left=50px,top=50px")
newwindow.close();//关闭窗口
//在指定时间段后，执行某个函数或表达式
var timeoutId = setTimeout(function(){
	console.log("aa");
},2000);
clearTimeout(timeoutId);//清除定时
//数字时钟 倒计时(页面跳转,焦点图) 运动(匀速运动 缓冲运动 链式运动)
//间隔执行某个函数
var intervalId = setInterval(function(){
	var date = new Date();
	console.log(date);
},1000);
clearInterval(intervalId);//清除间隔执行

12.dom（document object model：文档对象模型）

什么是dom？dom的作用？dom图？

将html标签、属性和文本映射到一颗dom树（如下图所示，由元素节点、属性节点和文本节点组成）。
dom提供了操作节点的标准方法。

访问节点（指元素节点）

//节点获取
//1.通过id获取元素
var oDiv = document.getElementById("div1");
//2.通过标签名称获取节点（元素集合）
var aDiv = document.getElementsByTagName("div");
//3.通过标签的name属性值来获取
document.getElementsByName();
//4.通过class属性值获取
document.getElementsByClassName();

访问和修改节点的文本信息

innerHTML;//能够识别和设置标签
innerText;//不能识别和设置标签

访问和修改节点的属性信息

//dom对象.属性名称 = "值";
//特例：class——>className

访问和修改节点样式

oDiv.style.color="red";
oDiv.style.fontSize="20px";

13.事件

js中事件分类：ui事件、鼠标事件、键盘事件、焦点事件、其他事件（比如change事件）

ui事件：在script标签中书写 window.load = function(){}，特点是窗口加载时驱动，且页面节点要绘制完成才会触发。代码如下：

<scritp>
    window.load = function(){
        var oDiv = document.getElementById("div")[0];
        console.log(oDiv);
    }
</scritp>

鼠标事件：单击事件click，双击事件dbclick，移入事件mouseover，移出事件mouseout

<script>
	function showDiv(){
		var oDiv = document.getElementById("div1");
		oDiv.style.display = "block";
	}
	function hideDiv(){
		var oDiv = document.getElementById("div1");
		oDiv.style.display = "none";
	}
	function dbc(){
		console.log("双击");
	}
	funciton over(ele){
		ele.style.background = "green";
	}
	function out(ele){
		ele.style.background = "red";
	}
</script>
<input type="button" value="显示" onclick="showDiv()" ondblclick="dbc()" />
<input type="button" value="隐藏" onclick="hideDiv()" />
<div id="div1" onmouseover="over(this)" onmouseleave="out(this)"></div>

键盘事件：keydown（按下触发）、keyup（抬起触发）、keypress（按下可打印字符触发）

<script>
	document.onkeydown = funciton(){
		console.log("按下");
	}
	document.onkeyup = funciton(ele){
		console.log("抬起");
        var val = ele.value;
        console.log(val);
	}
	document.onkeypress = funciton(){
		console.log("press");
	}
</script>
<input type="text" onkeydown="down(this)" onkeyup="up(this)" />

焦点事件：focus（获取焦点）、blus（失去焦点，常用于表单项验证）

funtion blurs(){
    console.log("失去焦点");
}
<input type="text" onkeydown="down(this)" onkeyup="up(this)" blus="blurs()" />

其他事件：change（选择发生改变时触发，比如单选，多选，下拉：省市联动）

function province(ele){
    console.log(ele.value)
}
<select onchange="province(this)">
    <option value="1001">北京市</option>
    <option value="1002">上海市</option>
</select>

14.正则表达式

作用：弥补字符串验证的缺陷，比如验证不完善、不简洁等。

常见符号：

匹配一个字符
符号	描述
/.../	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白符
\S	任何非空白符
\d	匹配一个数字字符，等价于[0-9]
\D	匹配一个非数字字符，等价于[^0-9]
\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
.	匹配除了换行符之外的任意字符

修饰前一个字符
符号	描述
{n}	匹配前一项n次
{n,}	匹配前一项n次，或多次（即至少n次）
{n,m}	匹配前一项至少n次，但不能超过m次
*	匹配前一项0次，或多次，等价于{0,}
+	匹配前一项1次，或多次，等价于{1,}
?	匹配前一项0次或1次，也就是说前一项是可选的，{0,1}

匹配正则表达式：

str.match()：字符串的方法，不匹配返回null。
regex.test()：正则表达式对象的方法，匹配返回true，否则返回false。
示例代码如下：

var str = "13644515562";
//正则表达式
var regex = /^1[3-9]\d{9}$/;
//匹配：成功返回true，否则返回false
console.log(regex.test(str));
str = "aa@qq.com";
regex = /^\w+@[A-Za-z]{2,9}\.\w{2,3}$/;
console.log(regex.test(str));
//匹配中文字符
str = "哈哈";
regex = /^[\u4e00=\u9fa5]*$/;
console.log(regex.test(str));

15.Json

什么是Json？一种轻量级数据交互格式。

什么是数据交互？就是指系统之间进行数据的通信。常见的数据交互格式有xml和json。

xml特点：格式严格，获取方便，但无用标签过多；

json特点：采用键值对方式存储和传输数据

键和值之间使用冒号分割；
多个键值对采用逗号分割；
对象使用大括号；
数组使用中括号。

js对象和json的区别：

js对象是object，json是特定格式的string；
js对象的key不需要引号，json的key必须使用引号；

js对象与json之间的转换：

js对象转换为json：JSON.stringify(js);
json转换为js对象：JSON.parse(json);
示例代码如下：

var js = {name:"zs",age:12};
console.log(JSON.stringify(js));
var json = '{"name":"zs","age":12}';
console.log(JSON.parse(json));

16.http

什么是http？超文本传输协议，实现客户端和服务器端之间html资源的传输。

http协议的底层原理？

网络数据传输分为5层，从上到下分别是应用层（http、sftp、smtp...）、传输层（tcp、udp）、网络层（ip）、数据链路层、物理层。
所以，http是应用层协议。

http的请求与响应？

http的请求报文
- 请求行：请求路径请求协议
- 请求头：key/value（编码、缓存控制等）
- 请求体（可选）：客户端传输给服务器端的数据，仅post方式。
http的响应报文
- 响应行：协议状态码备注
- 响应头：key/value（数据长度、编码等）
- 响应体（可选）：服务器端传递给客户端的数据

http的状态码（作用：快速定位错误）

2xx：成功

200：请求成功

3xx：重定向

302：所请求的页面已经转移到新的url

4xx：客户端异常

404：not found 文件没找到

5xx：服务器端异常

502：请求未完成，比如服务需要请求别的服务器字眼，但别的服务器还未给出响应，这时就报502
503：服务器宕机

编程有了模型

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

1.什么是JavaSript？JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。2.JavaSript产生的背景95年在网景公司在导航者浏览器发布，官方名称ECMAscript。3.JavaSript的作用动态实现html和样式修改对事件做出响应...
复制链接

扫一扫

专栏目录