javascript入门

Posted 2022-12-13 大数据的未来

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript入门相关的知识，希望对你有一定的参考价值。

javascript入门

培训要求

1）回顾JS中核心内容

2）了解WEB1.0和WEB2.0时代的技术与特点

3）理解AJAX的产生背景、工作原理与特点

4）掌握AJAX常用API及应用

声明：今天服务端我们使用Servlet技术

一）什么是JavaScript【以下简称JS】

JS是

（1）基于对象

JS本身就有一些现成的对象可供程序员使用，例如：Array，Math，String。。。

JS并不排除你可以自已按一定的规则创建对象

（2）事件驱动

JS代码写好后，需要外界触发后，方可运行，例如：单击事件，定时执行，。。。

（3）解释性

每次运行JS代码时，得需要将原代码一行一行的解释执行

相对编译型语言（例如：Java、C++）执行速度相对较慢

（4）基于浏览器的动态交互网页技术

如果JS嵌入到html中，可以不需要服务器支持，直接由浏览器解释执行

如果JS嵌入到JSP或Servlet中，必需要服务器支持，直接由浏览器解释执行

（5）嵌入在HTML标签中

JS必须嵌入到一个名叫<scriptsrc="引入外部js文件"></script>的标签中，方可运行

脚本语言

二）JS中的三种类型

（1）基本类型：number，string，boolean

number包含正数，负数，小数

string由''或""定界

boolean由true或false，但js中的boolean也包含更多情况，例如：存在表示true，不存在表示false

var num = 100;

var str = "哈哈";

var flag = false;

window.alert(num);

window.alert(str);

window.alert(flag);

（2）特殊类型：null，undefined

null表示一个变量指向null

undefined表示一个变量指向的值不确定

var array = null;

var student;

alert(array);

alert(student);

（3）复合类型：函数，对象，数组

对象包含内置对象和自定义的对象

三）JS中有三种定义函数的方式

（1）正常方式：functionmysum(num1,num2)return num1+num2;

function mysum(num1,num2)

return num1 + num2;

var myresult = mysum(100,200);

alert("myresult="+myresult);

（2）构造器方式：newFunction("num1","num2","return num1+num2;")

var youresult = new Function("num1","num2","return num1+num2");

alert( youresult(1000,2000) );

（3）直接量或匿名或无名方式：varmysum = function(num1,num2)return num1+num2;

var theyresult = function(num1,num2)

return num1 + num2;

alert( theyresult(10000,20000) );

四）JS中有四种对象

（1）内置对象：Date，Math，String，Array，。。。

var str = new Date().toLocaleString();

window.document.write("<font size='44' color='red'>"+str+"</font>");

（2）自定义对象：Person，Card，。。。

function Student(id,name,sal)

//this指向s引用

this.id = id;

this.name = name;

this.sal = sal;

var s = new Student(1,"波波",7000);

document.write("编号:" + s.id + "<br/>");

document.write("姓名:" + s.name + "<br/>");

document.write("薪水:" + s.sal + "<br/>");

（3）浏览器对象：window，document，status，location，history。。。

function myrefresh()

window.history.go(0);

（4）ActiveX对象：ActiveXObject("Microsoft.XMLHTTP")，。。。

五）演示JS对象的属性，方法和事件的使用

（1）window.location.href

var url = "04_array.html";

window.location.href = url;

（2）form.submit()

</form>

function doSubmit()

//表单提交

document.forms[0].submit();

</script>

（3）inputElement.οnblur= 函数

（4）document.createElement(“img”)

（5）imgElement.style.width/height

六）回顾传统Web应用请求和响应特点【显示当前时间】

（1）请求：浏览器以HTTP协议的方式提交请求到服务器

（2）响应：服务器以HTTP协议的方式响应内容到浏览器

注意：HTTP是WEB大众化非安全协议

HTTPS是WEB安全协议，是基于HTTP协议的，且加了一些加密等特殊功能，常用于在线支付，或者是需要安全性较高的网站中，例如：12306网站

