草庐IT

JavaScript快速入门

t遇见 2023-09-28 原文

一、基础语法
(1) 快速入门
创建第一个htm页面,开发第一个JavaScript交互应用

  • 获取用户点击行为,用户通过鼠标点击了按钮之后,发生了一些操作行为;使用HTML/css无法实现
  • 点击行为发生后,浏览器中弹出了一个窗口(浏览器软件内置),使用HTML/css无法实现
  • 总结:需要用户和网页进行交互时,使用JavaScript编程语言来实现需要的功能,单纯通过HTML/css无法实现
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 页面中添加一个按钮 -->
  <button id="btn" onclick="show()">点击我试试</button>

  <!-- 页面中添加一段脚本代码 -->
  <script>
    function show() {
      alert("讨厌,点我干吗...")
    }
  </script>
</body>
</html>

(2) 代码位置

  • 标签行内
  • 页面内嵌
  • 外部关联文件
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1、标签内嵌 -->
  <button onclick="alert('我是行内js代码')">点击我试试</button>

  <hr>

  <!-- 2、页面内嵌 -->
  <button id="btn" onclick="show()">页面内嵌</button>
  <!-- 网页中编写一对script标签,js代码写在标签内部 -->
  <script>
    // 编写了js代码
    function show() {
      alert("页面内嵌代码执行.")
    }
  </script>

  <!-- 3、外部文件关联 -->
  <hr>
  <button onclick="handler()">外部文件关联</button>
  <!-- script标签通过src属性,引入一个外部js文件; script标签必须成对出现 -->
  <script src="./js/comm.js"></script>
</body>
</html>

(3) 注释:

  • 行内注释::主要针对一行或者多行代码的关键性描述
  • 多行注释:主要针对一行或者多行复杂的代码,进行详细描述
  • 文档注释:一般出现在js文件中,描述文档开发作者、开发时间、功能描述等作用
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1、单行注释
    // 一般针对一行或者多行代码进行关键性作用描述
    // 页面中弹出一个警告对话框, alert(额勒特),浏览器内置警告对话框
    // alert("hello javascript!")

    /*
      2、多行注释
      一般针对一行或者多行关键性代码(功能比较复杂、条目较多)添加注释内容
      prompt(普让普特),浏览器内置交互对话框,接受用户输入数据
      括号中第一个数据:对话框中提示的文本内容
      括号中第二个数据:对话框中默认输入的内容
    */
   prompt("请输入您的年龄:", 0)
   
  </script>
</body>
</html>

(4) 解释型执行
JavaScript是一门解释型语言:代码执行过程,解释一行,执行一行!

<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1、解释执行
    // 解释一行代码,执行一行代码
    alert("我是第一行代码")
    alert("我是第二行代码")
    alert("我是第三行代码")

  </script>
</body>
</html>

(5) 字面量

字面量:描述的是代码的字面意思,一般情况在JavaScript中表示字面意思的数据,如数字、字符串等等

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 字面量:代码的字面意思,代码字面表示的数据
    // 12、1
    // 字面量,可以在代码中直接使用
    // alert(3.1415)
    alert(175)
    // alert(85)

    // 存在的问题:不能重复利用
    alert("饮料的价格:" + 5.00)
    alert("两瓶的价格:" + 5.00*2)  // 使用5.00字面量,需要重新编写
  </script>
</body>
</html>

(6) 变量
变量(Variable):存储数据的容器,可以在代码中存储数据,然后通过变量名称重复使用这些数据

<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 变量:Variable,表示临时存储数据的容器
    // 使用var关键字声明一个变量
    var pi = 3.1415926   // 使用变量pi存储了一个圆周率
    alert("圆周率: " + pi) // 通过变量名称,使用变量中存储的数据

    var price = 5.00  // 使用price(单价)存储一瓶饮料单价
    alert("饮料价格:" + price)
    alert("两瓶饮料价格:" + price * 2)

  </script>
</body>
</html>

(7) 运算符
数据存储的时候,经常会用到赋值运算符

符号 描述
= 将等号右侧的数据,存储到左侧的变量中

反映生活中交易行为的运算,主要是算术运算!

符号 描述
+ 加法运算
- 减法运算
* 乘法运算
/ 除法运算

二、快速入门
(1) 页面弹窗
JavaScript可以操作三种浏览器弹窗

  • 警告对话框
  • 确认对话框
  • 交互对话框
alert("警告信息,一种重要的提示信息,暂停代码的向下执行,直到用户点击确定")

// 确认对话框
var res = confirm("针对用户的一些危险行为,进行提示,让用户确认自己的选择")
alert("用户的选择:" + res) // res: true / false表示真假两种行为

// 交互对话框
var pmp = prompt("提示信息,提示用户输入的文本内容", "默认数据")

