【JavaScript学习笔记】

最新推荐文章于 2024-03-28 16:35:24 发布
最新推荐文章于 2024-03-28 16:35:24 发布
阅读量313 收藏 2
点赞数
文章标签： javascript 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bangly01/article/details/131314771
版权

JavaScript 用法

HTML 中的 Javascript 代码必须位于 <script> 与 </script> 标签之间。
Javascript 代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 标签
如需在 HTML 页面中插入 JavaScript，使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:

<script>
alert("我的第一个 JavaScript");
</script>

<body> 中的 JavaScript
JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
实例

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

外部的 JavaScript
也可以把代码保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在

实例

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

你可以将代码放于 <head> 或者 <body>中，放在 <script> 标签中的代码与外部引用的代码运行效果完全一致。
myScript.js 文件代码如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
1.使用 window.alert() 弹出警告框。
2.使用 document.write() 方法将内容写到 HTML 文档中。
3.使用 innerHTML 写入到 HTML 元素。
4.使用 console.log() 写入到浏览器的控制台。
使用 window.alert()
你可以弹出警告框来显示数据：
实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>
</body>
</html>

操作 HTML 元素
从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。
使用 id 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

JavaScript 语句在 <script> 标签中可以在 web 浏览器中执行：
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = “段落已修改” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到 HTML 文档
出于测试目的，您可以将JavaScript直接写在HTML 文档中：
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>

JavaScript 语句
JavaScript 语句是发给浏览器的命令。
下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：
实例

document.getElementById("demo").innerHTML = "你好 Dolly";

分号 ;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
实例:

a = 5;
b = 6;
c = a + b;
也可以这么写:

a = 5; b = 6; c = a + b;
JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。按照编写顺序依次执行每条语句。
实例

document.getElementById("demo").innerHTML="你好 Dolly";

document.getElementById("myDIV").innerHTML="你最近怎么样?";

JavaScript 代码块
JavaScript 可以分批地组合起来。
代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。
实例

function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。

JavaScript 语句标识符有 ：
1、break 用于跳出循环。
2、catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
3、continue 跳过循环中的一个迭代。
4、do … while 执行一个语句块，在条件语句为 true 时继续执行该语句块。
5、for 在条件语句为 true 时，可以将代码块执行指定的次数。
6、for … in 用于遍历数组或者对象的属性。
7、function 定义一个函数
8、if … else 用于基于不同的条件来执行不同的动作。
9、return 退出函数
10、switch 用于基于不同的条件来执行不同的动作。
11、throw 生成错误 。
12、try 实现错误处理，与 catch 一同使用。
13、var 声明一个变量。
14、while 当条件语句为 true 时，执行语句块。

15、空格 JavaScript 会忽略多余的空格。

var person="runoob";
var person = "runoob";

对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。会正确地显示：
实例

document.write("你好 \
世界!");

JavaScript 注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
单行注释以 // 开头。
实例
// 输出标题：

document.getElementById("myH1").innerHTML="欢迎来到我的主页";

// 输出段落：

document.getElementById("myP").innerHTML="这是我的第一个段落。";

JavaScript 多行注释
多行注释以 /* 开始，以 */ 结尾。
实例

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/

document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

使用注释来阻止执行
注释用于阻止其中一条代码行的执行：
实例

// document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

在行末使用注释，把注释放到代码行的结尾处：
实例

var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它
JavaScript 数据类型

值类型：字符串、数字、布尔。
引用数据类型：对象、数组、函数，还有两个特殊的对象：正则和日期。

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

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

变量的数据类型可以使用 typeof 操作符来查看：
实例

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

JavaScript 字符串
字符串是存储字符的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例

var carname="Volvo XC60";
var carname='Volvo XC60';

可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
实例

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
实例

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学计数法来书写：
实例

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 布尔
布尔只能有两个值：true 或 false。

var x=true;
var y=false;

JavaScript 数组
下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):

实例