HTTP请求有三个部份组成：请求行，请求头，请求体

HTTP响应有三个部份组成：响应行，响应头，响应体

（3）状态栏：有明显的进度条刷新现象，如果服务器响应较慢的话，进度条刷新也会变慢，IE9等中高版本浏览器，有明显转圈圈图标

（4）历史栏：会收集原来已访问过的web页面，进行缓存

（5）缺点：不需变化的大量数据，也全部刷新，造成浏览器加载和处理负担

（6）可改进的地方：让不需变化的大量数据，原封不动，不用缓存到历史栏中，无需全部刷新，只刷新某些需要变化的数据区域，例如：当前时间的区域

当前时间:<span>$requestScope.str</span><br/>

//定位button按钮，同时添加单击事件

document.getElementsByTagName("input")[0].onclick = function()

var url = "$pageContext.request.contextPath/TimeServlet?id="+new Date().getTime();

window.location.href = url;

</script>

publicclass TimeServlet extends HttpServlet

publicvoid doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException

System.out.println("TimeServlet::doGet");

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

String str = sdf.format(new Date());

request.setAttribute("str",str);

request.getRequestDispatcher("/06_time.jsp").forward(request,response);

七）什么是AJAX【Asynchronous异步的JS和XML】，工作原理与特点

（1）什么是同步：

请求1->响应1->请求2->响应2->

Web1.0时代

（2）什么是异步：

请求1->请求2->请求3->响应1->响应2->响应3->

请求1->响应1->请求2->请求3->响应2->响应3->

Web2.0时代

项目中：Web1.0为主（整个浏览器刷新），Web2.0为辅（浏览器局部刷新）

（3）什么是AJAX

客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

即，AJAX是一个【局部刷新】的【异步】通讯技术

AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言

（4）不用刷新整个页面便可与服务器通讯的办法有：

（A）Flash/ActionScript

（B）框架Frameset

（C）iFrame（内嵌入框架)

（D）XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)

背景：早上IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，

Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，

IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象，但IE有向下兼容问题，

也可以使用ActiveXObject对象。

无需第三方jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建

注意：所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来

function createAJAX()

var ajax = null;

try

ajax = new ActiveXObject("microsoft.xmlhttp");

catch(e1)

ajax = new XMLHttpRequest();

return ajax;

（5）AJAX工作原理

参见<<AJAX工作原理.JPG>>

（6）AJAX包含的技术

参见<<AJAX包含的技术.JPG>>

（7）AJAX开发步骤

步一：创建AJAX异步对象，例如：createAJAX()

步二：准备发送异步请求，例如：ajax.open(method,url)

步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()

如果是GET请求的话，无需设置设置AJAX请求头

步四：真正发送请求体中的数据到服务器，例如：ajax.send()

步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数

步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面

（8）AJAX适合用在什么地方

AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】

AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，php，。。。这些技术都可

AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应

服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新

即只能以流的方式响应给浏览器

八）AJAX应用

（1）无需刷新整个Web页面显示服务器响应的当前时间

（text/html;charset=UTF-8）

当前时间:<span></span><br/>

//定位button按钮，同时添加单击事件

document.getElementsByTagName("input")[0].onclick = function()

//NO1)创建AJAX异步对象（每个浏览器内置的，无需第三方jar包）

var ajax = createAJAX();//0

//NO2)AJAX异步对象准备发送请求

var url = "$pageContext.request.contextPath/TimeServletAjax?id="+new Date().getTime();

var method = "GET";

ajax.open(method,url);//1

//NO3）AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示

var content = null;

ajax.send(content);//2

//----------------------------------------等待

//NO4）AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数

//0-1-2-3-4,这些是可以触发函数的

//4-4-4-4-4，这些是不可以触发函数的

//以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的

ajax.onreadystatechange = function()

//如果AJAX状态码为4

if(ajax.readyState == 4)

//如果服务器响应码是200

if(ajax.status == 200)

//NO5）从AJAX异步对象中获取服务器响应的结果

var str = ajax.responseText;

