WebStudy-JavaScript1入门

最新推荐文章于 2023-08-22 16:25:40 发布

Floatwor青舟

最新推荐文章于 2023-08-22 16:25:40 发布

阅读量276

点赞数

分类专栏：前端学习文章标签： js

本文链接：https://blog.csdn.net/f944913628/article/details/107613889

版权

前端学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

JavaScript简介

JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。

为什么学习 JavaScript呢?
因为JavaScript web 开发人员必须学习的 3 门语言中的一门：
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

JavaScrip 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言（弱类型语言）。是一种轻量级的编程语言。是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。
语言的等级分类:
强类型: 语法规则了解即可语言特别严谨，该大写就要大写。
弱类型: 将同一类的变量关键字进行归类声明变量时只需要一个关键词即可，语法适当松缓。
无类型: 自定义命名内容但是需要遵守语法书写规则。

应用举例

JavaScript：直接写入 HTML 输出流
实例

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

tip：只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法，会覆盖整个文档。

JavaScript：对事件的反应
实例

<button type="button" onclick="alert('欢迎!')">点我!</button>

tip： alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

JavaScript：改变 HTML 内容。使用 JavaScript 来处理 HTML 内容是非常强大的功能。
实例

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

tip：经常看到 document.getElementById(“some id”)。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

JavaScript：改变 HTML 图像。本例会动态地改变 HTML 的来源（src）：
点亮灯泡

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

tip; 代码 element.src.match(“bulbon”) 的作用意思是：检索 img id=“myimage” οnclick=“changeImage()” src="/images/pic_bulboff.gif" width=“100” height=“180” 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif。

JavaScript：改变 HTML 样式。改变 HTML 元素的样式，属于改变 HTML 属性的变种。

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

JavaScript：验证输入。JavaScript 常用于验证用户的输入。

if isNaN(x) {
    alert("不是数字");
}

JavaScript的用法

HTML 中的脚本必须位于标签之间。

脚本可被放置在 HTML 页面的和部分中。

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

在 head或者 body中的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。

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

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件。

summary
1、在标签中填写 onclick 事件调用函数时，不是 οnclick=函数名，而是 οnclick=函数名+()。
2、外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码。
3、HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

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>

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

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。
实例

<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>

tip：程序中调试是测试，查找及减少bug(错误)的过程。

summary
1、console.log()的用处
主要是方便你调式javascript用的, 你可以看到你在页面中输出的内容。
相比alert他的优点是：
他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：

2、document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

3、输出数据

window.alert() 弹出警告框。

document.write() 方法将内容写到 HTML 文档中。

innerHTML 写入到 HTML 元素。

console.log() 写入到浏览器的控制台。

输出内容

使用 document.write() 向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

写到控制台(调试模式)

使用 console.log() 方法在浏览器中显示 JavaScript 值。

F12 启用调试模式，在调试窗口中点击 “Console” 菜单。

4、window.alert(5+6) 与 window.alert(“5+6”) 输出的值是不一样的。window.alert(5+6) 会输出 11，而window.alert(“5+6”) 会输出 5+6。这是因为当用引号时会认为引号中是字符串，从而直接将引号中的内容打印出来。

5、解决文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖的问题

<button onclick="winTest()">按钮</button>
function winTest()
{
    var txt1 = "This is a new window.";
    var txt2 = "This is a test.";
    document.open("text/html","replace");//加上
    document.writeln(txt1);
    document.write(txt2);
    document.close();//加上
}

点击 “按钮” 后页面显示结果：

This is a new window. This is a test.

注：该方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。如果您使用 write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保所有文档内容都能显示。document.write() 不会隐式调用 document.close() 方法的，否则例 2 中将不会有 This is a new window. 内容了

一旦调用了close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。

在载入页面后，浏览器输出流自动关闭。在此之后，比如延迟脚本 [setTimeout()] 或是 onload 执行的方法，任何一个对当前页面进行操作的 document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。

6、document.getElementByle() 和 document.write() 的区别
document.write() 方法可以用在两个方面：
1、页面载入过程中用实时脚本创建页面内容，用来追加一些标签。
2、清除当前页面内容(包括源文档的任何变量或值)。重新生成内容。
它的第 2 点和 document.getElementByle() 相区别。前者在清除全部页面内容，然后生成新的内容，即“覆盖文档"。

<script>
function myFunction()
{  
    document.write("糟糕，文档丢失了")
}
</script>
<button type="bulbon" onclick="myFunction()">覆盖文档</button>

点击按钮，括号里的内容则会全部覆盖文档。
后者：

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

这个仅仅只是替换了 id 为 three 里的内容，没有覆盖页面。

JavaScript语法

JavaScript 是一个脚本语言。

它是一个轻量级，但功能强大的编程语言。

JavaScript 字面量
在编程语言中，一般固定值称为字面量，如 3.14。
数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量可以使用单引号或双引号:

“John Doe”

‘John Doe’
表达式字面量用于计算：

5 + 6

5 * 10
数组（Array）字面量定义一个数组：

[40, 100, 1, 5, 25, 10]
对象（Object）字面量定义一个对象：

{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数（Function）字面量定义一个函数：

function myFunction(a, b) { return a * b;}

JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

var x, length
x = 5
length = 6

变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。
变量是一个名称。字面量是一个值。

JavaScript 操作符
JavaScript使用 算术运算符 来计算值:

(5 + 6) * 10

JavaScript使用赋值运算符给变量赋值：

x = 5
y = 6
z = (x + y) * 10

JavaScript语言有多种类型的运算符：
赋值，算术和位运算符 = + - * /
在 JS 运算符中描述。

条件，比较及逻辑运算符 == != < >
在 JS 比较运算符中描述

JavaScript 语句
在 HTML 中，JavaScript 语句向浏览器发出的命令。
语句是用分号分隔 ;

summary
三种变量命名规则：

var firstName=‘king’;//小驼峰
var FirstName=‘queen’;//大驼峰
当变量名或函式名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这样的变量名看上去就像骆驼峰一样此起彼伏，故得名。骆驼式命名法的命名规则可视为一种惯例，并无绝对与强制，为的是增加识别和可读性。

var first_name=‘maizi’;//下划线法

Floatwor青舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebStudy-JavaScript1入门

目录JavaScript简介应用举例JavaScript的用法JavaScript输出JavaScript简介JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。为什么学习 JavaScript呢?因为JavaScript web 开发人员必须学习的 3 门语言中的一门：HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 网页的行为JavaScrip 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可
复制链接

扫一扫

专栏目录