var cars=["Saab","Volvo","BMW"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

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

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

上例中的对象有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：

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

JavaScript 循环
如果一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环。
不同类型的循环
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环
下面是 for 循环的语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行
实例

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

For/In 循环
for/in 语句循环遍历对象的属性：
实例

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

JavaScript while 循环
只要指定条件为 true，循环就可以一直执行代码块。
while 循环
while 循环会在指定条件为真时循环执行代码块。
语法

while (条件)
{
需要执行的代码
}
本例中的循环将继续运行，只要变量 i 小于 5：
实例

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
语法

do
{
需要执行的代码
}
while (条件);
实例
下例使用 do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：
实例

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

JavaScript break 和 continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

break 语句
break 语句。它用于跳出 switch() 语句。
break 语句可用于跳出循环。
break 语句跳出循环后，会继续执行该循环之后的代码：
实例

for (i=0;i<10;i++)
{
    if (i==3)
    {
        break;
    }
    x=x + "The number is " + i + "<br>";
}

continue 语句
continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代。 以下例子在值为 3 时，直接跳过：
for 实例

for (i=0;i<=10;i++)
{
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
}

while 实例

while (i < 10){
  if (i == 3){
    i++;    //加入i++不会进入死循环
    continue;
  }
  x= x + "该数字为 " + i + "<br>";
  i++;
}
Bangly01
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
JavaScript学习笔记
08-16
### JavaScript学习笔记精要 #### 一、JavaScript概述 JavaScript是一种重要的编程语言，在现代Web开发中扮演着不可或缺的角色。它最初由Netscape公司的Brendan Eich在1995年开发完成，并且最初的名字叫做...
JavaScript语句一帮放在HTML文件什么地方？
weixin_35756637的博客
01-04 521
JavaScript 语句通常放在 HTML 文件的 <script> 标签内。 <script> 标签可以放在 HTML 文件的 <head> 标签内或 <body> 标签内。 例如： <!DOCTYPE html> <html> <head> <script> console.log('...
javascript代码放在html中不同位置的区别
树上骑个猴的博客
04-06 3479
浏览器解析html是从上到下的 js代码可以出现在 HTML 的任意地方 使用window.onload函数，可以减少错误发生（这个函数就是在文档加载完成之后立即加载js代码） window.onload = function(){/*要执行的js代码*/} 1.放置在head标签中 在HTML head部分中的js代码会在被调用的时候才执行（页面加载完成之前读取）。 当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执
JavaScript基础
qq_53841687的博客
06-22 429
在 HTML 中，JavaScript 代码必须位于 与 标签之间。标签可以置于标签或标签中。JavaScript 能够以不同方式“显示”数据：js语句构成：值、运算符、表达式、关键词和注释。每一条可执行语句以分号分隔。JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。在运算符旁边（ = + - * / ）添加空格是个好习惯JavaScript 语句可以用花括号（...）组合在代码块中。代码块的作用是定义一同执行的语句。JavaScript...
Javascript写在哪里
builderwfy的专栏
01-06 4295
<br />Javascript程序可以放在：HTML网页的<body></body>里 HTML网页的<head></head>里 外部.js文件里 Javascript在<body></body>之间<br />当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行之后输出的内容就显示在网页中。<br /><html><br /><head></head><br /><body><br /><script type="text/javascript"><br />....<br
JavaScript(一)基础——简介，使用，输出，语句，关键词，运算符
m0_61016904的博客
01-12 375
JavaScript基础一、简介二、使用三、输出四、JS语句四、关键词五、运算符（2）JavaScript 赋值运算符（3）JavaScript 字符串运算符 一、简介 JavaScript对网页行为进行编程 JavaScript 能够改变 HTML 内容 getElementById() 是多个 JavaScript HTML 方法之一 JavaScript 同时接受双引号单引号- JS能改变HTML 属性 二、使用 JavaScript代码必须位于<script&gt
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
JavaScript 用法
guoruibin123的博客
11-14 36
与
js代码放在html文件
最新发布
m0_73632606的博客
03-28 385
将JavaScript代码保存为独立的.js文件，然后使用<script>标签的src属性将其导入到HTML中是一种常见的做法，可以提高代码的可维护性和重用性。在这种情况下，<script>标签可以放在HTML文档的<head>标签中，也可以放在<body>标签中。但是，如果你的JavaScript代码不需要在页面加载之前执行，或者你希望在页面底部执行JavaScript代码以提高性能，你也可以将<script>标签放在<body>标签中。
Js放到HTML文件中的哪个位置有什么区别
01-19
这个问题一直是初学者的困惑。先明白js能放在HTML的那个位置，分别是head和body中。大部分人都是放到head里面的。我学的时候也是稀里糊涂的跟着放到head的里面，也不知道为什么？今天看说说，放到这两个地方的区别: 先看一段html代码: 代码如下: <html> <head> <title> New Document </title> <meta http-equiv=”content-type” content=”text/html;charset=utf-8″> [removed][removed] </h
JavaScript学习笔记之JavaScript代码在HTML页面中的位置
Code_Thinking的专栏
10-12 839
javascript代码(当然是在)可以放在html文件的
js 放置位置
Peak Xin's Blog
06-15 580
我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。 放在部分 最常用的方式是在页面中head部分放置元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。 放在部分 JavaScript代码在网页读取到该语句的时候就会执行。 注意: javascript作为一种脚本语言可以放在html页面中任何位置
Web学习之JavaScript
weixin_48268385的博客
06-17 596
本文是对JavaScript基础内容的学习
JavaScript ＜script＞标签
ling_kedu的博客
03-14 526
JavaScript 是通过 元素插入到HTML页面中的
HTML中javascript的＜script＞标签使用方法详解
热门推荐
从零开始
12-04 2万+
只要一提到把JavaScript放到网页中，就不得不涉及Web的核心语言——HTML。在当初开发JavaScript的时候，Netscape要解决的一个重要问题就是如何做到让JavaScript既能与HTML页面共存，又不影响那些页面在其他浏览器中的呈现效果。经过尝试、纠错和争论，最终的决定就是为Web增加统一的脚本支持。而Web诞生早期的很多做法也都保留了下来，并被正式纳入HTML规范当中。
关于<script>元素（js两种引用方法：内部嵌入，外部引入）
iuukai
07-12 5831
文章目录一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。二、在同一个HTML文档中，调用多个JavaScript脚本。三、<script>元素定义的6个属性。 一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。 关于<script>标签的位置问题，虽然<script></script>可以放在...
javascript标签放置位置
weixin_30251829的博客
08-09 189
首先:放置位置哪里都能放 但是js代码很有可能不起作用：例如:往id为span的标签中定时插入数字 var time=document.getElementById("span"); function counttime() { time.innerHTML=count; count=count-1; ...
html文件中script标签放在哪里?
renaway的博客
02-15 2万+
首先说选择，常见的位置有两个，一个位置是&lt;head&gt;标签里面，另一个是body标签快结束的地方，也就是&lt;/body&gt;上面。 然后说结论，一般情况下都可以放。区别嘛可以看个例子(scriptlocation.html): &lt;!DOCTYPE html&gt; &lt;html lang="cn"&gt; &lt;head&gt; &lt;meta charset..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值