Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【尚硅谷】JavaScript基础&实战丨JS入门到精通_01-06

【尚硅谷】JavaScript基础&实战丨JS入门到精通_01-06

作者头像
全栈程序员站长
发布于 2022-11-01 06:16:34
发布于 2022-11-01 06:16:34
73400
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

1.JavaScript

– ECMAScript – DOM – BOM

2.JS的HellowWorld

输出语句

  • 控制浏览器弹出一个警告框(用户可见)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
alert("哥,你真帅啊!!");
  • 让计算机在页面中输出一个内容(用户可见) document.write()可以向body中输出一个内容
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 document.write("看我出不出来~~~");
  • 向控制台输出一个内容(开发人员可见) console.log()的作用是向控制台输出一个内容
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 console.log("你猜我在哪出来呢?");

3.JS编写位置

  1. JS代码需要编写到<Script>标签中。我们一般将<script>标签写到<head></head>中。(和style标签有点像) 属性: – type:默认值text/javascript可以不写,不写也是这个值。 – src:当需要引入一个外部的js文件时,使用该属性指向文件的地址。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">
	console.log("Hello World");
</script>
  1. 点击事件 (1)可以将js代码编写到标签的onclick属性中,写在的body中,当我们点击按钮时,js代码才会执行。 缺点:虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button onclick="alert('讨厌,你点我干嘛~~');">点我一下</button>
	<!--
		可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
	-->
<a href="javascript:alert('让你点你就点!!');">你也点我一下</a>
<a href="javascript:;">你也点我一下</a>

(2)可以将js代码编写到script标签

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">
alert("我是script标签中的代码!!");

(3)可以将js代码编写到外部js文件中,然后通过script标签引入(☆☆☆) 优点:写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制。 注意:script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略 如果需要则可以在创建一个新的script标签用于编写内部代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript" src="js/script.js"></script>

<script type="text/javascript">
	alert("我是内部的JS代码");
</script>

js/script.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
alert("我是外部JS文件中的代码");

4.基本语法

  1. JS注释 (1)多行注释 /* 多行注释,注释中的内容不会被执行,但是可以在源代码中查看。要养成良好的编写注释的习惯,也可以通过注释来对代码进行一些简单的调试. */ 快捷键:

//单行注释 快捷键:Ctrl+/

  1. JS中严格区分大小写
  2. JS中每一条语句以分号(;)结尾 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源, 而且有些时候,浏览器会加错分号,所以在开发中分号必须写
  3. JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化

5.字面量和变量

  1. 字面量,都是一些不可改变的值 比如 :1 2 3 4 5 字面量都是可以直接使用,但是我们一般都不会直接使用字面量
  2. 变量 变量可以用来保存字面量,而且变量的值是可以任意改变的 变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量, 而很少直接使用字面量 可以通过变量对字面量进行描述
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//声明变量
//在js中使用var关键字来声明一个变量
var a;

//为变量赋值
a = 123;
a = 456;
a = 123124223423424;

//声明和赋值同时进行
var b = 789;
var c = 0;
var age = 80;

console.log(age);

6.标识符

  1. 在JS中所有的可以由我们自主命名的都可以称为是标识符 例如:变量名、函数名、属性名都属于标识符
  2. 命名一个标识符时需要遵守如下的规则: (1)标识符中可以含有字母、数字、_、$ (2)标识符不能以数字开头 (3)标识符不能是ES中的关键字或保留字 (4)标识符一般都采用驼峰命名法 – 首字母小写,每个单词的开头字母大写,其余字母小写 helloWorld xxxYyyZzz
  3. JS底层保存标识符时实际上是采用的Unicode编码, 所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var if = 123;
