javascript

一、Javascript简介

javascript互联网是最流行的脚本语言,可用于HTML和web,也可用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

Javascript是脚本语言

  • 一种轻量级的编程语言
  • 可插入HTML页面的编程代码
  • 插入HTML页面后,可有所有的现代浏览器执行

Javascript:直接写入HTML输出流

image-20220623134446153

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

javascript:对事件的反应

image-20220623134959538

image-20220623135024993

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

JAVAscript:改变HTML内容

使用Javascript来处理HTML内容的强大功能

image-20220623135334698

image-20220623135315832

javascript:改变HTML图像

image-20220623135852364

image-20220623135937719

JavaScript:改变HTML样式

image-20220623140106819

javascript:验证输入

常用于验证用户的输入

image-20220623140533826

image-20220623141013125

二、javascript用法

HTML中的javascript脚本代码位于<script></script>标签之间

JavaScript脚本代码可被放置在HTML页面<body><head>

<script> 标签

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

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

image-20220625145939477

<body> 中的 JavaScript

image-20220625150214907

在 <head> 或者 <body> 的JavaScript

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

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

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

<head> 中的 JavaScript 函数

image-20220625150450920

<body> 中的 JavaScript 函数

image-20220625150556678

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 “src” 属性中设置该 .js 文件:

image-20220625150802151

你可以将脚本放置于 <head> 或者 <body>中,放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。

image-20220625150932672

三 . Chrome 浏览器中执行 JavaScript

Chrome 浏览器中执行 JavaScript | 菜鸟教程 (runoob.com)

四. javaScript 输出

JavaScript 显示数据

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

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

image-20220625152140121

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法

请使用 “id” 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容

image-20220625152418244

image-20220625152436763

以上 JavaScript 语句(在

document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到 HTML 文档

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

image-20220625152547910

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

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

image-20220625152824093

image-20220625152839747

写到控制台

如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 “Console” 菜单。

image-20220625152950005

image-20220625153040997

五. JavaScript 语法

JavaScript 语法

JavaScript 是一个脚本语言。

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

JavaScript 字面量

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

image-20220625153504032

字符串(String)字面量 可以使用单引号或双引号:

image-20220625153549628

表达式字面量 用于计算:

image-20220625153614876

数组(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 来定义变量, 使用等号来为变量赋值:

image-20220625153831795

变量是一个名称。字面量是一个

JavaScript 操作符

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

image-20220625154023415

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

image-20220625154052433

JavaScript语言有多种类型的运算符:

image-20220625154135819

JavaScript 语句

在 HTML 中,JavaScript 语句向浏览器发出的命令。

语句是用分号(;)分隔:

image-20220625154305532

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。

var 关键字告诉浏览器创建一个新的变量:

image-20220625154647984

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q2dLyxhO-1656168868574)(C:\Users\godfather\AppData\Roaming\Typora\typora-user-images\image-20220625155138665.png)]

JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

image-20220625155432005

编程语言中,数据类型是一个非常重要的内容。

为了可以操作变量,了解数据类型的概念非常重要。

如果没有使用数据类型,以下实例将无法执行:

image-20220625160322372

JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用:

引用一个函数 = 调用函数(执行函数内的语句)。

image-20220625160731889

JavaScript 字母大小写

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementByIdgetElementbyID 是不同的。

同样,变量 myVariableMyVariable 也是不同的。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符,包含标点等字符。

HTML UTF-8 参考手册 | 菜鸟教程 (runoob.com)

六、JavaScript 比较和逻辑运算符 | 菜鸟教程 (runoob.com)

七、JavaScript 比较和逻辑运算符 | 菜鸟教程 (runoob.com)

八、JavaScript switch 语句 | 菜鸟教程 (runoob.com)

九、JavaScript for 循环 | 菜鸟教程 (runoob.com)

十、JavaScript while 循环 | 菜鸟教程 (runoob.com)

十一、JavaScript break 和 continue 语句 | 菜鸟教程 (runoob.com)

十二、JavaScript typeof, null, 和 undefined | 菜鸟教程 (runoob.com)

十三、JavaScript 类型转换 | 菜鸟教程 (runoob.com)

十四、JavaScript 正则表达式 | 菜鸟教程 (runoob.com)

十五、JavaScript 错误 – Throw、Try 和 Catch | 菜鸟教程 (runoob.com)

十六、JavaScript 调试 | 菜鸟教程 (runoob.com)

十七、JavaScript 声明提升 | 菜鸟教程 (runoob.com)

十八、JavaScript 严格模式(use strict) | 菜鸟教程 (runoob.com)

com/js/js-errors.html)

十六、JavaScript 调试 | 菜鸟教程 (runoob.com)

十七、JavaScript 声明提升 | 菜鸟教程 (runoob.com)

十八、JavaScript 严格模式(use strict) | 菜鸟教程 (runoob.com)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值