JavaScript基础(二)

 

JS语法结构——引入方式

js很明显可以是一个后缀名为js的文件,js的引入方式和css一样,也有三种方式。

1.外部

使用script表现,只不过增加一个src属性,把js文件的路径src属性中。

<script src ="js文件路径"></script>

跟那个css文件外联一样,"./ "  "../"就找到了

df002f0be4ff4428be66f274abdbb2fc.png

这里可以看到我在外面新建了一个后缀是js的文件,这个就是JavaScript文件,一般写在title下。

2.内部

在title下直接写<script>像写style一样,内部<script>写在什么下可以,建议写在</body>下。

例:

f66704ea13ec48b7be9bb8ed07c3d29e.png

 我们随便在里面写了点东西,看看效果:

ee155b1ac55e4077b03b74040bf0a45e.png

 3.标签内部嵌套

直接看例子

05fa2158f4ff421ea43050b05dfe5ca3.png

 9735cda574e447d3a8ebd95c35533b9b.png

然后点一下就有了。

这个onclick绑定事件后面细说,先知道这是内部嵌套写法就好。

JS中的方法

1.弹框输出方法

alert("需要显示内容");括号内单引号双引号都可以,但需要显示内容最好用单引号包起来,然后就通过js向页面输出内容,前面都看过了,就不写了。

2.document.write

310a2a26cb344a8e8369547bce9cc9f7.png

d647504d5a7e4fe7b55c4d91ea1f01a7.png

然后点一下确定,就会在页面写下write后的内容:

8cf4d18778b346849494c0b81c5a2144.png

 

<script>

    alert('祖国万岁')

    document.write("<h1> 你好,中国 </h1>")

</script>

当然在括号内套用的标签同时生效。

87b0e87bd33248e8b7cbb8c332203d8c.png

3.//声明变量   var 变量名 = 值;

//变量:常常变化的量

<script>

    var num = 20;

    alert(num);

</script>

注意alert没别加引号,加引号原样输出。

9b56437ca58d4512b3b0a60ee7452fc5.png

声明变量,立马在内存中开辟出一个房间,变量名就是这个房间号。

也可以用一个var生成多个变量:

<script>

    var num1 =1,

        num2 =2,

        num3 =3

</script>

变量值后跟逗号,代表声明没有结束。

也可以不写var,直接声明,解析器自动默认,num=30; alert(num);

一样的效果:

294a8d73f34749388a4232cafd5a593c.png

如果声明变量不赋值:

<script>

    var num ;

    alert(num);

</script>

就会显示undefined

db038f5a5b1649e884d2d8decd3ee55e.png

 4.//控制台输出内容

语法:  console.log();

例:<script>

    console.log('hhhhhha xswl');

   </script>

这个快捷输入log就有提示

打开页面后看不到,右键检查,有个控制台(console),我们输入的内容就在那里面。

1a6f465890a041fc80a39acbe21c8574.png

 用户看不到,当然也可以输出变量,console.log(num);

如果未赋值,也是undefined

64bde85ef690498a84b69a2c0c1fab81.png

接受用户输入

语法:   prompt(提示用户输入信息);

浏览器会弹出一个框,让用户输入信息。

例:

//接受浏览器弹框输入

<script>

      prompt("我帅不帅?");

</script>

9b7dda8a45b74bb5b43630ced86f750d.png

 //但用户输入的内容我们看不到,所以要用变量接收一下

<script>

   var answer = prompt("我帅不帅?");

   //我们在控制台上看一下

   console.log(answer);

</script>

0c0d29763fb64ceda566b739ac40891f.png

 然后就可以在控制台中看到用户输入内容了。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/587119.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

h5+Vant左滑删除

介绍&#xff1a;这是一个上拉加载下拉刷新的列表&#xff0c;外加左滑删除。废话不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01;&#xff01; <template><div class"info-list"><div class"top-bar"><van-nav-…

深入解析Floyd Warshall算法:原理、Java实现与优缺点

Floyd Warshall算法的简介 在我们的日常生活中&#xff0c;常常会遇到需要找出两点之间最短路径的问题。比如&#xff0c;从家到公司的最短路线&#xff0c;或者在旅行时&#xff0c;从一个景点到另一个景点的最快路线。 为了解决这类问题&#xff0c;科学家们设计出了许多算法…

利用大型语言模型提升数字产品创新:提示,微调,检索增强生成和代理的应用

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

code-server容器webpack的ws无法连接解决方法

TLDR 通过指定client的wsrul去连接ws devServer.client.webSocketURL ‘wss://<Forwarded uri>/ws’ 拓扑 1、code-server: 用于编写代码、启动webpack dev-server 服务&#xff1b;[https://<domain>:8001] 2、webpack: 用于浏览dev-server服务&#xff1b;[ht…

spring-boot示例

spring-boot版本&#xff1a;2.0.3.RELEASE 数据库: H2数据库 &#xff08;嵌入式内存性数据库&#xff0c;安装简单&#xff0c;方便用于开发、测试&#xff0c;不适合用于生产&#xff09; mybatis-plus框架&#xff0c;非常迅速开发CRUD

如何去掉引用网址的小尾巴

