js01--js基础入门

第一章 JavaScript入门

课程目标

客户端数据计算

客户端表单合法性验证

浏览器对象的调用

浏览器事件的触发

网页特殊显示效果制作

操作HTML元素

购物车

本章目标

1.知道什么是程序

2.知道什么是js

3.掌握js的基本用法

4.变量，运算符

前言

 什么是程序？

        计算机程序（Computer Program), 港、台译做电脑程式。计算机程序是一组计算机能识别和执行的指令，运行于电子计算机上，满足人们某种需求的信息化工具。

生活的案例

 取钱：1.去银行 2.插卡 输密码 3.取钱

编程：模拟现实！

炒菜：番茄炒蛋： 

 1.取鸡蛋两个，番茄一个 取食材

 2.处理食材

 3.起锅烧油

 4.放入食材

 5.翻炒均匀

 6.放入调料

7.翻炒均匀

8.出锅

程序的执行是有一定顺序的！

编程不是凭空想象的：而是根据 实际需求！

第一节：了解编程语言的发展史

1.人工

2.纸袋穿孔

        0没穿孔  1有孔

 3.机器语言：第一代计算机语言成为机器语言。机器语言就是0/1代码。计算机只能识别0和1。01010101010

 4.汇编语言：汇编语言就是将一串很枯燥无味的机器语言转化成一个英文单词

5.高级编程语言：

c        c++        java+paython

        面向过程：C

        面向对象：java

        编程思想。

        面向接口

        面向切面

第二节：JavaS 语言的发展

2.1 js祖师爷 和 javaScript发展历程

 1995.2月 Netscape(网景 导航者)公司发布LiveScript，后临时改为JavaScript，为了蹭 上Java的热浪。 微软：Jscript。

欧洲计算机制造商协会（ECMA）英文名称是European Computer Manufacturers Association

1997 年，以JavaScript 1.1 为基础。由来自 Netscape、Sun、微软、Borland 和其他 一些对脚本编程感兴趣的公司的程序员组成的 TC39（ECMA的小组） 锤炼出了 ECMA-262，也就是ECMAScript1.0。

 1998年6月，ECMAScript 2.0版发布。

1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支 持。

2007年10月，ECMAScript 4.0版草案发布：分歧太大，失败告终。

2009年12月，ECMAScript 5.0版正式发布ES5

2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。

javaScript跟java没有关系。

2.2 为什么需要 javascript

因为早期的网页只能看，非常不方便，数据验证，网页特效。这些都没有，用户体验不 好。

2.3 什么是 JavaScript

        JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的 高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很 多非浏览器环境中。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向 对象、命令式和声明式（如函数式编程）风格。

 是一门解释型高级编程语言 ， 运行在哪里 浏览器中。

解释型：js 弱类型 变量的定义 变量的数据类型不固定。

编译型：java xxx.java ==编译=》 xxx.class 强类型 数据类型固定。

2.4 JavaScript能做什么

客户端数据计算

客户端数据计算

浏览器对象的调用

浏览器事件的触发

网页特殊显示效果制作

2.5 JavaScript和HTML、CSS的关系

HTML CSS 记忆。背住

javaScript （理解）记忆 ，逻辑思维能力。

2.6 JavaScript的组成

ECMA的基本语法

DOM(document Object model)编程

BOM(browser object model)编程

第三节： JavaScript 基本语法

3.1 ECMA 基本语法组成

注释，变量，运算符，数据类型，流程控制，对象

3.2 JavaScript怎么用

使用HBuilder X创建项目

 生成项目效果

 1. 页内脚本

 2. 外部脚本

 区别：

样式表是css < style >< /style > 引入外部样式表使用 < link rel="stylesheet" href="路径"/>

js 是< script>< /script> 引入外部js文件 < script src="路径" >< /script>

3.3 JavaScript 注释

 3.4 JavaScript 变量

3.4.1 什么是变量

        变量来源于数学，是计算机语言中能储存计算结果或能表示值的抽象概念。

        x=5;

        x+5 = 10;

        x就是变量名

        5就是变量的值

        变量可以通过变量名访问。在指令式语言中，变量通常是可变的；

        变量是程序中最小的储存单元。

        

        1TB=1024GB

        1GB=1024MB

        1MB=1024KB

        1KB=1024B

        1B=8bit     8位二进制数   10101010

        变量的存储类比快递柜。

        var  a = 5;

 3.4.2 为什么要用变量

        体现一种间接的思维。

        模拟现实。让代码更方便。

3.4.3 变量的定义和使用  *

        let 定义局部变量

        var 变量作用域的提升

        const 定义常量

         不能使用关键字命名：

                关键字：一门语言中的保留的词，具有属于自己的特殊含义，不能随意使用。 怎么知识哪些是保留语呢，在HBuilderx中看颜色。

        类比 快递柜 编号就是 名字a 里边的快递 就是 5

3.5 JavaScript中的输入输出语句

 3.6 js中数据类型

程序是为了模拟现实，就需要模拟各种场景，所以程序中有数据类型帮助我们对现实更 好的模拟。

分类

原始/基本数据类型：number string boolean null undefined //symbol Object(function Array) ；

 3.7 js中的运算符

3.7.1 算术运算符

 面试题：前置++ 和后置++的区别？

 3.7.2 赋值运算符

 

 

3.7.3 比较远算符

 3.7.4 逻辑运算符

 

 3.7.5 三目运算符

         三目 三元 目 /元 数据 (表达式)。

         一目 ：++ -- 只需要一个数据就可以运算 一目运算符

        二目： +-*/% += -=。。。 需要二个数据就可以运算 二目运算符

        三目：需要三个数据就可以运算 三目运算符

 3.7.6 加号的两种用法

        当两个运算的数据只要有一个字符串 此时 进行拼接运算 不进行数学运算.

 

 3.8 数据类型的转换

案例：

 数据类型的转换：

 

 

 总结：

重点掌握：变量的定义使用，数据类型，++ -- ，字符串的拼接运算,类型转换

练习：

1. 输入一个数字，判断是不是水仙花数 自恋数 ,自幂数（个位的3次方+十位的3次方

        +百位的3次方=数本身 153）——true false即可

一个笼子里有鸡和兔子，头有35，腿有94；输入两个数字，分别代表鸡和兔子的个数， 输出是否是答案。——输出true false即可

 解答

 

 1. 同学聚会，进行点菜，点了大盘鸡 水煮鱼 大虾 以及4个凉菜 1箱啤酒 分别录入各 个单价，并计算总价，录入总学生数，计算人均多少钱。

2.输入一个3/4/5/6位数，判断这个数是不是回文数。121 12321 1234321

3.连续录入五个人的成绩，计算最大成绩 最小成绩和平均成绩。