JavaScript_基础简介8

最新推荐文章于 2020-11-18 17:31:12 发布
最新推荐文章于 2020-11-18 17:31:12 发布
阅读量101 收藏
点赞数
分类专栏： 前端 JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zhiyi/article/details/108507187
版权

1.JavaScript Browser BOM
BOM—浏览器对象模型
1.1 JavaScript Window 对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but").onclick=function(){
					alert("按钮点击事件");
				}
			}
		</script>
	</head>
	<body>
		<input id="but" type="button" value="测试按钮的点击事件" />
	</body>
</html>

在这里插入图片描述
• window.open() - 打开新窗口
window.open(URL,name,specs,replace)

URL可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
name可选。指定target属性或窗口的名称。支持以下值：
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称
specs可选。一个逗号分隔的项目列表。支持以下值：
channelmode=yes\no\1\0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\no\1\0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\no\1\0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels窗口的高度。最小.值为100
left=pixels该窗口的左侧位置
location=yes\no\1\0是否显示地址字段.默认值是yes
menubar =yes\no\1\0是否显示菜单栏.默认值是yes
resizable=yes\no\1\0是否可调整窗口大小.默认值是yes
scrollbars=yes\no\1\0是否显示滚动条.默认值是yes
status=yes\no\1\0是否要添加一个状态栏.默认值是yes
titlebar=yes\no\1\0是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\no\1\0是否显示浏览器工具栏.默认值是yes
top=pixels窗口顶部的位置.仅限IE浏览器
width=pixels窗口的宽度.最小.值为100
replaceOptional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
• true - URL 替换浏览历史中的当前条目。
• false - URL 在浏览历史中创建新的条目。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but").onclick=function(){
					//打开一个新窗口
					//window.open(); //空白窗口
					//window.open("https://www.baidu.com"); //打开百度对应的窗口
					//window.open("https://www.baidu.com","_self");
					window.open("https://www.baidu.com","_blank","width=200,height=200",false);
				}
			}
		</script>
	</head>
	<body>
		<input id="but" type="button" value="测试按钮的点击事件" />
	</body>
</html>

•	window.close() - 关闭当前窗口
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but1").onclick=function(){
					//打开一个新窗口
					window.open("https://www.baidu.com","_blank","width=200,height=200",false);	
				}
				document.getElementById("but2").onclick=function(){
					//关闭当前窗口
					window.close();
				}
			}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="打开新窗口" /><br>
		<input id="but2" type="button" value="关闭打开的新窗口" /><br>
	</body>
</html>

在这里插入图片描述

alert()显示带有一段消息和一个确认按钮的警告框。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。

Location 对象

search返回一个URL的查询部分

History 对象

back()加载 history 列表中的前一个 URL
forward()加载 history 列表中的下一个 URL
go()加载 history 列表中的某个具体页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but5").onclick=function(){
					window.open("javascript2.html?name=zhangsan&age=23","_self");
				}
			}
		</script>
	</head>
	<body>
		<input id="but5" type="button" value="测试Location的search属性" /><br>
		<a href="javascript2.html?name=zhangsan&age=23">跳转到javascript2.html</a>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var testvalu=window.location.search;
				//testvalu--->?name=zhangsan&age=23
				var strarray=testvalu.split("&");
				var info="";
				for(var i=0;i<strarray.length;i++){
					info=info+strarray[i].split("=")[1]+",";
				}
				info=info.slice(0,info.length-1);
				document.getElementsByTagName("h2")[0].innerHTML=info;
				
				document.getElementById("but1").onclick=function(){
					//window.history.back();
					window.history.go(-1);
				}
			}
		</script>
	</head>
	<body>
		<h1>测试Location的search属性</h1>
		<h2></h2>
		<input id="but1" type="button" value="测试History 的back()" /><br>
	</body>
</html>

在这里插入图片描述
2.JSON 简介
JSON: JavaScript Object Notation（JavaScript 对象标记法）。
JSON 是一种存储和交换数据的语法【文本形式】。
交换数据
当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。
我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。
JSON数据的组成

  1. JSON对象
    通过”{}包围,在里面提供键值对数据形式【键:值】，可以出现多个，中间用”,”分割。
    { name:“Bill Gates”, age:62, city:“Seattle” }
  2. JSON数组
    通过”[]”包围， 在里面提供JSON对象