(2) 数据输出
JavaScript中提供了多种语法,可以将数据输出到指定的位置

  • alert(xxx)将数据以弹窗的形式展示出来,经常用于代码错误测试打印数据
  • document.write(xxx):将数据在网页中输出,不论是错误调试或者项目开发,都严禁使用
  • console.log(xxx):将数据在浏览器的控制台中输出展示,使用频率最高
var name = "大牧"
// 查看name变量中的数据
// 1.alert()
alert(name)     // 页面弹窗,阻止代码向下继续执行,一般很少使用(影响页面加载效率)

// 2.document.write()
document.write(name)    // 网页中直接输出数据,严禁使用;影响网页布局

// 3.console.log()
console.log("姓名数据:", name) // 代码错误排查时,使用较多

(3) 页面交互
JavaScript在浏览器中开发,主要用于服务页面;通过代码获取标签、操作标签内容、操作标签样式

  • document.getElementById('btn'):获取页面中id="btn"的一个标签
  • div.innerHTML = xxx:设置标签中的文本内容
  • div.style.color = 'red':设置标签中的文本颜色
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box">赳赳老秦,共赴国难</div>
  <button id="btn">按钮:设置div中的内容</button>
  
  <script>
    // 获取页面标签
    var _box = document.getElementById("box")
    var _btn = document.getElementById("btn")

    // 查看标签
    // console.log(_box)
    // console.log(_btn)

    // 查看标签中的内容
    // console.log(_box.innerHTML)
    // console.log(_btn.innerHTML)

    // 设置页面内容
    // 固定语法:点击_btn对应的按钮,执行后面function(){}花括号中的代码
    _btn.onclick = function() {
      // 修改div中的内容
      _box.innerText = "血不流干,死不休战"
      // 修改div的样式
      _box.style.width = "300px"
      _box.style.height = "200px"
      _box.style.backgroundColor = "orangered"
      _box.style.color = "white"
      _box.style.lineHeight = "200px"
      _box.style.textAlign = "center"
    }
  </script>
</body>
</html>```

有关JavaScript快速入门的更多相关文章

  1. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  2. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  3. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  4. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈:ElasticSearch:存数据+搜索;QL;Kibana:Web可视化平台,分析。LogStash:日志收集,Log4j:产生日志;log.info(xxx)。。。。使用场景:metrics:指标监控…2、基本概念Index(索引)动词:保存(插入)名词:类似MySQL数据库,给数据Type(类型)已废弃,以前类似MySQL的表现在用索引对数据分类Document(文档)真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - 如何以表格格式快速打印 Ruby 哈希值? - 2

    有没有办法快速将表格格式的ruby​​哈希打印到文件中?如:keyAkeyBkeyC...1232343451253474456...其中散列的值是不同大小的数组。还是使用双循环是唯一的方法?谢谢 最佳答案 试试我写的这个gem(在表中打印散列、ruby对象、ActiveRecord对象):http://github.com/arches/table_print 关于ruby-如何以表格格式快速打印Ruby哈希值?,我们在StackOverflow上找到一个类似的问题:

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. 电脑启动后显示器黑屏怎么办?排查下面4个问题,快速解决 - 2

    电脑启动出现显示器黑屏是一个相当常见的问题。如果您遇到了这个问题,不要惊慌,因为它有很多可能的原因,可以采取一些简单的措施来解决它。在本文中,小编将介绍下面4种常见的电脑启动后显示器黑屏的原因,排查这些原因,快速解决! 演示机型:联想Ideapad700-15ISK-ISE系统版本:Windows10一、显示器问题如果出现电脑启动后显示器黑屏的情况。那么首先您需要检查一下显示器是否正常工作。您可以通过更换另一个显示器或将当前显示器连接到另一台计算机来检查显示器是否存在问题。如果问题仍然存在,那么您可以排除显示器故障的可能性。 二、显卡问题如果您的电脑配备了独立显卡,那么显卡故障也可能是导致电脑

  9. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具,用来对区块链系统进行各种管理操作。但是对于初学者来说,还是可视化界面更友好,本节就来介绍WeBASE管理平台,这是一款微众银行开源的自研区块链中间件平台,可以降低区块链使用的门槛,大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行,在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设,一定

  10. Tcl脚本入门笔记详解(一) - 2

    TCL脚本语言简介•TCL(ToolCommandLanguage)是一种解释执行的脚本语言(ScriptingLanguage),它提供了通用的编程能力:支持变量、过程和控制结构;同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发,脚本编程,GUI和测试等方面。•实际上包含了两个部分:一个语言和一个库。首先,Tcl是一种简单的脚本语言,主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的,因此在某种意义上我们又可以把TCL看作C库,这个库中有丰富的用于扩展TCL命令的C\C++过程和函数,所以,Tcl是

随机推荐