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

写在前面:本文用于快速学会简易的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.hqwc.cn/news/652564.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RK3568 学习笔记 : busybox 制作 ext4最小根文件系统

前言 开发板型号&#xff1a; 【正点原子】 的 RK3568 开发板 AtomPi-CA1 使用 VMware 虚拟机 ubuntu 20.04 编译 busybox&#xff0c;并制作 emmc 中的 ext4 根文件系统 rootfs 下载 busybox 可以在 https://busybox.net/downloads/snapshots/ 下载最新的 busybox&#xff…

Linux实验一:Linux环境及编程工具

目录 一、实验目的二、实验内容三、参考代码四、实验步骤步骤1. 编辑源代码test1.c步骤2. 编译源代码test1.c步骤3. 调试test1步骤4. 重新编译运行test1.c 五、实验结果六、实验总结 一、实验目的 1、掌握Linux C开发过程中的基本概念&#xff1b; 2、掌握如vim&#xff0c;GC…

leetcode和相关题目

1. 两数之和 直接利用hashmap存储值和对于索引&#xff0c;利用target-nums[i]去哈希表里找对应数值。返回下标。 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int, int> mp;vector<int> res;fo…

CentOS安装SonarQube

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 sonar是一款静态代码质量分析工具,支持Java、Python、PHP、JavaScript、…

一分钟理解:比特币第一次严重漏洞,生产1844亿枚比特币!是如何发生的

1、事件 2010年8月15日&#xff08;也就是比特币诞生的第二年&#xff0c;创世区块于2009年1月3日诞生&#xff09;&#xff0c;有人发现&#xff0c;在比特币区块链的第74638块上&#xff0c;一笔让人惊愕的交易。 这笔交易出现了184 467 440 737.09551616个比特币&#xff…

C# WinForm —— 08 Form初始化、布局、注册事件

Form 初始化 Form初始化的时候会调用 Designer.cs 里的 InitializeComponent(); 函数&#xff0c;在InitializeComponent(); 函数里面有Load Form语句时会调用 FrmLogin_Load()函数 Form布局 两种方式&#xff1a; 拖控件到窗体&#xff0c;设置属性在Load事件中写代码添加…

算法 || 二分查找

目录 二分查找 在排序数组中查找元素的第一个和最后一个位置 搜索插入位置 一个数组经过划分后具有二段性的都可以用二分查找 二分查找 704. 二分查找 - 力扣&#xff08;LeetCode&#xff09; ​ 暴力解法&#xff1a;直接遍历数组&#xff0c;找到 target 便返回下标&am…

基于微信小程序云开发实现考研题库小程序V2.0

不久之前&#xff0c;基于云开发的微信答题小程序搭建题库小程序V1.0&#xff0c;软件架构是微信原生小程序云开发。现在来回顾一下&#xff0c;已经实现的功能。 一、V1.0项目预览 1、页面结构 首页 答题页 结果页 我的页 排行榜页 答题历史页 登录页 使用指引页 2…

LeetCode57. 插入区间

LeetCode57.插入区间 题目思路: 代码 /* 前置知识&#xff1a; vector<vector<int>> a,b; 二维vector数组是可以将二维中的一维vector数组给push_back的&#xff0c; 不是只有单个元素才可以&#xff0c;整个一维的vector数组也可以 b[0] {1,2,3},b[1] {4,5,6}…

如何消除浏览器SmartScreen对网站“不安全”提示?

面对互联网时代用户对网站安全性和可信度的严苛要求&#xff0c;网站运营者时常遭遇Microsoft Defender SmartScreen&#xff08;SmartScreen&#xff09;提示网站不安全的困扰。本文将剖析SmartScreen判定网站不安全的原因&#xff0c;并为运营者提供应对策略&#xff0c;以恢…

element 分页切换时:current-page无效 页数不会跟着一起切换

问题回溯&#xff1a;使用el-pagination组件 选择切换当前分页 页数为2 问题结果&#xff1a;el-pagination组件 当前页切换失败 一直都是 1&#xff0c;接口传参分页数据是2&#xff0c;打印当前分页也是2 解决方案1&#xff1a;使用 current-page参数 .sync 修饰符 解决方案2…

DM8达梦数据库模式下,备份库中具体某一张表SQL操作

1、进行达梦数据库的安装路径&#xff0c;我的默认安装路径为 /home/dmdba/dmdbms/bin 2、执行表备份的命令dexp ./dexp MO_FORM_V5/"MO_FORM_V5"192.168.179.11:5236 DIRECTORY/opt/dm_back/ FILEsystem.dmp TABLES"MO_FORM_V5.FORM_WARN_RULE" LOGs…