[{ name:"Bill Gates", age:62, city:"Seattle" } ,
{ name:"Bill Gates", age:62, city:"Seattle" } ]
通常我们所接触json数据都是JSON对象中包含JSON数组，JSON数组包含JSON对象
0http://v.juhe.cn/weather/index?format=2&cityname=天津&key=1323523
{ "resultcode": "200", "reason": "查询成功!", "result": { "sk": { /*当前实况天气*/ "temp": "21", /*当前温度*/ "wind_direction": "西风", /*当前风向*/ "wind_strength": "2级", /*当前风力*/ "humidity": "4%", /*当前湿度*/ "time": "14:25" /*更新时间*/ }, "today": { "city": "天津", "date_y": "2014年03月21日", "week": "星期五", "temperature": "8℃~20℃", /*今日温度*/ "weather": "晴转霾", /*今日天气*/ "weather_id": { /*天气唯一标识*/ "fa": "00", /*天气标识00：晴*/ "fb": "53" /*天气标识53：霾 如果fa不等于fb，说明是组合天气*/ }, "wind": "西南风微风", "dressing_index": "较冷", /*穿衣指数*/ "dressing_advice": "建议着大衣、呢外套加毛衣、卫衣等服装。", /*穿衣建议*/ "uv_index": "中等", /*紫外线强度*/ "comfort_index": "",/*舒适度指数*/ "wash_index": "较适宜", /*洗车指数*/ "travel_index": "适宜", /*旅游指数*/ "exercise_index": "较适宜", /*晨练指数*/ "drying_index": ""/*干燥指数*/ }, "future": [ /*未来几天天气*/ { "temperature": "28℃~36℃", "weather": "晴转多云", "weather_id": { "fa": "00", "fb": "01" }, "wind": "南风3-4级", "week": "星期一", "date": "20140804" }, { "temperature": "28℃~36℃", "weather": "晴转多云", "weather_id": { "fa": "00", "fb": "01" }, "wind": "东南风3-4级", "week": "星期二", "date": "20140805" }, { "temperature": "27℃~35℃", "weather": "晴转多云", "weather_id": { "fa": "00", "fb": "01" }, "wind": "东南风3-4级", "week": "星期三", "date": "20140806" }, { "temperature": "27℃~34℃", "weather": "多云", "weather_id": { "fa": "01", "fb": "01" }, "wind": "东南风3-4级", "week": "星期四", "date": "20140807" }, { "temperature": "27℃~33℃", "weather": "多云", "weather_id": { "fa": "01", "fb": "01" }, "wind": "东北风4-5级", "week": "星期五", "date": "20140808" }, { "temperature": "26℃~33℃", "weather": "多云", "weather_id": { "fa": "01", "fb": "01" }, "wind": "北风4-5级", "week": "星期六", "date": "20140809" }, { "temperature": "26℃~33℃", "weather": "多云", "weather_id": { "fa": "01", "fb": "01" }, "wind": "北风4-5级", "week": "星期日", "date": "20140810" } ] }, "error_code": 0 }

我们通常要在提交/下载json数据之前/以后，要对json数据进行转换

  1. json字符串转换成json对象
  2. json对象转换json字符串
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but1").onclick=function(){
					//创建一个json对象
					var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
					alert(myObj);
					//将json对象转换成json字符串
					var jsonstring=JSON.stringify(myObj);
					alert(jsonstring);
				}
				document.getElementById("but2").onclick=function(){
					//创建json字符串
					var mystring ="{name:'Bill Gates', age:62,city:'Seattle'}";
					alert(mystring);
					var jsonobj = eval('(' + mystring + ')');
					alert(jsonobj.name+","+jsonobj.age+","+jsonobj.city);
				}
			}
		</script>
	</head>
	<body>
		<input  id="but1" type="button" value="json对象转换json字符串" /><br>
		<input  id="but2" type="button" value="json字符串转换json对象" /></br>
	</body>
</html>

