Javascript 学习笔记

JavaScript基础

参考链接

1.菜鸟教程

HTML DOM（(Document Object Model)）

文档对象模型，是用于访问HTML元素的正式W3C标准

意思就是，JS从HTML访问元素，并进行编程修改

DOM加载过程：

网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤：

1.解析HTML结构

2.加载外部脚本和样式表文件

3.解析并执行脚本代码

4.构造HTML DOM模型

5.加载图片等外部文件

6.页面加载完毕

HTML脚本位置

  • HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

  • 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

  • 用户可以在 HTML 文档中放入不限数量的脚本。

  • 脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。

  • 通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

？问：什么也不加的话，HTML在载入的时候会自动运行脚本吗？

会，但不会自动执行用户定义的函数。如需页面完全加载完再运行脚本，使用window.onload

脚本可以外部应用，方法是：

脚本语言！

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言，所以在HTML里面写script的时候，不加任何别的说明，默认就是Javascript

知识点：JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

Javascript的输出

JavaScript 可以通过不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。（会重写界面）
  • 使用 innerHTML 写入到 HTML 元素。（意思就是只针对一个id进行修改）
  • 使用 console.log() 写入到浏览器的控制台。

Javascript关键语句：

语句 描述
break 用于跳出循环。
catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do ... while 执行一个语句块，在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出（生成）错误 。
try 实现错误处理，与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时，执行语句块。

JS变量

全局变量：函数外声明，作用域为整个脚本

局部变量：函数内声明，作用域为函数内

块级作用域：用let声明，作用域为{}之间，多用于循环

const:块级作用域，类似于let，但声明后不能再修改

比如：

<script>
var i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
document.getElementById("demo").innerHTML = i;
</script>

循环执行过程中，i为块变量，运行结束后，i=；

HTML 代码中使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。

在 HTML 中, 全局作用域是针对 window 对象。

使用 var 关键字声明的全局作用域变量属于 window 对象:

比如：

var carName = "Volvo"; // 可以使用 window.carName 访问变量

变量提升

JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明

// 在这里可以使用 carName 变量 
 
 var carName;

变量类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

举个例子：

var x;        // x 为 undefined
var x = 5;      // 现在 x 为数字
var x = "John";   // 现在 x 为字符串

Javascript对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

可以将变量的值设置为null来清空变量

JavaScript 对象是键值对的容器

JavaScript事件

事件触发时，可以执行一些代码，语法为：

<some-HTML-element some-event="JavaScript 代码">

举个例子：

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

JavaScript 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

posted @   逍遥一叹s  阅读(22)  评论(0)  编辑  收藏  举报
相关博文：
· HTML学习笔记
· 用百度地图java script API创建一张地图
· 【JavaScript】基础
· JavaScript 学习笔记
· 前端基础学习2 | JavaScript
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示