//违背规则3
console.log(if);

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/204283.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月23日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
「JavaScript」编程基础-01
请注意,本文编写于 2102 天前,最后修改于 174 天前,其中某些信息可能已经过时。
曼亚灿
2023/05/17
5900
「JavaScript」编程基础-01
js基础(一)
借鉴java的管理机制,c的函数,最开始交Mocha,后改为LiveScript,当时java特别火,和sun公司合作以后改名为JavaScript。(与java毫无关系)
且陶陶
2023/04/12
2K0
js基础(一)
前端基础-JavaScript入门
name变量名,本身不是保留字/关键字, 建议少用。 name在有的浏览器中,是自动声明过的。
cwl_java
2020/03/26
6130
javascript基础语法
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是,验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。
wolf
2020/09/18
8360
JavaScript初探 一(认识JavaScript)
typeof 运算符把对象、数组或null返回 object typeof 运算符不会把函数返回 object ps:因为JavaScript中数组即是对象,所以 typeof [数组] 返回为”object“
Mirror王宇阳
2020/11/13
1.5K0
JavaScript初探 一(认识JavaScript)
上篇:34个JavaScript栗子,从易到难。
本文转载于:https://mp.weixin.qq.com/s/8qP_xFMyDnzbqYHMcf75aQ
不背锅运维
2022/10/02
5490
上篇:34个JavaScript栗子,从易到难。
前端成神之路-JavaScript基础第01天笔记
​ ECMAScript:规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。 更多参看MDN: MDN手册
海仔
2020/12/09
6100
前端成神之路-JavaScript基础第01天笔记
JavaScript系列之JS基本语法
Hi,大家好,我是来输送技能的CoCo。Python近年来成为编程领域中的佼佼者,得到了迅猛的发展。作为一门强类型的动态脚本语言,JavaScript与Python其实非常相似,无论是语法思维上还是内置API上,对于有Python基础的我们来说,学习JavaScript非常的友好。
可可的测试小栈
2022/06/06
1.7K0
JavaScript系列之JS基本语法
JavaScript 基础语法
讲法声明 - 很重要,请先查看 关于JavaScript的讲法,我们采取的方式与HTML&CSS类似,先在课程中带大家,以“实现页面小功能”为目的,一步一步的进行实现,并在期间讲解相关知识点,在其中一些相关的“细节”知识点我们暂时先忽略掉,先完成主干的学习。在一个小阶段的主干知识学习完成之后,我们再回头详细分析“细节”。这样更有利于大家的吸收和理解,不容易陷入到一些不必要的问题当中。 本文内容概要: 1 回顾JavaScript的基本组成 2 JavaScript引入方式 3 JavaScript基本调试
HTML5学堂
2018/03/12
1.3K0
JavaScript 基础语法
JavaScript入门
(53条消息) python基础:布尔运算和四个语句_sayhi:的博客-CSDN博客_python布尔运算
Breeze.
2022/06/27
7060
JavaScript入门
JavaScript入门基础
布兰登·艾奇(Brendan Eich,1961 年~),10 天完成 JavaScript 设计。
timerring
2023/10/13
2720
JavaScript入门基础
JavaScript 第一天
它有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)
小城故事
2023/03/10
1.2K0
JavaScript 第一天
新手怎么学JS?JavaScript基础入门
在正式的学习JavaScript之前,我们先来学习一些小工具,帮助我们更好的学习和理解后面的内容。
Tz一号
2020/09/10
2.7K0
JavaScript 笔记总结(一)
脚本可同时位于 HTML 的 和 两个部分,通常的做法是把函数放入 部分,或者放在页面底部。这样就可以把它们放在同一处位置,不会干扰页面的内容
宸寰客
2020/07/13
9760
JavaScript基础
<input type="button" name="btn" value="请点击" onclick="alert('hello world!!!')"/>
闲花手札
2021/08/24
9190
JavaScript基础教程
JavaScript是目前所有主流浏览器上唯一支持的脚本语言,这也是早期JavaScript的唯一用途。其主要作用是在不与服务器交互的情况下修改HTML页面内容,因此其最关键的部分是DOM(文档对象模型),也就是HTML元素的结构。通过Ajax可以使HTML页面通过JavaScript,在不重新加载页面的情况下从服务器上获取数据并显示,大幅提高用户体验。通过JavaScript,使Web页面发展成胖客户端成为可能。
Abalone
2022/07/14
2.8K0
JavaScript基础教程
「  1.JavaScript的编写位置:  」
one day {dotted startColor="#ff6c6c" endColor="#1989fa"/}
青益
2023/01/03
2950
【JavaScript】网页交互的灵魂舞者
<input type="button" value="点我⼀下" onclick="alert('haha')">
2的n次方
2024/10/19
2120
【JavaScript】网页交互的灵魂舞者
JavaScript
JavaScript是一种web前端的描述语言,也是一种基于对象(Object)和事件驱动(Event Driven)的、安全性好的脚本语言。它运行在客户端从而减轻服务器的负担。
py3study
2020/01/19
2.2K0
javascript入门到进阶 - javascript基础
JavaScript 是区分大小写的,并使用 Unicode 字符集。举个例子,可以将单词 Früh (在德语中意思是“早”)用作变量名。
公众号---人生代码
2020/07/14
7560
相关推荐
「JavaScript」编程基础-01
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验