JAVA前端快速入门基础_javascript入门(01)

news2024/12/24 8:32:34

写在前面:本文用于快速学会简易的JS,仅做扫盲和参考作用

1.JS是什么

JavaScript是一门跨平台,面向对象的脚本语言(即不需要编译,可以直接通过浏览器进行解释)。JS和Java是两门完全不相同的语言,但是基础的语法是类似的

2.JS的引入方式

JS如何在前端代码里面体现作用。有两种方式,一种是内部脚本,一种是外部脚本

注意,JS代码必须放在 script标签里面,一个页面可以放置任意数量的script,一般建议把js放在body的后面,这样可以改善页面显示的速度。js可以放在html页面的任意位置,不影响他的使用(即使放在html标签的后面也可以正常运行)

2.1内部脚本:将JS代码写在HTML里面

内部脚本调用如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("JS is")

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

效果如下所示:
请添加图片描述
证明了JS代码运行成功

2.外部脚本:将JS代码定义在一个新的文件里

类似于其他语言库的定义,即将需要执行的JS代码放在一个新的js文件里,然后通过调用的方式来执行js的的代码。
首先,我们创建一个新的叫jswai.js的文件,并输入以下内容。

alert("in js")

然后再html页面做这样引用,通过script里面的src的效果可以达到与内部调用一样的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jswai.js"></script>
</head>
<body>
    
</body>
</html>
<script>
    alert("JS is")

</script>

需要额外注意的是,script标签无法实现自闭和,即使用了script必须要使用对应的/script,不然会导致js脚本执行不成功

3.JS基础语法

3.1书写语法

3.1.1 区别大小写(即变量A和a不是一个变量)
3.1.2 每行结尾的分号可有可无,即支持c++每行必须有;也支持python的不需要;
3.1.3 单行注释//,多行注释为/**/
3.1.4 大括号表示代码块,和众多强语言一样

常用的输出语句(类似于c++的printf):

  1. window.alert():显示到弹出框上,上面在内部脚本调用的时候已经看到了效果图
  2. document.write():显示到html页面上,即直接运行出来的结果变成html,显示到浏览器里面
  3. console.log():写在了浏览器控制台上,使用f12打开console即可看到输出效果
3.2变量

可以直接使用var来声明变量,这个变量可以存放不同类型的值,变量的名称可以用数字、字母、_(下划线)、和$来表示,但是在定义的时候不可以使用数字作为开头(和别的语言一样),var定义的变量可以支持下面操作:

var a=1
a ="123"

var的作用域属于全局变量,类似于c++里面的#define,不仅仅代码块可以调用,代码块外面的代码也可以进行调用。如果只想被代码块里面调用,而不想被外面的代码调用,可以用let替换var,如果要设置一个不可变换的常量值,可以使用const(这一点和c++保持一个特性),并且let不可以重复定义一个变量。即执行下面这段代码会发生报错

let a=1
let a=2

虽然运行起来反应到浏览器上没有显示效果,但其实f12打开开发者工具后,可以看到js代码已经执行错误了。(如果这段script里面后续还有代码,则后续代码不会执行[因为已经报错了],但是如果在script外面[即script标签的外面]还有html代码,则html代码会正常的显示在页面上)
请添加图片描述
let可以支持改变值,例如可以这样而不会造成代码的报错

let a=1
a=2
3.3数据类型

JS的基础数据类型主要有以下五种:
number:数字类型
string:字符串类型
boolean:布尔类型
null:空类型
undefined:未初始化类型
使用typeof()可以获取变量的类型,如下代码即可获得

typeof(a)//即可获得a的数据类型
3.4运算符

运算符和java几乎一样,但是增添多了一个===。

=== 和 ==的区别在于 == 会做类型转换, ===不会做类型转换。如下代码即可弄懂两者区别。

var a= 10
var b="10"
if (a==b){
	代码块一
}
if (a===b){
	代码块二
}

这个代码的运行结果是会执行代码块一,而不执行代码块二,第一个直接类型转换使得a和b都是10,所以等式成立。第二个因为类型不符合所以直接if语句不成立导致不执行代码块二。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp 微信小程序 分享海报的实现

主页面 <template><view class"page"><!-- 自定义导航栏--><Navbar title"我的海报"></Navbar><view class"container"><poster ref"poster" :imageUrl"image" :imageWidth"7…

【MHA】MySQL高可用MHA源码1-主库故障监控

1 阅读之前的准备工作 1 一个IDE工具 &#xff0c;博主自己尝试了vscode安装perl的插件&#xff0c;但是函数 、变量 、模块等都不能跳转&#xff0c;阅读起来不是很方便。后来尝试使用了pycharm安装perl插件&#xff0c;阅读支持跳转&#xff0c;自己也能写一些简单的测试样例…

达梦(DM) SQL日期操作及分析函数

达梦DM SQL日期操作及分析函数 日期操作SYSDATEEXTRACT判断一年是否为闰年周的计算确定某月内第一个和最后一个周末某天的日期确定指定年份季度的开始日期和结束日期补充范围内丢失的值按照给定的时间单位查找使用日期的特殊部分比较记录 范围处理分析函数定位连续值的范围查找…

【定制化体验:使用Spring Boot自动配置,打造个性化Starter】

项目结构 Pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4…

LabVIEW高效目标跟踪系统

LabVIEW高效目标跟踪系统 随着机器视觉技术的飞速发展&#xff0c;设计和实现高效的目标跟踪系统成为了众多领域关注的焦点。基于LabVIEW平台&#xff0c;结合NI Vision机器视觉库&#xff0c;开发了一种既高效又灵活的目标跟踪系统。通过面向对象编程方法和队列消息处理器程序…