引用文章的链接时会出现很长冗余信息&#xff0c;删&#xff0c;删&#xff0c;删……&#xff0c;直到从平流层删到地平线 使用 Neat URL&#xff08;支持 google 系、Firefox&#xff09;扩展中的【拦截参数】可以去除的这类百无聊赖的小尾巴。 安装后&#xff0c;点击【Pr…

C语言——单链表实现数据增删查改

一.前言 嗨嗨嗨&#xff0c;我们又见面了。前面我们已经学习了关于数据结构中的顺序表&#xff0c;今天我们来学习数据结构中的单链表。废话不多说让我们直接开始吧。 二.正文 1.1链表的概念 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺…

【C#】基础知识

0.参考 C#语言入门详解 1.几种打印hello_world的方式 1.1 console控制台 新建一个console&#xff0c;直接打印&#xff1a; Console.WriteLine("Hello_world");启动一闪而过&#xff0c;在vs调试中选择开始执行不调试&#xff08;without debug&#xff09;。 …

算法效率的判断及一些典型例题的讲解

一.算法效率 1.用处&#xff1a;判断算法的好坏&#xff0c;好的算法应该是高效的 2算法效率取决于时间复杂度和空间复杂度 <1>时间复杂度 1.1概念&#xff1a;算法中基本操作的执行次数就是算法的时间复杂度 1.2表示&#xff1a;大O的渐进表示法&#xff0c;例如O(N)…

java技术栈快速复习02_前端基础知识总结

前端基础 经典三件套&#xff1a; html&#xff08;盒子&#xff09;css&#xff08;样式&#xff09;JavaScript&#xff08;js&#xff1a;让盒子动起来&#xff09; html & css HTML全称&#xff1a;Hyper Text Markup Language(超文本标记语言)&#xff0c;不是编程语…

记一次生产事故的排查和解决

一. 事故概述 春节期间, 生产系统多次出现假死不可用现象, 导致绝大部分业务无法进行. 主要表现现象为接口无法访问. 背景为900W客户表和近实时ES, 以及春节期间疫情导致的普通卖菜场景近似秒杀等. 二. 排查过程 优先排查了info, error, catalina日志, 发现以下异常: 主要的…

边循环边删除List中的数据

List边循环&#xff0c;边删除&#xff1b;这种一听感觉就像是会出问题一样&#xff0c;其实只要是删除特定数据&#xff0c;就不会出问题&#xff0c;你如果直接循环删除所有数据&#xff0c;那可能就会出问题了&#xff0c;比如&#xff1a; public static void main(String[…

公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台目录 目录 基于SprinBootvue的公考学习平台 一、前言 二、系统设计 三、系统功能设计 5.1用户信息管理 5.2 视频信息管理 5.3公告信息管理 5.1论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&…

React的useEffect

概念&#xff1a;useEffect是一个React Hook函数&#xff0c;组件渲染之后执行的函数 参数1是一个函数&#xff0c;可以把它叫做副作用函数&#xff0c;在函数内部可以放置要执行的操作参数2是一个数组&#xff08;可选参&#xff09;&#xff0c;在数组里放置依赖项&#x…

Liunx发布tomcat项目

Liunx在Tomcat发布JavaWeb项目 1.问题2.下载JDK3.下载Tomcat4.Tomcat本地JavaWeb项目打war包、解压、发布5.重启Tomcat,查看项目 1.问题 1.JDK 与 Tomcat 版本需匹配&#xff0c;否则页面不能正确显示 报错相关&#xff1a;Caused by: java.lang.ClassNotFoundException: java…

十一、大模型-Semantic Kernel与 LangChain 的对比

Semantic Kernel 与 LangChain 的对比 Semantic Kernel 和 LangChain 都是用于开发基于大型语言模型&#xff08;LLM&#xff09;的应用程序的框架&#xff0c;但它们各有特点和优势。 基本概念和目标 Semantic Kernel 是一个由微软开发的轻量级 SDK&#xff0c;旨在帮助开发…

每日OJ题_DFS爆搜深搜回溯剪枝⑤_力扣37. 解数独

目录 力扣37. 解数独 解析代码 力扣37. 解数独 37. 解数独 难度 困难 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的…

C++--const成员及const取地址操作符重载

前言 今天我们来了解一下const成员的基本使用,以及const取地址重载的运用 来开始今天的学习 const成员 1.基本定义, 将const修饰的“成员函数”称之为const成员函数&#xff0c;const修饰类成员函数&#xff0c;实际修饰该成员函数 隐含的*this指针&#xff0c;表明在该成员函…

Android4.4真机移植过程笔记(二)

5、盘符挂载 先定义overlay机制路径&#xff0c;后面storage_list.xml要用到&#xff1a; 在路径&#xff1a; rk3188_android4.4.1/device/rockchip/OK1000/overlay/frameworks/base/core/res/res/xml/定义好&#xff0c;注意名字要和emmc的代码片段&#xff08;往下面看&am…

python学习笔记----安装pycharm(1)

一、安装pycharm 1. 下载并安装pycharm https://www.jetbrains.com/pycharm/download2.汉化pycharm 安装插件并重启IDE完成汉化 二、 第一个python程序
最新文章