JS基础-第1天
JavaScript 第一天笔记
学习目标
- 了解Javascript的作用及其组成
- 掌握变量的使用,知道变量的作用是存储数据
- 掌握变量的命名规范
- 掌握 JavaScript 的 5 种简单数据类型
- 掌握 6 种数据类型的显示转换方法
- 掌握算术操作符、比较操作符、逻辑操作符、赋值操作符
- 了解操作符的优先级
阶段学习内容
- JavaScript 基础(6天,语法基础,编程思维,写注释)
- Web API (7天,操作网页)
- JavaScript 高级(5天,面向对象)
- jQuery(4天,快速开发)
学习内容
JavaScript 概述
目标
概念
小结
JavaScript 作用和组成
目标
Web三大标准
JavaScript的组成
- ECMAScript (语法规范,前6天基础学习的)
- DOM (操作网页,写网页特效,WebAPI)
- BOM(操作浏览器,前进后退等,WebAPI)
小结
JavaScript 初体验
目标
js代码写在哪里
- 内嵌式 - 页面的script标签里面
- 外链式 - 写在js文件里面,使用 script标签进行引入
- 行内式 - 事件写法
JS注释语法
- 单行注释
- 多行注释
小结
常用输入输出的方法
目标
语法和作用
- alert() 弹出一个提示框,提示框里面有我们的提示信息
- prompt() 弹出一个输入框,输入框可以提供用户的输入
- console.log() 在控制台输出,控制台就是开发者工具里面的一个功能,一般在elements的旁边。
- document.write() 在body里面输出,如果输出的格式是标签格式,会变成标签(了解)
小结
变量
目标
什么是变量
变量的作用
变量的语法
变量的命名规范
必须遵守
- 不能以数字开头
- 不能以关键字或者保留字命名
- 字母数字组合
- 符号只允许 下划线 和 $
其他建议
- 变量命名要有语义
- 命名建议使用驼峰命名
补充变量的其他知识点
注意:在使用变量的时候,不要在变量的两边加上引号

常见变量报错
SyntaxError - 语法错误 - 你的语法已经写错了,肯定是行不通的报错的右边,会告诉你在第几行出错A is not defined A 这个变量没有定义


小结
- 不能以数字开头 2. 英文数字组合
- 符号 _ $
- 不能使用关键字和保留字
- 驼峰命名
- 变量有语义
数据类型
目标
字符串类型
数值类型
NaN
布尔类型
undefined 和 null
typeof 关键字
小结
数据类型的转换
目标
转换数字型
注意:转换失败返回结果 NaN,代表不是一个数字,无法进行转换。
转换成字符串型
其他类型变成布尔
小结
浏览器中的js如何排错

常见的错误
常用的运算符(操作符)
目标
算术操作符
比较操作符
逻辑操作符
赋值操作符
操作符的优先级
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> </body>
</html> <script> // 运算符的方法
// var number1 = 100;
// var number2 = 200;
// number1 = number1 + number2;
// number2 = number1 - number2;
// number1 = number1 - number2;
// console.log(number1, number2); // 临时变量的方法
var number1 = 100;
var number2 = 200;
var temp = number1;
number1 = number2;
number2 = temp;
console.log(number1,temp);
</script>
交换变量的2种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html> <script>
// 计算工资的js小程序
var salary = prompt("小丽的工资: ");
var bonus1 = prompt("小丽的年终奖: ");
var bonus2 = prompt("小丽的全勤奖: ");
var bonus3 = prompt("小丽的补贴: ");
var bonus4 = prompt("小丽的提成: ");
salary = Number(salary);
bonus1 = Number(bonus1);
bonus2 = Number(bonus2);
bonus3 = Number(bonus3);
bonus4 = Number(bonus4);
result = salary + bonus1 + bonus2 + bonus3 + bonus4;
alert("丽丽的总工资: " + result);
</script>
计算工资
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" onclick="login()" value="点我登录"> <!-- 遇到鼠标点击事件则执行login函数 -->
<input type="button" onclick="loginInfo()" value="查看账户信息"> <!-- 遇到鼠标点击事件则执行loginInfo函数 -->
</body>
</html> <!-- 需求:用户点击登录标签弹出输入框要求输入用户名、密码、手机号,把3个信息存储起来,用户点击查看信息就弹窗显示-->
<script>
var userName, passWord, telNumber; /* 声明全局变量 */
function login() {
userName = prompt("亲,请输入您的用户名: ");
passWord = prompt("亲,请输入您的密码: ");
telNumber = prompt("亲,请输入您的手机号: ");
// alert("亲,您的用户名为:"+ userName + "\n亲,您的密码为:"+passWord+"\n亲,您的手机号为:"+telNumber);
}
function loginInfo() {
alert("亲,您的用户名为:"+ userName + "\n亲,您的密码为:"+passWord+"\n亲,您的手机号为:"+telNumber);
}
</script>
查看登录信息
JS基础-第1天的更多相关文章
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- JS基础(超级简单)
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
- js基础知识总结(2016.11.1)
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
随机推荐
- ElasticSearch、Logstash、Kibana 搭建高效率日志管理系统
ELK (ElasticSearch.LogStash以及Kibana)三者组合是一个非常强大的工具,这里我们来实现监控日志文件并且收到日志到ElasticSearch搜索引擎,利用Kibana可视化 ...
- MPP-解码示例
提取出编码的代码后,现在提取解码例程,供以后需要的时候使用. 完整的解码代码如下,做了一些改动,指令参数全部去除,输入H264数据,解码后的数据保存在本地,官方示例解码后的数据是YUV_420sp和Y ...
- ext当表单中的输入项为必填时,输入项label后显示红色的*
form表单里,当输入项为必填项时,需要将对应item的allowblank属性设置为true,如果item的label后面自带红色的*,表单中哪些输入项是“必填”,哪些输入项是“非必填”,一眼望去清 ...
- samba介绍和安装
samba基本介绍 为什么需要samba 早期网络文件数据在不同主机之间传输大都可以使用Ftp完成,不过ftp使用有个小小的问题,它不能让你之间修改主机上的文件.要想修改必须要通过下载——修改——上传 ...
- 一个简易的kmp教学并给出java实现
简单介绍一下问题 给定source字符串,找出target字符串出现的首位 例如 source 为“abddabddabc” target 为 “abddabc” 从第一位开始比较 |a b d ...
- webapi返回json字符串
第一种 直接在方法中返回json. public class DefaultController : ApiController { [HttpGet] public IHttpActionResul ...
- socket.io 出现的WebSocket is closed before the connection is established
WebSocket is closed before the connection is established 最近socket.io是挺流行的,幼麟棋牌和一些好的开源项目也使用这个框架,在搭建其平 ...
- 使用队列实现栈(2)(Java)
class MyStack { private Queue q1; private Queue q2; public MyStack(int size) { this.q1 = new Queue(s ...
- 正则表达式和re模块
目录 re的元字符 字符集[ ] 转义符 分组 ( ) |符号 re下的常用方法 分组 re的元字符 import re ret = re.findall("e..a", &quo ...
- powershell 常用命令之取磁盘分区信息
//查看mac 地址 PS C:\Users\yyy> get-wmiobject -class Win32_NetworkAdapterConfiguration -namespace &qu ...