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的规划():避 ...
随机推荐
- 新坑:c#弄微信公众号
微信公众号作为一个平台级别的产品,对商业应用来说,有很大的吸引力.如何让公众号更好的吸粉?靠内容不是一般小商户可以做到的,那是网红自媒体的强项.一般商户要怎么突围?那就是提供实用,有意义的功能给粉丝. ...
- nginx常用场景
1.浏览器缓存 server { listen 8083; server_name 127.0.0.1; sendfile on; access_log /var/log/nginx/static_s ...
- Django的URL调度
1.URLconf (URL configuration):(Django版本1.11.20,其它版本可能各有差异.) 在Django中Python后端与前端URL进行交互,是通过一个名为urlcon ...
- liteos简介(一)
LiteOS是在2015华为网络大会上华为发布的敏捷网络3.0中的一个轻量级的物联网操作系统,LiteOS体积只有10KB级. 在Hi3559A中,liteos是用于Cortex-A53,用于处理MP ...
- Golang学习:sublime text3配置golang环境
最近导师让学习golang, 然后我就找了些有关golang的学习视频和网站. 昨天在电脑上下载了go tools, 之后在sublime上配置了golang的运行环境.By the way, 我的电 ...
- robotFramework第二篇之关键字的定义和使用
lesson.robot *** Keywords *** 打开谷歌浏览器并访问百度首页 Log 打开浏览器,输入http://www.baidu.com,进入百度首页 输入用户名 [Argument ...
- jquery中Json操作
在开发中,我们有可能拿到的不是全的json,而是一部分json格式的数据,这个时候我们需要将其强转为json对象 第一种方法:使用jquery中的$.parseJSON(),但是它对json数据格式的 ...
- 逆向学习-Upack的PE文见头分析
重叠文件头 MZ文件头与PE文件头重叠. offest 0 e_magic:magic number = 4D5A('MZ') offest 3C e_lfanew:File address of ...
- SpringCloud-Ribbon服务调用(三)
SpringCloud-Ribbon服务调用(三) https://www.cnblogs.com/qdhxhz/p/9568481.html 一.商品中心服务端 创建商品中心服务端:服务提供方(被调 ...
- Linux(Ubuntu)使用日记------部署JavaWeb项目到服务器
0.前言 本博文内容是建立在你可以通过SSH连接到远程服务器的基础上的,如果你还没有用SSH连接到远程服务器,请参考此文(腾讯云服务器): http://www.cnblogs.com/hwtblog ...