JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:
JS全称是 JavaScript , JavaScript 需要与 HTML 和 CSS 一起工作。
JavaScript 是 Web 的编程语言,是JAVA的一种脚本语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它们根本没有关系,java是强语言几乎无所不能,而javascript是脚本语言,只局限于浏览器。
JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript 的第六版,简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。很多js相关技术都遵循这个标准,如目前最受欢迎的Vue。
微软出了符合规范类似javascript的称为js,但一般开发者忽略它们的差异,全称就习惯叫javascript,简称就习惯叫js。
JavaScript,是一种弱类型语言,同其他语言一样,有它自身的语法,数据类型,表达式,算术运算符等。
JavaScript是一门 基于对象 和 事件驱动 的 脚本语言 ,通常用来提高网页与用户的交互性。
我们有了html超文本标记语言实现了网站页面展现,展现文字、表格、图片、超链接等,有了css样式表实现了页面的美化,这些技术实现了静态网页。
日常展现是已经足够了,但是如果我们要做个注册功能呢?如论坛,我们注册个论坛来发文章,聊天。这就带来一个问题,信息如何根据不同的使用者,展现不同的内容呢?再如我注册登录和你注册登录,我们在网站上显示的登录名称就不同。这html+css就无能为力了,它们无法实现,那谁能办到呢?这时javascript就派上用场了。它能实现浏览器用户和后台服务器进行交互。注册、登录、添加商品到购物车、下订单对它而言都是小菜一碟。有了javascript的加入,实现页面和后台系统的交互,实现用户信息的注册,实现用户的登录,实现个性化的数据展现,功能强大不老少。业界把这样的网页称为动态网页,把这样的网站称为动态网站。
简而言之,静态网站只能看,不同浏览者看到内容一致不能变化;动态网站可以读写数据,内容根据不同浏览者展示不同的信息。
那么网页是如何和后端交互的呢?
动态网站的软件架构是怎样的呢?
用户访问页面,页面触发事件创建XHR对象,进行ajax请求,请求访问服务器端,请求被web中间件拦截并进行处理,由控制层框架springmvc中的controller进行接收,controller请求业务层spring框架的service服务,service请求持久层mybatis框架的mapper映射,mapper访问数据库。操作完数据库,返回结果,mybatis封装成java对象传回service,service把java对象传回controller,controller把java对象又转换为json字符串,然后传回浏览器,浏览器传回给调用者XHR,XHR调用回调方法callback,callback进行json字符串的解析,从中拿到要展现的数据,通过javascript处理,最终回显到页面上。
可以看到这个调用过程是非常复杂的,跨越网络,跨域多个服务器,很多技术应用其中,而这一切的始作俑者是谁呢?谁让这一切成为可能,它就是javascript,它实现了用户的请求和响应,实现了数据的动态展现,使早期静态的网站走向了动态的网站。
它不仅可以创建对象,也能使用现有的对象。JS没有类的概念,也没有编译的过程。是一边解释一边执行。
在JS中,大部分情况下都是通过事件触发驱动函数执行的,从而实现特定的功能。(比如点击div将内容替换为时间、当鼠标滑过元素,元素就有翻转的动态。)
在网络前端开发环境下,用于嵌入在客户端浏览器中的一段小程序。
特点:
JS是一门直译式的语言,直接执行的就是源代码.是一边解释一边执行,没有编译的过程(不像Java需要提前编译为class文件再运行).
JS是一门弱类型的语言,没有严格的数据类型.
优势:
良好的交互性
一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
跨平台性(Java语言具有跨平台性,是因为有虚拟机):只要有浏览器的地方都能执行JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS</title>
<!-- 在网页中添加js代码 -->
<!-- js出现位置:行内js,内部js,外部js -->
<script type="text/javascript">
alert('你路过了div元素')/* 刷新网页立即跳出提示,没有触发条件 */
</script>
</head>
<body>
<!-- 单击div时弹出提示 -->
<div onclick="alert('你点我干啥')"> 我是div</div>
<!--onclick(点击)出现alert(你点我干啥)(提示信息),不点击不出现
这就是JS的特性事件触发,有单击,才有提示信息,没有就不提示-->
<!-- 双击a时弹出提示 -->
<a ondblclick="alert('你点一下还不行,现在点俩下啊')"> 我是a</a>
<!-- 鼠标划入时弹出提示 -->
<span onmouseenter="alert('你敢扒拉我')"> 我是span1</span>
<!-- 鼠标划出时弹出提示 -->
<span onmouseout="alert('你扒拉了我还敢走')"> 我是span2</span>
</body>
</html>
<head>
<meta charset="utf-8"/>
<script>/* JS代码 */
function fn(){
alert("JS的第1种引入方式");
}
</script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
创建1.js文件
function fn(){
alert("JS的第2种引入方式");
}
在html中引入文件
<head>
<meta charset="utf-8"/>
<script src="1.js"> </script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
注意:不要同时通过一个script标签引入JS代码和JS文件,会导致代码不会执行!比如:
<script src="demo1.js">
alert("哈哈哈哈。。。");//代码不会执行!!
</script>
单行注释: //注释内容
多行注释: /* 注释内容 */
包括:number/string/boolean/null/undefined
(1) 数值类型-number
在JS中,数值类型只有一种,就是浮点型。
在JS中,需要时会自动的进行数据类型的转换,比如:在显示和处理的时候,浮点型和整型会自动的转换。
2.4+3.6=6;
Infinity : 正无穷大
-Infinity : 负无穷大
NaN : Not a Number 非数字, 和任何值都不相等,包括它本身
(2) 字符串类型-string
在JS中,字符串是基本数据类型。
在JS中,字符串直接量是通过单引号或者双引号引起来。
var str1 = "Hello…";
var str2 = 'CGB2103…';;
alert(str1);
(3) 布尔类型-boolean
值为true或者是false;
var s1 = false;
console.log(s1);
(4) undefined
值只有一个就是undefined。表示变量没有初始化值。
比如:
a) var num; alert(num);//声明了变量但是没有为变量赋值,该变量的值就是undefined。
b) 或者访问一个对象上不存在的属性时,也是undefined。
c) 或者访问数组中一个没有的元素的位置时,该位置处的值也是undefined.
(5) null
值也只有一个,就是null。表示空值或者不存在的对象。
函数、数组、对象(自定义对象、内置对象、DOM对象、BOM对象…)
js是弱类型语言,所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型,如java的变量类型是编译期就确定的;而它采用了动态类型,也就是说在编译期类型不确定,运行时会动态根据变量的赋值来决定它的类型,这点比较灵活。这也是双刃剑,编译期就难以检查出其赋值的错误。
练习:变量交换
(1) 在JS中是通过 var 关键字来声明一个变量
var a=1; alert(a);
var x=true; alert(x);
var y=10.8; alert(y);
(2) 在JS中声明的变量是不区分类型的, 可以指向任意的数据类型。
var a = 1;
a=true;
a=100;
alert(a);//100
function x(){
var m = 10;
alert("局部变量:"+m);
alert("全局变量:"+a);
}
alert("局部变量2:"+m);//局部变量失效,报错
JS中的运算符和Java中的运算符大致相同
算术运算符: +,-,*,/,%,++,–
赋值运算符: =,+=,-=,*=,/=,%=
比较运算符: ==,!=, =,!, > ,< ,>=,<=
位运算符: & , |
逻辑运算符: &&,||
前置逻辑运算符: ! (not)
三目运算符: ? :
常见运算符测试
var a = 3;
var b = 1;
console.log(a+b);//4
a+=4;
console.log(a+b);//8
//a+=4;
console.log(a==b); //true
console.log(a==="3"); //false 如果两边比较的值不是同一种数据类型,===直接返回false,如果是同一种数据类型,==和===没有区别!
console.log("1"=="1"); //true //由于JS中字符串是基本数据类型,比较字符串相等通过 == 进行!
var a = 1;
alert(a++);//1
alert(++a);//3
alert(++a+a+++a);//4+4+5
alert(a>3?10:8);
var b = 10;
alert(a>b?a:b);//求两个数里的大数
var c = 8;
var d = a>b?(a>c?a:c):(b>c?b:c);
alert(d);//三个数里的大值
typeof运算符: 用于返回变量或者表达式 的数据类型
var i = 3;
console.log(typeof i);//number
i=true;
console.log(typeof i);//boolean
i="hello";
console.log(typeof i);//string
console.log(typeof 123+"abc");//numberabc
console.log(typeof (123+"abc"));//string
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 测试JS语法 </title>
<script type="text/javascript">
//3.js的运算符
alert(5/2);//2.5 可以自动转换类型
//自增自减
var e = 10;
alert(e++);//10;符号在后,先用后增
alert(++e);//12;符号在前,先增后用
//== != !== ===
alert(1==1);//true;==比较数值
alert(1===1);//true;===比较类型
alert(1=='1'); //true;==比较数值
alert(1==='1');//false;===比较类型
alert(1!=1);//false;==比较数值
alert(1!==1);//false;===比较类型
alert(1!='1');//false;==比较数值
alert(1!=='1');//true;===比较类型
//2.js变量
var a = 10; //number
a = 1.6; //number
a = true; //boolean
a = 'hello'; //string
alert(a); //hello
//练习交换变量的值
var b = 1;
var c = 2;
var d = b; //将b的值交给d,此时d=b=1;
b=c;//将c的值交给b,此时b=c=2;
c=d;//将d的值交给c,此时c=d=1;
alert(b+','+c)
//1.JS的数据类型:number/string/boolean/null/undefined
alert(100);
alert(1.6);
alert(1.6+3.4)//5,js是弱类型
alert('hello');
alert("hello");
alert(true);
alert(false);
alert(null);
</script>
</head>
<body>
</body>
</html>
JS中的语句和Java中的语句用法也大致相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js语句</title>
</head>
<body>
<!-- 表明JS代码的开始位置和结束位置 -->
<script>
//分支结构: if...else
if(1==='1'){
//false
alert('ok');
}else{
alert('no ok');
}
// 例子: 接收用户输入的成绩,判断成绩所属的等级
// 80~100(包括80,也包括100) 优秀
// 60~80(包括60,但不包括80) 中等
// 0~60(包括0,但不包括60) 不及格
var a = prompt('请输入分数:');
if(a>=80 && a<=100){
alert('优秀');
}else if(a>=60 && a<80){
alert('中等');
}else if(a>=0 && a<60){
alert('不及格');
}else{
alert('数据有误');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js语句</title>
</head>
<body>
<!-- 表明JS代码的开始位置和结束位置 -->
<script>
//分支结构: switch...case
var day = 1;
switch(day){
//java里只支持整数类型的表达式byte short int char String
case 1:alert('今天是星期一');break;
case 2:alert('今天是星期二');break;
case 3:alert('今天是星期三');break;
case 4:alert('今天是星期四');break;
case 5:alert('今天是星期五');break;
}
</script>
</body>
</html>
for(var i=0;i<5;i++){
alert( i );
console.log(i);
}
var i=0;
while(i<5){
alert(i);
i++;
}
var sum = 0;
for( var i=1; i<=100; i++ ){
sum += i; //sum = sum+i;
}
console.log(sum );
//没有增强for循环
注意: JS中的语句,判断条件可以不是boolean类型,因为JS中会自动进行数据类型的转换。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js语句</title>
</head>
<body>
<!-- 表明JS代码的开始位置和结束位置 -->
<script>
//2.分支结构: switch...case
var day = 1;
switch(day){
//java里只支持整数类型的表达式byte short int char String
case 1:alert('今天是星期一');break;
case 2:alert('今天是星期二');break;
case 3:alert('今天是星期三');break;
case 4:alert('今天是星期四');break;
case 5:alert('今天是星期五');break;
}
//1.分支结构: if...else
if(1==='1'){
//false
alert('ok');
}else{
alert('no ok');
}
// 例子: 接收用户输入的成绩,判断成绩所属的等级
// 80~100(包括80,也包括100) 优秀
// 60~80(包括60,但不包括80) 中等
// 0~60(包括0,但不包括60) 不及格
var a = prompt('请输入分数:');
if(a>=80 && a<=100){
alert('优秀');
}else if(a>=60 && a<80){
alert('中等');
}else if(a>=0 && a<60){
alert('不及格');
}else{
alert('数据有误');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js语句</title>
<script>
// 2.js的循环语句
//练习3:假设你有1个亿,每天花500w,能花多少天
var days = 0; //记录天
var money = 100000000 ;//记录钱
while(money>0){
money -= 5000000 ;//花钱
days++;//天数++
}
console.log(days);
//练习2:统计1~100的偶数和
var sum = 0;//记录和
for(let i=1;i<=100;i++){
if(i % 2 == 0){
//过滤偶数
sum = sum + i;//修改变量
// sum += i;
}
}
console.log(sum);
//练习1:打印1~100
for(let i=1;i<=100;i++){
console.log(i);
}
// 1.js的变量和常量
var a = 2; //变量
a = 'hello';
console.log(a);//hello
const b = 10; //常量,值不能再改
// b = 20;
console.log(b);
let c = 10;//变量,有作用域
c = 20;
console.log(c);
var x = 10;
{
let x = 20; //只在{}内有效,出去就无效了
console.log("x="+x);//20
}
console.log("x="+x);//10
</script>
</head>
<body>
</body>
</html>
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如:数值、字符串、布尔值、undefined、null、对象、函数等
var arr1 = new Array();//声明一个空数组
var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
alert(arr2.length);//3
var arr4 = [];//声明一个空数组
alert(arr4.length);//0
arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
alert(arr4);
(1)JS数组中可以存放任意的数据类型
(2)JS中的数组长度可以被改变
var arr1 = [];//声明一个空数组
console.log( arr1.length ); //此时数组长度为 0
arr1.length = 10;
console.log( arr1.length ); //此时数组长度为 10
arr1[99] = "abc";
console.log( arr1.length ); //此时数组长度为 100
arr1.length = 0;
console.log( arr1.length ); //此时数组长度为 0
length属性 -- 获取数组的长度,还可以改变数组的长度
var a = [1,2,3];
alert(a.length);
var arr = [123, "abc", false, new Object() ]
//遍历数组
for( var i=0; i< arr.length; i++ ){
console.log( arr[i] );
}
//for..in
for(var i in a){
console.log("i:::"+i);
}
//循环接收用户输入,将数据存储在数组中,直至输入‘exit’结束
c();
function c(){
var a=[];
for(;;){
var x=prompt("请输入整数:");
a[a.length]=x;
if(x=="exit"){
break;
}
}
console.log(a);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js数组</title>
<script>
// 1.创建js数组: 数据类型丰富 + 长度可变
//方式1:
let a = new Array();
//存入数据--丰富的类型
a = new Array(1,1.6,true,'hello',null);
a[99]=0;
console.log(a);
console.log(a.length);//获取数组的长度
console.log(a[2]);//获取下标为2的数据
console.log(a[a.length-1]);//获取null元素
//方式2:
let b = [];
//存入数据
b = [1,1.6,true,'hello',null];
console.log(b);
console.log(b.length);
console.log(b[3]);
// 2.遍历js数组:
//普通for循环
for (let i = 0; i < b.length; i++) {
console.log(b[i]+"========");//i是下标
}
//增强for循环..foreach--for in
//java的写法 for(var i : b){}
for(var i in b){
console.log(i);//i是下标
console.log(b[i]);
}
</script>
</head>
<body>
</body>
</html>
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块,前面使用了关键词 function
声明:function 函数名称([参数列表]){
函数体 }
调用: 函数名称([参数列表]);
案例:
function a(){
//无参函数定义
var a = [1,2,3,4,5]; //定义数组
var sum =0; //定义变量
for (var i = 0; i <a.length; i++) {
if(a[i]%2==0){
sum+=a[i];
}
}
alert(sum);
}
a();//函数调用
function b(x,y){
//定义含参函数
alert(x+y);
}
b(1,"2");//函数调用
b(1,2);//函数调用
声明:var 函数名称 = function([参数列表]){
函数体 }
调用: 函数名称([参数列表]);
案例:
// fn2(); //这种方式定义的函数还未加载就调用,会报错.方式1没问题
var fn2 = function(){
//定义无参函数
alert(100);
}
fn2(); //函数调用
var fn3 = function(x,y){
//定义含参函数
alert(x*y);
}
fn3(0.32,100);//函数调用
fn2("王海涛");参数个数不匹配,王海涛undefined
var e = function(x,y){
//定义有返回值含参函数
return x-y;
}
alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用
注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。
但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js函数</title>
<script>
//方式1:
// 1,定义函数
function print(){
console.log("调用成功");
}
// 2,调用函数
print();
//方式2:
// 1,定义函数
var sout = function(){
console.log("调用成功");
}
// 2,调用函数
sout();
// 练习1:求1~10的总和
// function add(){ 定义JS函数的第一种方式
var add = function(){
//定义JS函数的第二种方式
//1,定义数组
var a = [1,2,3,4,5,6,7,8,9,10] ;
//2,遍历数组
let b = 0;//定义变量,记录和
for(let i=0;i<a.length;i++){
b = b + a[i] ;//数组里的数据求和
}
console.log(b);
}
// add();//调用函数
</script>
</head>
<body>
<!-- 鼠标划入时,触发函数 -->
<button onmouseenter="add()">点我,求和</button>
</body>
</html>
利用function关键字声明对象,用new关键字创建对象。
String/Array/Number/Math/JSON…
Window对象–代表浏览器中一个打开的窗口,了解一下即可,很多被UI替代
window.onload() 在浏览器加载完整个html后立即执行!
window.alert("text") 提示信息会话框
window.confirm("text") 确认会话框
window.prompt("text") 键盘输入会话框
window.event 事件对象
window.document 文档对象
Document对象–代表整个HTML文档,可用来访问页面中的所有元素
document.write() 动态向页面写入内容
document.getElementById(id) 获得指定id值的元素
document.getElementsByName(name) 获得指定Name值的元素
学会简单使用,后期被jQuery封装,在后期被Vue框架封装
(1)方式一:
/* 自定义对象*/
function Person(){
} /* 定义对象*/
var p1 = new Person(); /* 创建对象*/
p1.name="张三";
p1.age=20;
console.log(p1);
p1.say = function(){
/* 定义函数*/
console.log("haha");
}
p1.say(); /* 函数调用*/
上面展示了js的强大!js的牛掰之处就在于,它的属性可以边写边创建,非常灵活,而java不行,必须先定义。
(2)方式二:
var p2 = {
"pname":"李四",
"page":100,
"psay":function(){
/* this使用p2里定义的 */
console.log(this.pname+this.page);
}
}
console.log(p2);
p2.psay(); /* 函数调用*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js对象</title>
<script>
function a(){
//1.内置对象--window对象
window.alert('100');//弹出框
window.confirm('确认');//确认框
window.prompt('请输入');//输入框
//window.document //属性,获取网页文档
//tring对象
var x = 'hello';
console.log(x.length);//求长度
console.log(x.charAt(0));//根据下标查找数据
console.log(x.concat(123));//拼接字符串
console.log(x.substring(1,4));//截取字符串,注意,截取字符串含头不含尾
//2.自定义对象
function Person(){
};//声明对象
var p1 = new Person();//创建对象
//动态设置属性
p1.name='张三';
p1.age='18';
//动态获取属性
console.log(p1);
//动态绑定属性
console.log(p1.name+p1.age);
//动态设置函数
p1.say = function(){
console.log('hahahaha')
};
p1.eat = function(){
console.log("干饭人,干饭魂")
};
//调用方法
p1.say();
p1.eat();
}
var p2={
"pname":'李四',
"page":'100',
"psay":function(){
/* this使用p2里定义的 */
console.log(this.pname+this.page);
}
}
/* 调用函数 */
console.log(p2);
p2.psay();
/* 创建JS对象方式2; */
let car ={
//设置属性
name : "bwm",
price : "9999999",
//设置函数
start : function(){
console.log('调用成功');
}
}
console.log(car);//{name: 'bwm', price: '9999999'}
console.log(car.name+car.price);//调用属性
car.start();//调用函数
a();
</script>
</head>
<body>
</body>
</html>
DOM非常重要,实际开发更多通过js操作DOM对象实现对html页面的操作,BOM也用,比较少用。所以学习重点放在DOM上。
DOM 是一项 W3C (World Wide Web Consortium) 标准,DOM(Document Object Model)文档对象模型为JS操作html文档所提供的一套API,通过这套API可以很方便的对html元素进行访问及增删改查操作。
--获取对象: window.document
--调用方法:
getElementById("元素的id的属性的值")--返回1个元素
getElementsByName("元素的name属性的值")--返回多个元素(用数组)
getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM解析</title>
<!-- js -->
<script>
function a(){
/* 按id获取,返回1个 */
var x = document.getElementById("div1");
x.innerHTML="你好div
";
/* 按name属性值获取,返回多个*/
var y = document.getElementsByName("div2");
console.log(y);//NodeList
y[0].innerHTML="hello js...";
/* 按class属性值获取,返回多个*/
var z = document.getElementsByClassName("span1");
console.log(z);//HTMLCollection
z[0].innerText="我变了
"
/* 按照标签名获取,返回多个 */
var m = document.getElementsByTagName("div");
console.log(m);//HTMLCollection
m[1].style.fontSize=30+"px";
}
</script>
</head>
<body>
<div id="div1" onclick="a();">我是div1</div>
<div name="div2" onclick="a();">我是div2</div>
<span class="span1">我是span1</span>
<span class="span1">我是span2</span>
<a name="div2" id="a1">我是a</a>
<!-- js事件: -->
<a href="#" onclick="method();">单击触发js</a>
<a href="#" ondblclick="method2();">双击触发js</a>
<a href="#" onmouseenter="method3();">滑过触发js</a>
<a href="#" onmouseleave="method4();">滑走触发js</a>
<button onkeydown="alert(1);">点我</button>
</body>
</html>
获取页面元素的4种方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 dom技术</title>
<script>
//1.创建函数
function fun (){
//练习1.选中id="d",获取内容
//先获取Document对象,再调用对象的API
var a = window.document.getElementById('d');
console.log(a);//获取元素
console.log(a.innerHTML);//获取内容
//练习2.选中我是p2元素,并获取内容
var x = document.getElementsByName("b");
console.log(x);
console.log(x[2]);//获取下标为2的元素
console.log(x[2].innerHTML);//获取下标为2的元素的内容
//练习3.选中我是p2元素,并修改内容
document.getElementsByName("b")[2].innerHTML="看我变成这个了
";
//练习4.选中我是div3元素,并修改内容
document.getElementsByClassName('a')[1].innerHTML="我也变了";
//练习5.选中我是div3元素,并修改样式
//document.getElementsByClassName('a')[1].style.color="blue";//按照class获取后修改颜色
//document.getElementsByTagName('div')[2].style.fontFamily="黑体";//按照div获取后改变字体
document.getElementsByTagName('div')[2].style.fontSize='60px';//按照div获取后改变字号
}
</script>
</head>
<body>
<div id="d" onclick="fun()">我是div1</div>
<div class="a">我是div2</div>
<div class="a">我是div3</div>
<div name="b">我是div4</div>
<p name="b">我是p1</p>
<p name="b">我是p2</p>
<p name="b">我是p3</p>
<p name="a">我是p4</p>
</body>
</html>
ajax往往要完整应用还会配合一个技术:JSON,那什么是JSON呢?
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON(JavaScript Object Notation,JS 对象简谱) 起名不咋地,非常拗口,我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者,成为主流开发方式(ajax异步请求,json返回)。
JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时,这些数据只能是文本。JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式,我们能够把数据作为 JavaScript 对象来处理,无需复杂的解析和转译。
JSON数据:
var a =' "firstName" : "John" '
JSON 对象:
var a = '{ "firstName":"John" , "lastName":"Doe" }'
JSON 数组:
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';
使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串 和 原生 JavaScript 对象互转.
给服务器发送数据: 将JS对象转成JSON字符串 JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象 JSON.parse("json字符串")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json</title>
<script>
//json用来在浏览器和服务器之间做数据传输,轻量级,格式简单明了.
//JSON是js的内置对象,用来把json类型的字符串和js对象互转
//json类型的字符串---{ "k1":"v1", "k2":"v2", "k3":"v3" }
function jschuan(){
var jsonchuan = '{ "k1":"v1", "k2":"v2", "k3":"v3" }';
document.getElementById("h").innerHTML=jsonchuan;
}
function chuan2js(){
var text='{ "k1":"v1", "k2":"v2", "k3":"v3" }';
console.log(text);
//从服务器收到的数据都是字符串,转成js对象,用js语法解析属性/方法
var jsobj = JSON.parse(text);//串转js对象,就可以写js代码解析数据
console.log(jsobj);
document.getElementById("d").innerHTML=jsobj.k2;
}
function js2chuan(){
var obj = {
"k1":"v1", "k2":"v2", "k3":"v3"};
console.log(obj);
//把浏览器的数据发给服务器,服务器只要json串
var text = JSON.stringify(obj);//js对象转成串
document.getElementById("p1").innerHTML=text;
console.log(text);
console.log(text.length);
}
</script>
</head>
<body>
<p id="p1" onclick="js2chuan();">我是p</p>
<div id="d" onclick="chuan2js();">我是div</div>
<h1 id="h" onclick="jschuan();">我是h1哦</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 json</title>
</head>
<script>
//1.定义json字符串
var a = '"firstName" : "john"'//json字符串
var b = '{"firstName":"davi","lastName":"dufu"}'//json对象
var c = '[{"firstNmae":"yige","lastName":"yidi"},{"firstName":"erge","lastName":"erdi"}]'//json数组
console.log(a.length);//求长度
console.log(b.concat('123'));//拼接字符串
//练习1:获取c里的数据 rose 10
var jsobj = JSON.parse(c);//把JSON串变成js对象
console.log(jsobj);
console.log(jsobj[0]);
console.log(jsobj[0].name);//rose
console.log(jsobj[1].age);//10
//---把两种数据互转,利用JSON工具类---
//2,JSON的parse():json字符串->js对象,好处是:方便的解析对象的属性
var obj = JSON.parse(b);
console.log(obj);
console.log(obj.name);//对象的属性
console.log(obj.age);//对象的属性
//3,JSON的stringify():js对象->json字符串,好处是:方便的对字符串操作,还可以发送给服务器
var car = {
name:"BMW",price:9.9} ;
var str = JSON.stringify(car);
console.log(str);
console.log(str.length);//求字符串的长度
//TODO json串和js对象的区别?语法不同+数据的解析方式不同
var d = {
name:"tony" , age:20 }//js对象
console.log(d.name);//获取了d对象的name属性的值
</script>
<body>
</body>
</html>
AJAX = Asynchronous JavaScript And XML. AJAX 并非编程语言。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分,而不需要重新加载整个页面。
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分,而不需要重新加载整个页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax-js版</title>
<script>
function change(){
// 1. 创建xhr对象,用于同幕后服务器交换数据
var xhr = new XMLHttpRequest();
// 2. 定义当 readyState 属性发生变化时被调用的函数
xhr.onreadystatechange=function(){
//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
if(this.status==200 && this.readyState==4){
// document.getElementById("d1").innerHTML="hi ajax";
//5.以字符串返回响应数据,并展示
document.getElementById("d1").innerHTML=this.responseText;
}
}
//3.规定请求的类型(请求方式,文件位置,异步)
xhr.open('get','1.json',true);
//xhr.open('get','http://localhost:8080/car/get',true);
//4.xhr将请求发送到服务器
xhr.send();
}
</script>
</head>
<body>
<!-- 点击时,使用ajax修改文字 -->
<div id='d1' onclick="change()">你好</div>
</body>
</html>
专业人用专业的工具,浏览器调试谷歌、火狐最佳,使用F12打开调试窗口。也可以快捷键打开:ctrl+shift+i。