JavaScript基础入门教程
目录
1.JavaScript介绍
什么是JavaScript？
JavaScript的作用
JavaScript的组成
JavaScript的书写位置
JavaScript的输入输出语法
2.变量
什么是变量？
变量的基本使用
变量的命名规则与规范
数组
3.常量
4.数据类型
基本数据类型
number 数字型
string 字符串型
boolean 布尔型
undefined 未定义型
null 空类型
引用数据类型
object 对象
数据类型的转换
隐式转换
显示转换
检测数据类型
typeof
5.运算符
赋值运算符
一元运算符
比较运算符
逻辑运算符
运算符优先级
1.JavaScript介绍
什么是JavaScript？
JavaScript是一种运行在客户端（浏览器）的web编程语言，实现人机交互效果。
JavaScript的作用
1.网页特效（监听用户的一些行为让网页做出对应的反馈）
2.表单验证（针对表单数据的合法性进行判断）
3.数据交互（获取后台的数据，渲染到前端）
4.服务端编程（node.js）
JavaScript的组成
1.ECMAScript
规定了js的基础语法核心知识
2.Web APIS
BOM:操作浏览器
DOM:操作文档
JavaScript的书写位置
行内JavaScript
<body><button onclick="alert('笔芯')">点击我</button></body>内部JavaScript
<body><script>alert("你好，我是内部JavaScript");</script></body>外部JavaScript
<script src="./js/my.js"></script>JavaScript的书写位置和CSS的书写位置差不多
JavaScript的输入输出语法
输入语法
prompt('请输入您的年龄：')输出语法
// 1. 文档输出内容document.write('我在页面输出')// 2. 控制台打印输出console.log('我在控制台')// 3.页面弹出警示框alert('我直接弹出')2.变量
什么是变量？
变量是计算机用来存储数据的一个‘容器’，可以让计算机变得有记忆，变量不是数据本身。
变量的基本使用
声明一个变量可以用var let const 但是var的问题很多，现基础用let，后面会说const
// 1. 声明一个变量 let（用于声明变量的关键字） age（变量名）let age// // 2. 赋值 age = 18console.log(age)// 3. 声明的同时直接赋值 变量的初始化let age = 18变量可以一次声明多个变量
使用变量的小案例
声明两个变量并交换两个变量的值
let num1 = "成家";let num2 = "立业";let temp;// 赋值的话都是把右边的值赋值给左边temp = num1;num1 = num2;num2 = temp;console.log(num1);console.log(num2);
变量的命名规则与规范
1.规则
不能使用关键字。
关键字：有特殊含义的字符，JavaScript内置的一些英语词汇。例如：let，var，if等。
只能用下划线，字母，数字，$组成，且数字不能开头。
字母严格区分大小写。
2.规范
起名要有意义
遵守小驼峰命名法
数组
数组是有序的数据的集合，数组的下标从0开始。
//声明一个数组 数组[]
let arr = ['小红', '小明', '小芳', 10]
//使用数组 数组名[索引号]
console.log(arr[0]) // 小红
//数组长度=索引号+1
console.log(arr.length) // 43.常量
使用const声明的变量称为‘常量’
常量不允许重新赋值并且在声明的时候必须初始化（赋值）
命名规范和变量一致
当某个变量一直不会改变的时候，就可以用constr来声明。
4.数据类型
基本数据类型
number 数字型
平常使用的数字就是number数字型，可以是整数，小数，负数，正数。
数据类型的计算主要包括（+求和，-求差，*求积，/求商，%取余）
例如：求一个长为5m宽为2m的长方形的周长和面积
//声明这个长方形的长并赋值let num1 = 5;// 声明这个长方形的宽并赋值let num2 = 2;// 声明这个长方形的周长并求值let sum = 5 * 2 + 2 * 2;// 声明这个长方形的面积并求值let area = 5 * 2;console.log(sum); //14console.log(area);//10string 字符串型
通过单引号（''）,双引号(""),反引号(``)包裹的数据都叫字符串型
console.log(11);//number型console.log(`11`);//string型蓝色为number型 黑色为string型
模板字符串 使用反引号`` 里面包裹 ${} `${变量名} `
let uname = prompt('请输入您的姓名:')let age = prompt('请输入您的年龄:')// 输出document.write(`大家好，我叫${uname}， 我今年${age}岁了`)boolean 布尔型
表示肯定或否定时在计算机中对应的是布尔类型数据
有两个固定的值一个是真（true）一个是假（fales），表示肯定的数据用true，表示否定的数据用false。
console.log(3 > 4);//falesconsole.log(3 < 4);//true
undefined 未定义型
只有一个值undefined。
在只声明变量，不赋值的情况下，变量的默认值为undefined。
let num;console.log(num);//undefined
null 空类型
JavaScript中的null仅仅是一个代表“无”，“空”或“值未知”的特殊值。
官方解释：null作为尚未创建的对象
let obj = null;console.log(obj);//nullnull和undefined的区别：
null表示赋值了，但是内容为空。
undefined表示没有赋值
引用数据类型
object 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
//声明一个对象 声明关键字 对象名={}
let person={
firstname : "John",
lastname : "Doe",
id : 5566
};数据类型的转换
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
+号两边只要有一个是字符串类型，都会把另外一个转换成字符串
除了+以外的算术运算符 比如- * / % 等都会把数据转成数字类型
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串
显示转换
Number(数据) 转换成数字类型
parseInt(数据) 只保留整数
parseFloat(数据) 可以保留小数
String(数据) 转换成字符串类型
变量.toString(进制)
检测数据类型
typeof
typeof运算符可以返回被检查的数据类型。它支持两种语法形式：
1.作为运算符：typeof x（常用的写法）
2.函数的形式：typeof(x)
let num = 10;console.log(typeof num);//numberlet str = "pink";console.log(typeof str);//stringlet str1 = "10";console.log(typeof str1);//stringlet flag = false;console.log(typeof flag);//booleanlet un;console.log(typeof un);//undefinedlet obj = null;console.log(typeof obj);//object
综合案例
用户输入商品价格和商品数量，总价是自动计算
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>h2 {text-align: center;}table {/* 合并相邻边框 */border-collapse: collapse;height: 80px;margin: 0 auto;text-align: center;}th {padding: 5px 30px;}table,th,td {border: 1px solid #000;}</style></head><body><h2>订单确认</h2><script>// 1 用户输入let price = +prompt("请输入商品价格：");let num = +prompt("请输入商品数量：");let address = prompt("请输入收获地址：");// 2.计算总额let total = price * num;// 3.页面打印渲染document.write(`<table><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收货地址</th></tr><tr><td>Xiaomi 10</td><td>${price}元</td><td>${num}</td><td>${total}元</td><td>${address}</td></tr></table>`);</script></body>
</html>
5.运算符
赋值运算符
对变量进行赋值的运算符。=，+=，-=，*=，/=，%=
let num = 1;// num = num + 1 //2// 采取赋值运算符 简化num += 1;//2console.log(num);一元运算符
目前常用的一元运算符：自增（i++）和自减（i--）
let i = 1;i++;console.log(i); //2let sum = 5;sum--;console.log(sum);//4比较运算符
逻辑运算符
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
| && | 逻辑与 | 并且 | 符号两边都为true结果才为true | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个true就为true | 一真则真 |
| ！ | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
判断闰年案例：用户输入一个年份，判断是否为闰年
<script>let year = +prompt("请输入一个年份");if ((year % 4 == 0 && year % 100 !== 0) || year % 400 === 0) {alert(`${year}是闰年`);} else {alert(`${year}是平年`);}</script>运算符优先级
小括号>一元运算符>算术运算符>关系运算符>逻辑运算符
JavaScript基础入门教程相关推荐
- 《2020版JavaScript基础入门教程全集》，助你一臂之力！
当下,随着5G商用正在有序推进,很多传统的前端工程师并不能满足时下企业用人需求了,越来越多的开发模式以及前端框架不断的涌现出来,这也就要求程序员需要不断去自我增值. 前端要学习的东西很多,对于自学的小 ...
- android设置webview缓存目录,Android基础入门教程——7.5.5 WebView缓存问题
Android基础入门教程--7.5.5 WebView缓存问题 Android基础入门教程 本节引言:现在很多门户类信息网站,比如虎嗅,ifanr,钛媒体等等的APP,简单点说是信息阅读类的APP, ...
- Python基础入门教程：Day21-30/Web前端概述
Python基础入门教程:Web前端概述 说明:本文使用的部分插图来自 Jon Duckett 先生的*HTML and CSS: Design and Build Websites*一书,这是一本非 ...
- 【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开 效 ...
- ECharts实现数据可视化超详细基础入门教程
ECharts实现数据可视化超详细基础入门教程 ECharts介绍 ECharts官网:https://echarts.apache.org/zh/index.html ECharts是一款基于Jav ...
- 尚硅谷最新版JavaScript基础全套教程完整版（p79-p90）
尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) 一.函数的方法 1.call()和 apply()方法 -这两个方法都是函数对象方法,需要通过函数对象来调用 ...
- 初学HTML5--盒子模型,5.1 盒子模型 - Adobe Dreamweaver CC零基础入门教程 - 平面设计学院 - 勤学网...
课时:42节课 时长:13.0小时 课级:基础入门 期待已久的Dreamweaver软件教程终于和大家见面啦!老师一贯的细致全面讲解风格,注重每个专业术语的概念介绍和软件实操相结合,帮助大家全面理解掌 ...
- 【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYP ...
- ECMAScript 6.0基础入门教程（一）-ES6基础入门教程
ECMAScript 6.0基础入门教程(一) 1.ES6简介 1.1 ES6的历史 ECMAScript简称ECMA或ES ECMAScript与JavaScript的关系 ECMA是Europea ...
最新文章
- centos命令大全
- 2013河北省职称计算机应用能力考试操作题答案,2013河北省职称计算机应用能力考试操作题步骤详解(部分).doc...
- Secure保存串口数据到本地
- VitrualBox、vagrant、homestead的关系
- 电子计算机系统可以分为几类,电子计算机分为两大类.doc
- python多线程读取数据库数据_python多线程操作MySQL数据库pymysql
- js实现页面跳转重定向的几种方式
- mockito手动注入依赖_依赖注入–手动方式
- 计算机网络应用基础论文,计算机网络应用基础概述论文
- 林斌首曝红米骁龙855旗舰新机：3200万像素弹出式前置摄像头
- devcon 用法2
- ADC SFDR无杂散动态范围
- MCS51单片机的型号与组成
- 虚拟服务器忘记密码,win7系统下VMware虚拟机忘记开机密码的解决方法
- WTL 自绘控件库 (CQsRadioBox)
- 新手看Mockplus2.3
- 芯盾时代完成3亿元C轮融资，宽带资本领投 1
- 邮件服务器安全SPF、DKIM、DMARC
- 世界工厂供应商采集助手【已失效】
- Flash与Flex3结合学习心得体会