首页 > 编程语言 >JavaScript 和浏览器

JavaScript 和浏览器

时间:2023-05-10 09:03:39浏览次数:34  
标签:body JavaScript 浏览器 h1 JS JSON input document

模块

参见 ES6 部分

DOM

参见 Web 相关部分

选择器

  • document.querySelector() 来获取网页的对应 HTML 元素
  • document.querySelectorAll() 来获取网页的所有对应 HTML 元素
  • document.getElementById() 根据 ID 获取元素
  • document.getElementsByClassName() 根据类名获取元素
  • document.getElementsByTagName() 根据 HTML 元素名获取元素
document.querySelector('p');

事件处理

监听事件的函数叫“事件监听器(event listener)”;处理事件的函数叫“事件处理器(event handler)”。

常用的监听器:addEventListener(),第一个参数是事件的类型,第二个参数是事件处理器。

const target = document.querySelector('body');
function handleClick() {
  console.log('clicked the body');
}
target.addEventListener('click', handleClick);

也可以给 HTML 元素添加点击属性:

<h1 onClick='handleClick2()'></h1>
function handleClick2() {
  console.log('clicked the heading');
}

内容更新

可以使用 prompt() 内置方法获取用户输入。注:这不是最佳实践,应该使用表单。

let answer = prompt('What is your name?');
if (typeof(answer) === 'string') {
    var h1 = document.createElement('h1')
    h1.innerText = answer;
    document.body.innerText = '';
    document.body.appendChild(h1);
}
var h1 = document.createElement('h1')
h1.innerText = "Type into the input to make this text change"

var input = document.createElement('input')
input.setAttribute('type', 'text')

document.body.innerText = '';
document.body.appendChild(h1);
document.body.appendChild(input);

input.addEventListener('change', function() {
    h1.innerText = input.value
})

数据格式

XML

XML(Extensive Markup Language)扩展标记语言是早期常用的数据传输文件格式。

XML 需要很多字符来描述传输的数据,并且是一门独立语言,不容易和 JS 互操作。

JSON

2001 年,Douglas Crockford 发明了 JavaScript Object Notation / JSON。

JSON 的优势:

  1. 轻量级,语法类似 JS 的对象
  2. 容易用 JS 操作

除了作为数据传输格式外,JSON 还是一种文件格式,通常从第三方网站的 json 文件获取第三方数据。

规则

JSON 是一种格式化的字符串,以下规则是 JSON 数据或者从 JSON 中提取至 JS 对象中要遵守的:

  • 基本类型:字符串,数组,布尔,null
    • 字符串必须用双引号:"fruits"
    • 数字用常规 JS 语法表示:5,10,1.2
    • 布尔值用常规 JS 语法表示:true, false
    • null 必须是 null
  • 复杂类型:对象,数组(没有函数!)
  • 对象中所有键包含双引号
  • 在 JSON 对象中和 JSON 数组中,值是逗号分割的
  • 不能使用 JS 注释

如果尝试字符串化不受 JSON 支持的数据,例如函数,操作会“无声地”失败。

如果尝试字符串化其他数据类型,例如 BigInt:123n,会得到如下错误:Uncaught TypeError: Do not know how to serialize a BigInt.

一些合法的 JSON 实例:

'{  "color":"red", 	"nestedObject": { "color": "blue" } }' 

'["one", "two", "three"]'

'[{ "color": "blue" }, {"color: "red"}]'

JSON -> Object

使用 parse() 从 JSON 提取至 JS 对象:

const jsonStr = '{"greeting": "hello"}'
JSON.parse(jsonStr); // {greeting: "hello"}

使用 JSON.stringify() 把对象转化为 JSON:

const data = {
  firstName: "John",
  lastName: "Doe",
  greeting: "Hello"
}

JSON.stringify(data) // '{"firstName": "John", "lastName": "Doe", "greeting": "Hello"}'

标签:body,JavaScript,浏览器,h1,JS,JSON,input,document
From: https://www.cnblogs.com/risejl/p/17386911.html

相关文章

  • 学习JavaScript数据结构与算法 第八章
    八,字典和散列表8.3ES2015Map类ECMAScript2015新增了Map类。constmap=newMap();map.set('Gandalf','[email protected]');map.set('John','[email protected]');map.set('Tyrion','[email protected]');......
  • 学习JavaScript数据结构与算法 第七章
    7.集合7.4ESMAScript2015---Set类ECMAScript2015新增了Set类作为JavaScriptAPI的一部分。我们可以基于ES2015的Set开发我们的Set类。constset=newSet()set.add(1)console.log(set.values())//@iteratorconsole.log(set.has(1))console.log(set......
  • javascript函数声明和函数表达式
    JavaScript中定义函数最常用的方式是函数声明和函数表达式。这两种技术非常相似,有时甚至难以区分,但在后续章节中可以看到,它们之间还是存在着微妙的区别。JavaScript定义函数最基本方式是函数声明,如下图:正如你所见,每个函数声明以强制性的function开头,其后紧接着强制性的函数名,以及......
  • JavaScript 正则表达式
    正则表达式RegularExpression在编程语言中,正则表达式用于匹配指定的字符串。如果想要在字符串Thedogchasedthecat中匹配到the这个单词,可以使用如下正则表达式:/the/。注意,正则表达式中不需要引号。使用测试方法TestMethodJavaScript中有多种使用正则表达式的方法......
  • Windows系列---【浏览器突然连不上网,报"ERR_PROXY_CONNECTION_FAILED"的解决方案】
    浏览器突然连不上网,报"ERR_PROXY_CONNECTION_FAILED"的解决方案1.问题电脑的浏览器里装的有梯子,突然有一天浏览器访问不了外网了,打开哪个网站都报"ERR_PROXY_CONNECTION_FAILED",但是微信可以正常使用。2.分析微信可以使用,显然是浏览器的问题,再看错误,明显是代理有问题。3.解......
  • 学习JavaScript数据结构与算法 第五章
    五,队列和双端队列我们已经学习了栈。队列和栈非常类似,但是使用了与后进先出不同的原则。双端队列是一种将栈的原则和队列的原则混合在一起的数据结构。5.1队列数据结构队列是遵循先进先出(FIFO,也称为先来先服务)原则的一组有序的项。队列在尾部添加新元素,并从顶部移除元素。最......
  • JavaScript
    JavaScript概述ECMAScript和JavaScript的关系1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就......
  • Javascript异步编程的4种方法
    你可能知道,Javascript语言的执行环境是"单线程"(singlethread)。所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须......
  • python selenium 谷歌浏览器指定下载位置
    pythonselenium谷歌浏览器指定下载位置功能pythonselenium点击浏览器的下载按钮,然后下载到指定的目录,而非下载到默认位置代码importos.pathfromtimeimportsleepfromseleniumimportwebdriverfromselenium.webdriver.common.byimportBy"""指定默认下载路径,......
  • ubuntu 彻底卸载谷歌浏览器
    在终端中输入下面的命令:sudoaptpurgegoogle-chrome-stable输入你的用户账户密码,也就是你用来登录Ubuntu系统的密码。当你输入密码的时候,屏幕上什么也不会显示。这是Linux系统的正常行为。继续输入密码,完成后按下回车键。此时它会让你确认是否删除GoogleChrome,输入......