//NO6）按照DOM规则，将结果动态添加到web页面指向的标签中

document.getElementsByTagName("span")[0].innerHTML = str;

</script>

publicclass TimeServletAjax extends HttpServlet

publicvoid doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

String str = sdf.format(new Date());

//注意：在Web2.0时代，即异步方式下，不能用转发或重定向

//因为：转发或重定向会引起浏览器全部刷新，而不是局部刷新

//所以得用以输出流的方式将服务器的结果输出到浏览器

response.setContentType("text/html;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write(str);

pw.flush();

pw.close();

（2）基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在（text/html;charset=UTF-8）

输入用户名[POST]：<input type="text" maxlength="8"/>光标移出后，立刻显示结果

<hr/>

publicclass RegisterServletPost extends HttpServlet

publicvoid doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException

request.setCharacterEncoding("UTF-8");

String username = request.getParameter("username");

String tip = "images/MsgSent.gif";

if("杰克".equals(username))

tip = "images/MsgError.gif";

response.setContentType("text/html;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write(tip);

pw.flush();

pw.close();

（3）基于XML，以POST方式，完成省份-城市二级下拉联动

（text/xml;charset=UTF-8）

</select>

</select>

//定位省份下拉框，同时添时内容改变事件

document.getElementById("province").onchange = function()

//清除城市下拉框中的内容除第一项外

var citySelectElement = document.getElementById("city");

citySelectElement.options.length = 1;

//获取选中的省份

var i = this.selectedIndex;

var optionElement = this[i];

var province = optionElement.innerHTML;

//如果不是"选择省份"的话

if("选择省份" != province)

//NO1)

var ajax = createAJAX();

//NO2）

var method = "POST";

var url = "$pageContext.request.contextPath/ProvinceCityServlet?id="+new Date().getTime();

ajax.open(method,url);

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

//NO3)

var content = "province="+province;

ajax.send(content);

//-------------------------------------------------

//NO4）

ajax.onreadystatechange = function()

if(ajax.readyState == 4)

if(ajax.status == 200)

//NO5)

var xmlDocument = ajax.responseXML;

//NO6）按照dom规则，解析xml文件中的所有内容

var cityElementArray = xmlDocument.getElementsByTagName("city");

var size = cityElementArray.length;

for(var i=0;i<size;i++)

var cityElement = cityElementArray[i];

//innerHTML只能用于html和jsp页面，不能用于xml页面

//在xml页面我们通常用firstChild.nodeValue去替代innerHTML

var city = cityElement.firstChild.nodeValue;

//<option></option>

var optionElement = document.createElement("option");

//<option>广州</option>

optionElement.innerHTML = city;

//<select id="city" style="width:111px"><option>广州</option></select>

citySelectElement.appendChild(optionElement);

</script>

publicclass ProvinceCityServlet extends HttpServlet

publicvoid doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException

this.doPost(request,response);

publicvoid doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException

request.setCharacterEncoding("UTF-8");

String province = request.getParameter("province");

response.setContentType("text/xml;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write("<?xml version='1.0' encoding='UTF-8'?>");

pw.write("<root>");

if("广东".equals(province))

pw.write("<city>广州</city>");

pw.write("<city>深圳</city>");

pw.write("<city>中山</city>");

pw.write("<city>珠海</city>");

elseif("湖南".equals(province))

pw.write("<city>长沙</city>");

pw.write("<city>株洲</city>");

pw.write("<city>张家界</city>");

elseif("湖北".equals(province))

pw.write("<city>武汉</city>");

pw.write("<city>黄岗</city>");

pw.write("</root>");

pw.flush();

pw.close();

（4）验证码检查

（text/html;charset=UTF-8）

<form>

验证码：

学习aiax(javascript)--省份-城市二级下拉联动（POST方式）

web前端入门到实战：HTMLCSSJavaScript分别实现什么功能？

省份城市联动框

JavaScript实现省市联动

D3.js 入门系列 --- 9.4 集群图的制作

联动菜单