【CTF Crypto】CTFShow 萌新 密码3 Writeup(摩尔斯电码+培根密码)

萌新 密码3 3 题目名称&#xff1a;我想吃培根 题目描述&#xff1a; – — .-. … . …–.- … … …–.- -.-. — — .-… …–.- -… …- - …–.- -… .- -.-. — -. …–.- … … …–.- -.-. — — .-… . .-. …–.- – – -… -… – -… – -… – – – -… -… -……

鸿蒙(HarmonyOS)性能优化实战-Trace使用教程

概述 OpenHarmony的DFX子系统提供了为应用框架以及系统底座核心模块的性能打点能力&#xff0c;每一处打点即是一个Trace&#xff0c;其上附带了记录执行时间、运行时格式化数据、进程或线程信息等。开发者可以使用SmartPerf-Host调试工具对Trace进行解析&#xff0c;在其绘制…

yudao-cloud微服务系统系统模块+后台管理系统成功运行

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 第一章 芋…

精酿啤酒:酿造工艺的自动化与智能化发展

随着科技的不断进步&#xff0c;自动化与智能化已成为啤酒酿造工艺的重要发展方向。Fendi Club啤酒紧跟时代潮流&#xff0c;积极推动酿造工艺的自动化与智能化发展&#xff0c;旨在提高生产效率、确保产品品质和满足市场需求。 Fendi Club啤酒引入自动化生产设备。他们采用自动…

rabbitmq集群配置

1&#xff0c;配置环境变量 MY_POD_NAME&#xff1a;当前Pod的名称 RABBITMQ_ERLANG_COOKIE&#xff1a;设置Erlang Cookie用于节点间通信安全验证&#xff0c;值来自/nfs/rabbitmq/lib/.erlang.cookie文件内容 RABBITMQ_NODENAME&#xff1a;根据Pod名称动态生成了RabbitMQ…

Typora for Mac:轻量级Markdown编辑器

Typora for Mac是一款专为Mac用户设计的轻量级Markdown编辑器&#xff0c;它以其简洁的界面和强大的功能&#xff0c;成为了Markdown写作爱好者的首选工具。 Typora for Mac v1.8.10中文激活版下载 Typora的最大特色在于其所见即所得的编辑模式&#xff0c;用户无需关心复杂的M…

【软件】ERETCAD-Env:在轨空间环境3D动态仿真软件

文章介绍了Extreme-environment Radiation Effect Technology Computer-Aided Design – Environment (ERETCAD-Env)软件&#xff0c;文章的介绍和展示了ERETCAD-Env软件的功能和特点&#xff0c;这是一款用于动态模拟在轨卫星所处空间环境的计算机辅助设计软件。强调了该软件在…

TCP关闭连接时的一些思考

TCP协议是TCP/IP栈中最复杂的协议&#xff0c;它最大的优点是传输的可靠性&#xff0c;这通过面向连接、按序传输、超时重传、流量控制等机制保证其传输的可靠性。但这并不是我们今天要讨论的重点&#xff01; TCP通信的过程分别是三个阶段&#xff1a;建立连接、传输数据、关…

SpringCloud Hystrix 实战

一、配置 1.引入jar包 单独使用hystrix &#xff0c;不配合openFegin使用的话&#xff0c;单独使用hystrix,需要引入spring-cloud-starter-netflix-hystrix包。要使用的hystrix-dashboard 界面的话需要引入spring-boot-starter-actuator 包和spring-cloud-starter-netflix-hy…

SpringBoot中多数据源灵活切换解决方案

本篇内容介绍了“SpringBoot中如何使用Dynamic Datasource配置多数据源”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 源码地址/文档说明 功能特性: 支持 数据源分组…

通信原理(2)--随机过程

通信原理(2)–随机过程 3.1随机过程的基本概念 随机过程{x(t)}由一族时间函数 x i ( t ) x_i(t) xi​(t)&#xff0c;i1,2.3…组成&#xff0c;每一个时间函数 x i ( t ) x_i(t) xi​(t)称为随机过程{x(t)}的一个样本函数&#xff08;一个实现&#xff09; 每个样本函数在时间…

python-opencv实现最近邻插值和双线性插值对图片上采样

使用背景 当我们需要把图像进行放大或者缩小的时候&#xff0c;第一反应是使用resize()实现。很多情况下&#xff0c;我们会调用最近邻插值和双线性插值去放大图片&#xff0c;当然要说没有分辨率的损失那是不可能的&#xff0c;只能说在放大图片的过程中尽可能增加了图片的分…

Hybrid Homomorphic Encryption:SE + HE

参考文献&#xff1a; [NLV11] Naehrig M, Lauter K, Vaikuntanathan V. Can homomorphic encryption be practical?[C]//Proceedings of the 3rd ACM workshop on Cloud computing security workshop. 2011: 113-124.[MJS16] Maux P, Journault A, Standaert F X, et al. To…

Matlab|交直流系统潮流计算(含5种控制模式)

目录 1 主要内容 程序参考流程图 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考文献《交直流系统潮流计算及相互关联特性分析》&#xff0c;采用5种交直流潮流控制方式&#xff1a;1.定电流定电压 2.定电流定熄弧角 3.定功率定电压 4.定功率定熄弧角 5.定触发角…

Stable Diffusion 常用放大算法详解

常用放大算法 图像放大算法大致有两种&#xff1a; 传统图像放大算法&#xff08;Lantent、Lanczos、Nearest&#xff09;AI图像放大算法&#xff08;4x-UltraSharp、BSRGAN、ESRGAN等&#xff09; 传统图像放大算法是基于插值算法&#xff0c;计算出图像放大后新位置的像素…