给初学者的JavaScript入门指南及通俗的JS变量解释

简介: 给初学者的JavaScript入门指南及通俗的JS变量解释

一、什么是JS

  1. 全称叫JavaScript是一门脚本语言,也是一门真正的编程语言
    livescript主要用来解决表单验证的问题
    脚本语言:script
    可以将JS代码嵌入到HTML中去使用
    编程语言 VS 标记语言
  2. 是我们前端吃饭用的工具预告:JS学好,是基础
  3. 是网页三要素之一HTML+CSS+JS
    结构层+外观层+行为层

二、为什么要学习,能够做什么

CSS口号:化腐朽为神奇

JS口号:只有想不到的,没有做不到的。

传统意义上能做如下事情:

-修改网页内容和样式(动态的修改HTML或css)
-客户端数据计算
-表单输入验证
-浏览器事件的触发和处理
-网页特殊显示效果制作(特效,轮播图、tab切换页、放大镜效果、滑动星星评分、弹出框、手风琴、、、)
-服务器的异步数据提交(ajax)

三、学习后的目标是什么

学习后能将国内顶级的电商网站给做出来了,包括PC端,移动端,webAPP等

四、如何使用JS

跟css一样,也有3种方式

  1. 行内
<标签 onclick="JS代码">内容</标签>
  1. 页面
在页面任意的地方,写script标签,包裹JS代码
<script>
    //这里写JS代码
  alert(111);
    alert('hello,JS');
</script>
  1. 外部
<script src="JS文件路径"></script>

五、JS的注释

  1. 单行注释
<script>
//注释内容
</script>
  1. 多行注释(同CSS的)
<script>
/*
这里是注释
换行也没关系
*/
</script>
  1. 注释的作用:(面试题)
    a. 给人看的
    b. 不让代码执行

六、扩展:什么是代码

单词+英文状态下的符号=代码。

比如:

var a=1;
// var,a 相当于是都是英文字母(单词)
// = ; 等都是符号

七、JS的变量(非常重要的概念)

变量是一切编程语言的基石,无变量,不编程,不但JS有,其他任何编程语言都会有。

变量是保存数据的容器。文字、数字等,在网页等地方要保存的则是保存到内存中,才需要变量

电影、音乐、游戏等是保存在硬盘中的,不需要变量。

变量占据的是内存的空间,变量在理论上会让内存变少,将网页关闭后会释放空间。

假设把内存比喻成酒店,里面的每一个房间号即为容器。

那么开房间需要用一个特别的关键字:var;

  1. 声明变量(怎么订房)
var 房间号;
var a;
var A;
var var;
  1. 保存数据(入住)
1. 直接定+入住
var a="张三";
2. 先定再入住
var a;
a="张三"
  1. 访问数据(使用)
var a="张三";
alert(a);//
//做计算
var a=1;
var b=2;
var c=a+b;//3
alert(c);//3
  1. 改写数据
var a=1;
  a=2;
alert(a);//2
  1. 重复声明,后面的会覆盖前面的
var a=1;
var a=2;
  1. 批量声明变量和赋值
var a=1;
var b=2;
var c=1;
var d=2;
//以上可以改为下面的
var a=1,b=2,c=3,d=2;
//如果值一样,可以直接用等于号连接
var a=1
var b=1;
//可以写成下面的
var a=b=1;

七、变量的命名规则:

1、区分大小写
2、变量首字母必须是以英文字母、$、_下划线
3、不能用关键字、保留字做变量名

八、JS的调试

在浏览器的控制台(console面板)看有没有错误。

相关文章
|
13天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
13天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
13天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
11天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
19天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
52 10
|
17天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
25天前
|
JavaScript 前端开发
局部 JavaScript 变量
JavaScript 中,函数内部使用 `var` 声明的变量为局部变量,仅在函数内可见,函数执行完毕后被删除。全局变量则在函数外部声明,整个页面的脚本和函数均可访问,页面关闭后才被删除。未声明的变量赋值会自动成为 `window` 对象的属性,且在非严格模式下可被删除。
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
6月前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
41 1