js学习笔记——总
JavaScript 简介
JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了…在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。
JavaScript 1.0获得了巨大的成功，Netscape随后在Netscape Navigator 3（网景浏览器）中发布了JavaScript 1.1。之后作为竞争对手的微软在自家的IE3中加入了名为JScript（名称不同是为了避免侵权）的JavaScript实现。而此时市面上意味着有3个不同的JavaScript版本，IE的JScript、网景的JavaScript和ScriptEase中的CEnvi。当时还没有标准规定JavaScript的语法和特性。随着版本不同暴露的问题日益加剧，JavaScript的规范化最终被提上日程。
1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufactures Association）该协会指定39号技术委员会负责将其进行标准化，TC39来此各大公司以及其他关注脚本语言发展的公司的程序员组成，经过数月的努力完成了ECMA-262——定义了一种名为ECMAScript的新脚本语言的标准。第二年，ISO/IEC（国标标准化组织和国际电工委员会）也采用了ECMAScript作为标准（即ISO/IEC-16262）
基本用法
js预解析
什么是预解析
C语言要求函数必须先声明后调用，js可以先调用而后声明====js预解析 预解析是发生在当前作用域下的
JS的解析过程分为两个阶段：预编译期(预处理、预解析、预编译)与执行期。
预编译期JS会对本代码块(script)中的所有声明的变量和函数进行处理，但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。 执行期就是在编译后的基础上开始从上到下执行脚本，遇到错误时中断
预解析规则(优先级)
在js文件或者script里面的代码在正式开始执行之前，进行的一些解析工作。这个工作很简单，就是在全局中寻找var关键字声明的变量和通过function关键字声明的函数。
同名的函数会替换掉 同名的 变量
方法的变量对象（VO）就会被以下属性填充
- 参数，参数名就是VO中的名称。值就是实参的值。如果没有传递，则为undefined
- 函数声明，如果VO中中已经存在相同的属性，则替换它的值
- 变量声明：通过VO声明的。在VO中的值为undefined，如果VO中已经含有相同的属性，则不会影响已经存在的属性。
例子
console.log(a)
var a=1
console.log(a)
function a(){
console.log(2)
}
console.log(a)
var a=3
console.log(a)
function a(){
console.log(4)
}
console.log(a)
a()
// 预解析顺序
// var a = undefined
// function a(){console.log(2)} 替换变量
// function a(){console.log(4)}
// 运行
// console.log(a) ======function a(){console.log(4)}
// a = 1
// console.log(a) ==========1
// console.log(a) ======1
// a = 3
// console.log(a) ===========3
// console.log(a) ===========3
// a() ==========报错
console.log(a)
console.log(b)
fn1()
fn2()
var a=1
b=2
function fn1(){
console.log(1)
}
var fn2=function(){
console.log(2)
}
// 预解析顺序
// var a = undefined
// var fn2 = undefined
// function fn1(){console.log(1)}
// 运行
// console.log(a) ====== undefined
// console.log(b) ====== 报错
function fn(a,b){
console.log(a)
console.log(b)
var b=10
function a(){}
}
fn(1,2)
// 查找函数参数
// a:undefined
// b:undefined
// 查找函数声明
// function a(){} => a:function a(){}
// 查找变量声明
// var b=10 => b:undefined
函数
函数作为返回值
// 函数作为返回值使用
function write(){
console.log('write')
return function song() {
/* body... */
console.log('丑八怪')
}
}
var returnSong = write(); //returnSong 是 function song(){...}
returnSong(); //调用song();
函数作为参数
// 函数作为参数使用
function say(gun) {
/* body... */
gun(); //---相当于hi(),调用了hi()这个方法
}
function hi() {
/* body... */
console.log('学的都忘记了，唉')
}
say(hi) //把hi传入say中
对象
向对象中添加数据
-obj.name = “张止水”;
向对象中修改数据
-obj[“name”] = “haha”
创建一个对象
var people = new Object();
//添加属性
people.name = "张止水";
people.age = 64;
//添加方法
people.eat = function () {
/* body... */
console.log('吃吃吃吃吃吃吃')
}
people.eat();
一次性创建多个对象
function createObject() {
/* body... */
var obj = new Object();
obj.name = "红红";
obj.age = 15;
obj.run = function(){
console.log('跑跑跑');
}
obj.sayHi = function(){
console.log('Hi Hi Hi Hi');
}
return obj;
}
var dog1 = createObject();
dog1.sayHi();
自定义构造函数
function People(){
this.name = "朋小泰";
this.age = 22;
this.sex = "男";
this.say = function (){
console.log('....................')
}
}
var people = new People()
console.log('名字'+people.name+', 年龄'+people.age+',我想说');
people.say();
字面量方式创建对象
var people = {
name: "朋小泰",
age: 22,
sex: "男",
sayhello: function () {
/* body... */
console.log('....................')
}
}
console.log('名字'+people.name+', 年龄'+people.age+',我想说');
people.sayhello();
people["name"] = "haha"
console.log('改动后的名字'+people.name);
数组
向数组中添加数据
count[0] = “哈哈”
count[1] = “huhu”
var perCount = parseInt(prompt("请输入班级人数"));
var perScores = [];
for(var i=0; i < perCount; i++){
perScores[perScores.length] = parseInt(prompt("请输入第"+(i+1)+"个人的成绩"))
}
console.log(perScores);
字符串
str.indexOf(searchvalue,fromindex)
searchvalue 必需。规定需检索的字符串值。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索
str.substr(start,length)
第二个参数可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。
截取字符串
// 截取字符串
var str = "name=haha";
var key = "="
var index = str.indexOf("=");
console.log(index); //====4
laststr = str.substr(index,key.length);
//方法可在字符串中抽取从 start 下标开始的指定数目的字符。stringObject.substr(start,length)
//第二个参数可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。
console.log(laststr)
查找字符串在哪个位置
var str="1231456178919871654";
var index = 0;
var key = "1";
while ((index = str.indexOf(key, index)) != -1 ) {
// statement
console.log(index)
index += key.length
}
-----------输出
06-字符串.html:27 0
06-字符串.html:27 3
06-字符串.html:27 7
06-字符串.html:27 11
06-字符串.html:27 15
每个字符出现的次数
var str="XiangzheniyouduokunnanDUOXIAOHAI";
//转换大小写
str = str.toLocaleLowerCase();
var obj = {};
for(var i = 0; i < str.length; i++){
key = str[i];
if(obj[key]){
//判断对象中有没有这个字母，如果有，值加1
obj[key]++;
}else{
obj[key] = 1;
}
}
// 遍历对象输出
for(var key in obj){
console.log(key + ":" + obj[key])
}
-----------输出
06-字符串.html:52 x:2
06-字符串.html:52 i:4
06-字符串.html:52 a:4
06-字符串.html:52 n:5
06-字符串.html:52 g:1
06-字符串.html:52 z:1
06-字符串.html:52 h:2
06-字符串.html:52 e:1
06-字符串.html:52 y:1
06-字符串.html:52 o:4
06-字符串.html:52 u:4
06-字符串.html:52 d:2
06-字符串.html:52 k:1
json
遍历json格式
文档对象模型 DOM
DOM的全称是Document Object Model文档对象模型
获取对象
根据ID获取
语法： documen.getElementById(‘id名’)
根据标签名获取
语法：document.getElementsByTagName(‘标签名’)
例子：
var objinput = document.getElementsByTagName('input');
for(var i = 0; i < objinput.length; i++){
objinput[i].onclick = function () {
alert("第"+ i + "个input");
}
}
根据类名获取
语法：document.getElementsByClassName(“类名”)
返回文档中所有指定类名的元素集合
摩天大楼 太稀有 人人高贵富有
表情温柔 怕献丑 没人吐出骨头
你们谁位居榜首
摩天大楼 云里走 谢绝衣衫简陋
粉饰骷髅 气质有 人们争先恐后
她离开你心爱的蚁楼
document.getElementById('btn1').onclick = function () {
var styles = document.getElementsByClassName("green");
console.log(styles)
// 遍历每一个styles
for(var i = 0; i < styles.length; i++){
styles[i].style.color = "#009688";
styles[i].style.backgroundColor = "#fff";
}
}
绑定事件和解绑事件
-
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8
3.attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
4.兼容代码
事件方法
点击事件
语法：对象.onclick = function(){}
例子：
![]()
document.getElementById('btn2').onclick = function () {
var obj = document.getElementById('img1');
obj.src = "../../static/img/14zhong.png";
obj.width = "300";
obj.height = "300"
obj.style.display = "block";
}
document.getElementById('btn3').onclick = function () {
var obj = document.getElementById('img1');
obj.style.display = "none";
}
鼠标进入进出，移动事件
语法：对象.onmouseover (进入) 对象.onmouseout(移出) 对象.onmousemove(移动)
例子：(案例----淘宝图片放大镜)
- 苏苏
- 哈哈哈
- 黑恶虎
- 阿西吧
- 不是的
获取焦点失去焦点事件
语法：对象.onblur(失去焦点) 对象.onfocus(获取焦点)
例子：
Title
方法
innerText，textContent和innerHTML
用法：获取文本，设置文本
1.innerText 谷歌,火狐,IE8都支持。textContent 谷歌,火狐支持,IE8不支持
2.innerText，textContent 获取文本，设置文本，不解析html。innerHtml 可以解析html标签
element.innerText = text;
element.textContent = text;
element.innerHTML = text;
var text = element.innerText;
var text = element.textContent;
var text = element.innerHTML;
元素和节点
基础
node : 页面中所有的内容，包括标签，属性，文本（文字，换行，空格，文本）
element：页面中的所有标签
元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点
节点的相关属性：
1.nodeType：节点类型 1——标签 2——属性 3——文本
2.nodeName：节点的名字 标签节点——大写的标签名字 属性节点——小写的属性名字 文本节点——#text
3.nodeValue：节点的值 标签节点——null 属性节点——属性值 文本节点——文本内容
获取相应的节点
var uuobjs = document.getElementById('uu');
常用方法
1.父级节点——对象.parentNode
2.父级元素——对象.parentElement
3.子级节点——对象.childNodes
4.子级元素——对象.children
///下面的 IE8 子节点输出的是子元素 ，子节点不支持--------------------------
5.第一个子节点——对象.firstChild
6.第一个子元素——对象.firstElementChild
7.最后一个子节点——对象.lastChild
8.最后一个子元素——对象.lastElementChild
9.某个元素前一个兄弟节点——对象.previousSibling
10.某个元素前一个兄弟元素——对象.previousElementSibling
11.某个元素最后一个兄弟节点——对象.nextSibling
12.某个元素最后一个兄弟元素——对象.nextElementSibling
span标签
- 美术
- 数学
- 语文
- 英语
- 化学
- 物理
- 生物
这是一个单纯的p标签
我是span 标签
- 理理理理理理
创建元素
1.document.write
2.对象.innerHTML = “”
3.document.createElement
例一
例二
案例
tab选项卡
总结：
1.css中 .head span.show
2.js在点击选项卡头部的时候需要添加一个index,用于判断内容的显隐
- js 的 setAttribute 方法添加指定的属性，并为其赋指定的值.如果这个指定的属性已存在，则仅设置/更改值。 getAttribute返回指定属性名的属性值。 removeAttribute法删除指定的属性。
jquery的删除属性 removeAttr 。 attr()方法也用于设置/改变属性值 - js 的设置类名
添加：document.getElementById(“id”).classList.add(“类名”)；
删除：document.getElementById(“id”).classList.remove(“类名”)；
var classVal=document.getElementById(“id”).getAttribute(“class”);
添加：document.getElementById(“id”).setAttribute(“class”,classVal.concat(" 类名"));
删除：document.getElementById(“id”).getAttribute(“class”).replace(“类名”," “);
document.getElementById(“id”).className+=” 类名"; - jquery 设置类名 addClass()方法向被选元素添加一个或多个类。 removeClass()方法从被选元素移除一个或多个类。
css:
.box {
width: 50%;
margin: 0 auto;
}
.head {
width: 100%;
height: 50px;
}
.head span {
display: block;
float: left;
width: 24%;
margin-left: 1%;
line-height: 50px;
text-align: center;
background-color: pink;
color: #fff;
cursor: pointer;
}
.head span.show {
background-color: #009688;
}
.body {
}
.ull {
list-style: none;
margin: 0px;
padding-left: 1%;
width: 99%;
}
.ull li {
display: none;
width: 100%;
height: 200px;
background-color: #009688;
text-indent: 20px; /** 设置字体开头缩进距离**/
letter-spacing: 2px; /**字符间距*/
}
.ull li.show {
display: block;
}
html:
体育
娱乐
新闻
综合
- 我是体育
- 我是娱乐
- 我是新闻
- 我是综合
js:
var box = document.getElementById('box');
var head = box.getElementsByTagName('div')[0];
var body = box.getElementsByTagName('div')[1];
var spans = head.getElementsByTagName('span');
var lii = body.getElementsByTagName('li');
for(var i = 0; i < spans.length; i++){
// 为每个span注册点击事件 ---点击时加 show 不点击时其他的都没有 show这个class
// 需要添加一个index
spans[i].setAttribute("index",i);
spans[i].onclick = function () {
for(var j = 0; j < spans.length; j++){
spans[j].removeAttribute("class")
}
this.className = "show";
// 获取index
var index = this.getAttribute("index");
// 遍历li标签,去除所有样式
for(var k = 0; k < lii.length; k++){
lii[k].removeAttribute("class")
}
lii[index].className = "show";
}
// 为对应的li添加 show ，其他的没有
}
定时器随机抽中
总结：
css:
body {
height: 800px;
/*width: 800px;*/
}
ul {
width: 80%;
margin: 0 auto;
height: 80%;
}
div {
background-color: #009688;
width: 33%;
margin-left: 0.3%;
margin-top: 0.3%;
height: 33%;
float: left;
text-align: center;
line-height: 220px;
}
html:
李白
孙尚香
程咬金
兰陵王
妲己
上官婉儿
铠
露娜
大鱼
js:
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
var dv = document.getElementsByTagName('div');
var timer;
document.getElementById('start').onclick = function () {
timer = setInterval(function () {
var max = dv.length-1;
var index = parseInt(randomNum(0,max));
for (var k = 0; k < dv.length; k++) {
dv[k].style.backgroundColor = "#009688"
}
dv[index].style.backgroundColor = "pink"
}, 50);
}
document.getElementById('stop').onclick = function () {
clearInterval(timer);
}
innerText和textContent兼容代码
html
这是一个神奇的网站
js
//设置文本
function setText(element,text) {
if(typeof element.textContent === "undefined"){
element.innerText = text;
}else {
element.textContent = text;
}
}
// 获取文本
function getText(element) {
if(typeof element.textContent == "undefined"){
return element.innerText;
}else {
return element.textContent;
}
}
document.getElementById('btn1').onclick = function () {
var element = document.getElementById('dv');
var text = "改变了哈"
setText(element,text);
alert(getText(element))
}
淘宝图片放大镜
css:
img {
width: 250px;
height: 250px;
}
.imgbag {
position: relative;
width: 250px;
height: 250px;
float: left;
}
/*遮罩层*/
.shadow {
width: 75px;
height: 75px;
background-color: darkred;
opacity: 0.3;
position: absolute;
display: none;
}
.big {
width: 250px;
height: 250px;
float: left;
background-color: #ffffff;
opacity: 1;
/*filter: opacity(1);*/
overflow: hidden; /*溢出隐藏、清除浮动、解决外边距塌陷*/
display: none;
}
.bigimg {
height: 400px;
width: 400px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
html:
js:
var imgbox = document.getElementById('imgbox');
var shadow = document.getElementById('shadow');
var big = document.getElementById('big');
var bigimg = document.getElementById('bigimg');
//鼠标移入事件，让放大镜和放大区显示！
imgbox.onmouseover = function () {
shadow.style.display = "block";
big.style.display = "block";
}
// //鼠标不断移动时触发，实时更新放大镜得到的图片
imgbox.onmousemove = function(){
//1 shadow 2,imgbox 3 imgbig 4 big
floatMove(shadow, imgbox, event);
showPic(shadow,imgbox,bigimg,big);
}
//鼠标移出后，放大镜和放大区隐藏
imgbox.onmouseout = function () {
shadow.style.display = "none";
big.style.display = "none";
}
//由于offset方法包括边框，在使用的时候很容易出现问题，所以用style来实时获取attr！
function getStyle(obj, attr) {
if (window.currentStyle) {
return parseInt(obj.currentStyle[attr]);
}
else {
return parseInt(getComputedStyle(obj,null)[attr]);
}
}
//运动框架，控制放大镜在原图中的位置！
function floatMove(element1,element2,event) {
var e = event || window.event;
var minleft = getStyle(element1,"width"); //得到原始图片的宽，高
var minHeight = getStyle(element1, "height")- minleft/2;;
var maxleft = getStyle(element2,"width"); //得到放大图片的宽，高
var maxHeight = getStyle(element2, "height") - minHeight/2;
if (e.clientX < minleft/2) {
element1.style.left = "0px";//防止放大镜超出左边框
}
else if (e.clientX > maxleft) {
element1.style.left = getStyle(element2, "width") - getStyle(element1, "width") + "px";//防止放大镜超出右边框
}
else {
element1.style.left = event.clientX - minleft/2 + "px"; //放大镜完全在图片内时正常移动
}
if (e.clientY < minHeight/2) {
element1.style.top = "0px"; //防止放大镜超出上边框
}
else if (e.clientY > maxHeight) {
element1.style.top = getStyle(element2, "height") - getStyle(element1, "height") + "px"; //防止放大镜超出下边框
}
else {
element1.style.top = event.clientY - minleft/2 + "px";
}
}
//用来显示放大镜得到的图片，利用坐标计算！实时更新可视区域
function showPic(element1,element2,element3,element4) {
//element1 遮罩层对象 element2 原始图片区域
//element3 放大图片 element4 放大图片区域
var iCurLeft = getStyle(element1,"left");
var iCurTop = getStyle(element1,"top");
var a = getStyle(element2,"width") - getStyle(element1,"width");
var b = getStyle(element3,"width") - getStyle(element4,"width");
var moveWidth = -(iCurLeft/a)*b;
element3.style.left = moveWidth + "px";
var c = getStyle(element2,"height") - getStyle(element1,"height");
var d = getStyle(element3,"height") - getStyle(element4,"height");
var moveHigth = -(iCurTop/c)*d;
element3.style.top = moveHigth + "px";
}
搜索框下的提示
分割
浏览器对象模型 BOM
BOM的全称是Browser object modelBOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
顶层对象：window
子对象：location、history、screen、navigator、document、event
window对象
alert 弹出框
用法：window.alert() 或者 alert()
confirm 对话框
用法：window.confirm()；或 confirm()；
功能：显示一个带有指定消息的和 确定及取消按钮的对话框
返回值：用户点击确定，confirm() 返回true
用户点击取消，confirm() 返回false
prompt 对话框
语法：window.prompt( text[,defaultText] )；或者 prompt( text[,defaultText] )；
参数： text：要在对话框中显示的纯文本（不是HTML格式文本）
defaultText：默认的输入文本
返回值：如果用户点击提示框的取消按钮，则返回null
如果用户点击确定按钮，则返回输入的内容
open打开浏览器窗口
语法：window.open(pageURL，name，parameters)
功能：打开一个新的浏览器窗口或查找一个已名称的窗口
参数：pageURL：路径
name：窗口名字
parameters：窗口参数（逗号分隔）
-
width 窗口宽度、
-
height 窗口高度、
-
left 窗口X轴坐标、top 窗口Y轴坐标
-
toolbar 是否显示浏览器工具栏（yes/no）、
-
menubar 是否显示菜单栏（yes/no）、
-
scrollbars 是否显示滚动条（yes/no）、
-
location 是否显示地址字段
-
status 是否添加状态栏
function openMailBox(){
window.open(‘new.html’,‘消息通知’,‘width=800,height=600,left=30%,top=30%,toolbar=no,menubar=no,location=no,status=no’);
}
close 关闭浏览器窗口
语法：window.close()
功能：关闭浏览器窗口
setTimeout 计时器
语法：setTimeout(code,millisec)
功能：在指定的毫秒数后调用函数或计算表达式
参数：code：要调用的函数名或者要执行的js代码
millisec：在执行代码前等待的毫秒数
备注：setTimeout只执行一次code, 多次调用需使用setInterval, 也可以让code自己调用自己
clearTimeout 消除计时器
语法：clearTimeout(id_of_settimeout)；
功能：取消由setTimeout()方法设置的超时调用
参数：setTimeout 返回的id值
setInterval 计时器
语法：setInterval（code，millisec）
功能：每隔指定的时间执行一次代码
参数：code：要调用的函数名或者要执行的js代码
millisec：在执行代码前等待的毫秒数
clearInterval 清楚计时器
语法：clearInterval（id_of_setinterval）
location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了功能，它既是window对象的属性，也是document对象的属性
location.href
获取url
语法：location.href
功能：返回当前页面完整的url
备注：location.href 和 window.location.href 等价（window可以省略）
设置url
语法：location.href = url ;
功能：跳转到 指定的url中
location.hash 锚点链接
获取锚点
语法：location.hash
功能：返回url中hash（#以及后面的字符），如果不含，返回空字符串
设置锚点
语法：location.hash = “#aaa”
功能：为url添加指定的锚点，实现页面的锚点位置跳转
到底部
测试1
测试2
这是底部
location对象
location.replace 重新定向url
语法：location.replace(url)
功能：重新定向url
备注：使用location.replace不会在历史纪录中生成新纪录（没有后退按钮）
location.reload重新加载
语法：location.reload()
功能：重新加载当前界面
备注：location.reload()有可能从浏览器缓存中加载
location.reload(true) 强制从服务器中重新加载
histroy对象
histroy对象保存了用户在浏览器中访问页面的历史纪录
histroy.back()
语法：histroy.back()
功能：回到历史纪录的上一步
备注：相当于使用 histroy.go(-1)
histroy.forward()
语法：histroy.forward()
功能：回到历史记录的下一步
备注：相当于使用histroy.go(1)
histroy.go(-n)
语法：histroy.go(-n)
功能：回到历史记录的上n步
histroy.go(n)
语法：histroy.go(n)
功能：回到历史记录的下n步
screen对象
screen对象包含有关客户端显示屏幕的信息
可用屏幕宽/高度
窗口文档显示宽/高度
console.log("pageWidth："+window.innerWidth); //就是浏览器显示页面的窗口宽度
console.log("pageHeight："+window.innerHeight); //就是浏览器显示页面的窗口高度
navigator
提供了用户的浏览器、操作系统等信息，可通过当前对象得知用户所用浏览器类型、版本等
navigator.userAgent 浏览器类型
语法：用来识别浏览器名称、版本、引擎、以及操作系统等信息
userAgent