在这里插入图片描述
测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--导入表jquery-->
		<script src="jquery-3.4.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$.get("http://127.0.0.1:8080/testajax/getStudentAll",
					function(data){
						//var jsonobj = eval('(' + data + ')');
						var trvalue="";
						for(var i=0;i<data.length;i++){
							 trvalue=trvalue+"<tr><td>"+data[i].stuid+
							 				"</td><td>"+data[i].stuname+
							 				"</td><td>"+data[i].stuage+
							 				"</td><td>"+data[i].stuaddress+"</td></tr>";
						}
						document.getElementById("main").innerHTML=trvalue;
					},"json");
				});
			});
		</script>
	</head>
	<body>
		<center>
			<input id="but1" type="button" value="得到学生信息"/>
			<table id="main" border="1px"></table>
		</center>
	</body>
</html>
H之一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 基础简介 适合新手学习
10-29
在网络或书籍所说的JavaScript大部分指客户端JavaScript。
aula_javascript：JavaScript简介
02-18
在“aula_javascript”这个学习资源中，我们将会深入探讨JavaScript的基础知识和核心概念。JavaScript是网际网路上最广泛使用的编程语言之一，其重要性在于它的灵活性和强大的功能。它不仅能够处理用户的输入，还能...
iOS极光推送
努力，可能成功！放弃，注定失败！
01-21 6375
昨天花了一下午的时间研究了下极光推送，也前也是没做过，不知道从何下手！才开始的时候一看官方的SDK感觉好难，不过经过一系列的捣鼓之后，手机收到了推送信息，感觉其实并没有那么难！ 1.配置开发证书（得有开发者账号，个人，企业的都可以） 开发环境测试 在对 JPush iOS 开发环境进行测试前，请确保 3 个统一： App 是开发环境打
小白入门_老九（C++入门）P46~52
qq_37341783的博客
07-11 140
#include #include #include #include <windows.h> #include #include #include using namespace std; //冒泡排序和选择排序 int main() { int temp; int nums[] = { 8,4,2,1,23,23,344,12 }; int numslen = size...
vue模板语法（上）
xfz610614的博客
09-17 195
插值 文本 {{msg}} html 使用v-html指令用于输出html代码 属性 HTML属性中的值应使用v-bind指令 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} ...
channel_id以及type_id的内容
aoqiaotan2763的博客
03-13 2230
转载于:https://www.cnblogs.com/superAnny/p/6542724.html
Vue 不睡觉教程1-从最土开始
热门推荐
软件哲学
06-21 2万+
环境参数vue版本：2.5.16安装虽然vue有很多种安装方式，但是最酷的是使用vue-cli方式安装。方法如下：安装vue-cli首先确保npm版本大于3.0:$ npm -v 6.0.0如果低于3.0请升级npmnpm i -g npm全局装vue-clinpm i -g @vue/cli插曲：我第一次安装 vue/cli的时候，npm不断提示 ERR! write after endroot...
小白入门_python菜鸟100题（16-20）
qq_37341783的博客
07-03 605
16 # 输出指定日期格式的 import datetime if name == ‘main’: print(datetime.date.today().strftime(’%d/%m/%Y’)) date1 = datetime.date(1941, 1, 5) print(date1.strftime(’%d/%m/%Y’)) date2 = date1 + datetime.timede...
（2020-09-09）javascript_8
Missjuzi的博客
09-09 162
1.javascript browser bom bom-----浏览器对象模型 1.1javascript window 对象 所有浏览器都支持wundow对象。它代表浏览器的窗口。 所有全局javascript对象，函数和变量自动成为window对象的成员。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <..
web表格制作
H_zhiyi的博客
08-20 1万+
1.表格的制作 1、表格元素–<table> 表格中的行–<tr> 表格中的列–<td> 表格中的表头–【居中/加粗】 table标记的边框–border table标记的宽度–width table标记的高度–height table标记的水平对齐方式–align table标记的表格背景色–bgcolor table标记的表格边框色–bordercolor table标记的表格中的内容与边框之间的距离–cellpadding table标记的表格中的边框与边框之间的距
HTML标签书写格式大全
H_zhiyi的博客
09-28 3591
一、常用浏览器与浏览器内核 1.常用浏览器 chromo(推荐谷歌) Firefox(火狐) IE浏览器 Opera浏览器 safari浏览器 2.浏览器内核 浏览器内核的主要组成部分： 渲染引擎（layout或engine）和JS引擎 渲染引擎：负责获取网页的内容（HTML.XML.图像等）、整理信息（加入CSS等），已经计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有所不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序
查找字符串中所有某个字符出现的位置
H_zhiyi的博客
11-05 1355
//查找字符串中所有i出现的位置 function search(str){ //index 为 i出现的位置 var index = str.indexOf('i') //num为i出现的次数 var num = 0 while(index !== -1){ console.log(index); num ++ index += 1 index = st
HTML表单元素简介
H_zhiyi的博客
08-21 1118
1表单元素 input 文本框/密码框/单选按钮/复选框… 1.1文本框<input type=”text” name=”username” value=”初始值”></input> 属性type=”text”–表示文本框 属性name=”username”—告诉后台处理程序文本框中输入的数据值 属性value=”初始值”-------初始值 1.2密码框<input type=”password” name=”password” value=”初始密码”></
JavaScript中偏移量属性
H_zhiyi的博客
11-18 973
偏移量：获取在已定位的父级元素的子元素位置属性   offsetLeft  取正值从左向右偏移，取负值从右向左偏移   offsetTop  取值从上向下偏移，取负值从下向上偏移   offsetWidht  获取元素的宽度   offsetHeight  获取元素的高度   offsetParent  获取定位过的父元素，即有可能不是离得最近的父级元素 客户区大小：   clientLeft  离已定位的父级元素的左边距，包括自身左边框宽度   clientTop  离已定位的父级元素的上边距，包括自身上
使用JavaScript控制按钮点击触发的时间段
H_zhiyi的博客
11-18 777
话不多说 直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./addevent.js"></script> <title>D
JavaScript控制灯泡开关
H_zhiyi的博客
11-16 776
在html中使用<button>按钮去控制灯泡的开关。 首先写出HTML中的灯泡和开关按钮： HTML： <div id=""> <img src="guan.jpg" ><br> <button onclick="kaiGuan()" id="kg">开</button> </div> JS: //使用变量获取到html中的灯泡和按钮； var deng = document.getEl
CSS设置文本字体，链接，背景等
H_zhiyi的博客
09-25 611
一、CSS基础样式 1.CSS文本及字体设计 常用的应用文本的CSS样式 设置文字的颜色 color:red; 设置文字的大小 font-size:12px; 设置文字的字体 font-family:‘微软雅黑’; 设置字体不倾斜 font-style:‘normal’; 设置字体倾斜 font-style:‘italic’; 设置文字是否加粗 font-weight:bold; font-weight:normal 设置文字的行高 line-height:24px;
DOM增加元素属性/dom事件
H_zhiyi的博客
11-16 475
增: 元素(标签),节点 创建元素三种方法: 1 document.write(“html”); 2 元素对象.innerHTML = “html” 3 document.createElement(“标签名”); 创建元素对象,返回值 元素对象.appendChild(子元素对象); 添加 给body添加:document.body.appendChild(子元素对象); 注:建议使用第三方法,性能最好 元素对象.insertBefore(要插入的元素,已有元素); 在某元素之前插入元素 元素对
javascript关于for循环语句的使用方法
H_zhiyi的博客
10-27 445
for语句 whlie和do…whlie一般是用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便 for循环语法： // for循环的表达式之间用的是;号分隔的，千万不要写成, for (初始化表达式1; 判断表达式2; 自增表达式3) { // 循环体4 } 执行顺序：1243—243—243（直到循环条件变成flase） 1.初始化表达式 2.判断表达式 3.自增表达式 4.循环体 案例： 打印1-100之间所有数 <script> for(
Html+Css+Javascript_web开发基础教程
**Javascript基础知识** 1. Javascript简介：Javascript是一种脚本语言，用于添加交互功能到网页中。 2. Javascript的基本语法：变量、数据类型、运算符、控制结构、函数等。 3. Javascript的事件处理：了解事件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值