javascript基础入门教程ppt课件包

收藏

压缩包目录 预览区
  • 全部
    • javascript基础入门教程ppt课件一.pptx--点击预览
    • javascript基础入门教程ppt课件三.pptx--点击预览
    • javascript基础入门教程ppt课件二.pptx--点击预览
    • javascript基础入门教程ppt课件五.pptx--点击预览
    • javascript基础入门教程ppt课件四.pptx--点击预览
跳过导航链接。
折叠 javascript基础入门教程ppt课件包.zipjavascript基础入门教程ppt课件包.zip
javascript基础入门教程ppt课件一.pptx
javascript基础入门教程ppt课件三.pptx
javascript基础入门教程ppt课件二.pptx
javascript基础入门教程ppt课件五.pptx
javascript基础入门教程ppt课件四.pptx
请点击导航文件预览
编号:5507359    类型:共享资源    大小:7.38MB    格式:ZIP    上传时间:2023-09-09
0
关 键 词:
javascript 基础 入门教程 ppt 课件
资源描述:
JavaScript 基础第一天基础语法1.理解变量是存储数据的“容器”2.理解什么是数据并知道数据的分类3.知道 JavaScript 数据类型转换的特征uJavaScript介绍u变量u常量u数据类型u类型转换u实战案例JavaScript 介绍JavaScript 是什么JavaScript 书写位置JavaScript 的注释JavaScript的结束符输入和输出语法字面量011.1 JavaScript 是什么1.JavaScript(是什么?)是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。2.作用(做什么?)网页特效(监听用户的一些行为让网页作出对应的反馈)表单验证(针对表单数据的合法性进行判断)数据交互(获取后台的数据,渲染到前端)服务端编程(node.js)1.1 JavaScript 是什么3.JavaScript的组成(有什么?)ECMAScript:规定了js基础语法核心知识。p比如:变量、分支语句、循环语句、对象等等Web APIs:pDOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作pBOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等权威网站:MDN JavaScript权威网站:https:/developer.mozilla.org/zh-CN/docs/Web/JavaScriptJavaScriptECMAScriptJavaScript语言基础DOM页面文档对象模型BOM浏览器对象模型Web APIs1.JavaScript是什么?JavaScript是一种运行在客户端(浏览器)的编程语言2.JavaScript组成是什么?ECMAScript(基础语法)、webAPIs(DOM、BOM)点击切换按钮的案例-体验HTML+CSS+JS实现交互效果体验-JavaScriptJavaScript 介绍JavaScript 是什么JavaScript 书写位置JavaScript 的注释JavaScript的结束符输入和输出语法字面量011.2 JavaScript 书写位置l目标:知道如何向页面添加 JavaScriptCSS 位置JavaScript行内样式表内部样式表外部样式表行内JavaScript内部JavaScript外部JavaScript1.2 JavaScript 书写位置直接写在html文件里,用script标签包住规范规范:script标签写在上面拓展:alert(你好,js)页面弹出警告对话框1.内部内部 JavaScript我们将 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。因此,将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。注意事项1.2 JavaScript 书写位置代码写在以.js结尾的文件里语法:语法:通过script标签,引入到html页面中。2.外外部部 JavaScript1.script标签中间无需写代码,否则会被忽略!2.外部JavaScript会使代码更加有序,更易于复用,且没有了脚本的混合,HTML也会更加易读,因此这是个好的习惯。注意事项1.2 JavaScript 书写位置代码写在标签内部语法:语法:注意:此处作为了解即可,但是后面vue框架会用这种模式3.内联内联 JavaScript1.JavaScript三种书写位置?内部外部行内2.注意事项:书写的位置尽量写到文档末尾前面外部js标签中间不要写代码,否则会被忽略页面弹框课堂练习需求:请用外部和内部两种 JavaScript 书写方式,页面弹出:努力,奋斗时间:5分钟举例说明页面弹窗:alert(xxxx)JavaScript 介绍JavaScript 是什么JavaScript 书写位置JavaScript 的注释JavaScript的结束符输入和输出语法字面量011.3 JavaScript 注释目标:会使用两种JavaScript注释方法l单行注释符号:/作用:/右边这一行的代码会被忽略快捷键:ctrl+/l块注释符号:/*/作用:在/*和 */之间的所有内容都会被忽略快捷键:shift+alt+AJavaScript 介绍JavaScript 是什么JavaScript 书写位置JavaScript 的注释JavaScript的结束符输入和输出语法字面量011.4 JavaScript 结束符l目标:了解JavaScript结束符l结束符作用:使用英文的;代表语句结束实际情况:实际开发中,可写可不写,浏览器(JavaScript 引擎)可以自动推断语句的结束位置现状:在实际开发中,越来越多的人主张,书写 JavaScript 代码时省略结束符约定:为了风格统一,结束符要么每句都写,要么每句都不写(按照团队要求.)1.JavaScript注释有那两种方式?单行注释/多行注释/*/2.JavaScript结束符注意点结束符是?分号;结束符可以省略吗?Yes但为了风格统一,结束符要么每句都写,要么每句都不写小结JavaScript 介绍JavaScript 是什么JavaScript 书写位置JavaScript 的注释JavaScript的结束符输入和输出语法字面量011.5 JavaScript 输入输出语法目标:能写出常见 JavaScript 输入输出语法什么是语法:人和计算机打交道的规则约定我们要按照这个规则去写 比如:你吃了吗?我们程序员需要操控计算机,需要计算机能看懂1.5 JavaScript 输入输出语法目标:能写出常见 JavaScript 输入输出语法输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。l输出语法:语法1:作用:向body内输出内容注意:如果输出的内容写的是标签,也会被解析成网页元素语法2:作用:页面弹出警告对话框语法3:作用:控制台输出语法,程序员调试使用1.5 JavaScript 输入输出语法2.输入语法:l语法:l作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字l展示:输入和输入练习需求:时间:5分钟浏览器中弹出对话框:你好 JS页面中打印输出:JavaScript 我来了!页面控制台输出:它会魔法吧1.5 JavaScript 输入输出语法JavaScript 代码执行顺序:按HTML文档流顺序执行JavaScript代码alert()和 prompt()它们会跳过页面渲染先被执行(目前作为了解,后期讲解详细执行过程)JavaScript 介绍JavaScript 是什么JavaScript 书写位置JavaScript 的注释JavaScript的结束符输入和输出语法字面量011.6 字面量目标:能说出什么是字面量在计算机科学中,字面量(literal)是在计算机中描述 事/物 比如:我们工资是:1000 此时 1000 就是 数字字面量黑马程序员 字符串字面量还有接下来我们学的 数组字面量 对象字面量 等等1.JavaScript是什么?JavaScript是一门编程语言,可以实现很多的网页交互效果。2.JavaScript书写位置?内部JavaScript内部JavaScript写到标签上方外部JavaScript-但是标签不要写内容,否则会被忽略3.JavaScript的注释?单行注释/多行注释/*/4.JavaScript的结束符?分号;可以加也可以不加,可以按照团队约定5.JavaScript输入输出语句?输入:prompt()输出:alert()document.write()console.log()uJavaScript介绍u变量u常量u数据类型u类型转换u实战案例变量变量是什么变量基本使用变量的本质变量命名规则与规范022.1 变量是什么?问题1:用户输入的数据我们如何存储起来?答案1:变量2.1 变量是什么?目标:理解变量是计算机存储数据的“容器”1.变量:l白话:变量就是一个装东西的盒子。l通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。l注意:变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。数据1.变量是怎么理解?计算机中用来存储数据的“容器”,简单理解是一个个的盒子。2.变量有什么作用呢?用来存放数据的。注意变量指的是容器而不是数据。3.你还能想到那些生活中的变量?HTML标签教室宿舍变量变量是什么变量基本使用变量的本质变量命名规则与规范022.2 变量的基本使用目标:能够声明一个变量并完成赋值操作1.变量的声明2.变量的赋值2.2 变量的基本使用1.声明变量:要想使用变量,首先需要创建变量(也称为声明变量或者定义变量)语法:声明变量有两部分构成:声明关键字、变量名(标识)let 即关键字(let:允许、许可、让、要),所谓关键字是系统提供的专门用来声明(定义)变量的词语 举例:我们声明了一个age变量age 即变量的名称,也叫标识符2.2 变量的基本使用2.变量赋值:定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=”,然后是数值。注意:是通过变量名来获得变量里面的数据变量字面量2.2 变量的基本使用2.变量赋值:简单点,也可以声明变量的时候直接完成赋值操作,这种操作也称为 变量初始化。1.变量用什么关键字来声明?let2.变量通过什么符号来赋值?=这个符号我们也称为赋值运算符3.开发中我们经常声明的同时可以直接赋值?课堂变量练习需求:1.声明一个变量,用于存放用户购买的商品 数量(num)为 20 件2.声明一个变量,用于存放用户的 姓名(uname)为 张三3.依次控制台打印输出两个变量2.2 变量的基本使用目标:掌握变量的更新以及了解同时声明多个变量的写法3.更新变量:变量赋值后,还可以通过简单地给它一个不同的值来更新它。注意:let 不允许多次声明一个变量。2.2 变量的基本使用4.声明多个变量:变量赋值后,还可以通过简单地给它一个不同的值来更新它。语法:多个变量中间用逗号隔开。说明:看上去代码长度更短,但并不推荐这样。为了更好的可读性,请一行只声明一个变量。1.变量赋值之后如何更新新值?直接给它一个不同的值来更新它2.我们提倡同时声明多个不同的变量吗?不提倡,可读性不好1.变量案例-弹出姓名需求:浏览器中弹出对话框:请输入姓名,页面中输出:刚才输入的姓名分析:输入:用户输入框:内部处理:保存数据:输出:页面打印 prompt()document.write()2.变量案例-交换变量的值需求:有2个变量:num1里面放的是10,num2里面放的是20最后变为num1里面放的是20,num2里面放的是10目的:1.练习变量的使用2.为了后面冒泡排序做准备2.变量案例-交换变量的值分析:1.核心思路:使用一个临时变量用来做中间存储1020num1num2临时变量步骤:1.声明一个临时变量temp2.把num1的值赋值给temp3.把num2的值赋值给num12.变量案例-交换变量的值分析:1.核心思路:使用一个临时变量用来做中间存储1020num1临时变量num2步骤:1.声明一个临时变量temp2.把num1的值赋值给temp3.把num2的值赋值给num14.把temp的值给num2没了临时变量不用自动销毁变量变量是什么变量基本使用变量的本质变量命名规则与规范022.3 变量的本质目标:能够说出变量的本质是什么内存:计算机中存储数据的地方,相当于一个空间变量本质:是程序在内存中申请的一块用来存放数据的小空间 内存18电脑变量变量是什么变量基本使用变量的本质变量命名规则与规范022.4 变量命名规则与规范目标:能写出符合规范的变量名规则:必须遵守,不遵守报错 (法律层面)规范:建议,不遵守不会报错,但不符合业内通识(道德层面)1.规则:不能用关键字关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等只能用下划线、字母、数字、$组成,且数字不能开头字母严格区分大小写,如 Age 和 age 是不同的变量2.规范:起名要有意义遵守小驼峰命名法第一个单词首字母小写,后面每个单词首字母大写。例:userName2.4 变量命名规则与规范以下哪些是合法的变量名?2.4 变量命名规则与规范以下哪些是合法的变量名?变量练习-输出用户信息需求:让用户输入自己的名字、年龄、性别,再输出到网页分析:弹出输入框(prompt):请输入您的姓名(uname):用变量保存起来。:弹出输入框(prompt):请输入您的年龄(age):用变量保存起来。:弹出输入框(prompt):请输入您的性别(gender):用变量保存起来。:页面分别输出(document.write)刚才的3个变量。二.变量拓展-let和var的区别let 和 var 区别:在较旧的JavaScript,使用关键字 var 来声明变量,而不是 let。var 现在开发中一般不再使用它,只是我们可能再老版程序中看到它。let 为了解决 var 的一些问题。var 声明:可以先使用 在声明(不合理)var 声明过的变量可以重复声明(不合理)比如变量提升、全局变量、没有块级作用域等等结论:var 就是个bug,别迷恋它了,以后声明变量我们统一使用 let 1.变量一次只能存几个值?2.如果我想保存一个班里5个人的姓名怎么办?l数组(Array)一种将 一组数据存储在单个变量名下 的优雅方式二.变量拓展-数组变量数组字面量目标:能够声明数组并且能够获取里面的数据l1.声明语法1.1 数组的基本使用l例l数组是按顺序保存,所以每个数据都有自己的编号l计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推l在数组中,数据的编号也叫索引或下标l数组可以存储任意类型的数据1.1 数组的基本使用l2.取值语法l例l通过下标取数据l取出来是什么类型的,就根据这种类型特点来访问数组取值案例需求:定义一个数组,里面存放星期一、星期二 直到星期日(共7天),在控制台输出:星期日3.一些术语:元素:数组中保存的每个数据都叫数组元素下标:数组中数据的编号长度:数组中数据的个数,通过数组的length属性获得1.1 数组的基本使用1.使用数组有什么好处?数组可以保存多个数据2.数组字面量用什么表示?中括号3.请说出下面数组中小米的下标是多少?如何取得这个数据?下标是4获取的写法是names4uJavaScript介绍u变量u常量u数据类型u类型转换u实战案例常量033.常量的基本使用l概念:使用 const 声明的变量称为“常量”。l使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。l命名规范:和变量一致l常量使用:l注意:常量不允许重新赋值,声明的时候必须赋值(初始化)l小技巧:不需要重新赋值的数据使用const let现在实际开发变量声明方式。var以前的声明变量的方式,会有很多问题。const类似于let,但是变量的值无法被修改。uJavaScript介绍u变量u常量u数据类型u类型转换u实战案例数据类型数据类型检测数据类型044.数据类型目标:能说出JS中基本数据类型有哪些计算机世界中的万事万物都是数据。计算机程序可以处理大量的数据,为什么要给数据分类?1.更加充分和高效的利用内存2.也更加方便程序员的使用数据比如:4.数据类型JS 数据类型整体分为两大类:基本数据类型引用数据类型基本数据类型引用数据类型number 数字型string 字符串型boolean 布尔型undefined 未定义型null 空类型object 对象4.数据类型JS 数据类型整体分为两大类:基本数据类型引用数据类型基本数据类型number 数字型string 字符串型boolean 布尔型undefined 未定义型null 空类型4.1 数据类型 数字类型(Number)即我们数学中学习到的数字,可以是整数、小数、正数、负数。JavaScript 中的正数、负数、小数等 统一称为 数字类型。JS 是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认Java是强数据类型 例如 int a=3 必须是整数注意事项4.1 数据类型 数字类型(Number)数字可以有很多操作,比如,乘法*、除法/、加法+、减法-等等,所以经常和算术运算符一起。数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。+:求和-:求差*:求积/:求商%:取模(取余数)开发中经常作为某个数字是否被整除目标目标:能能说出说出JavaScript算术运算符执行的算术运算符执行的优先级优先级顺序顺序同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。JavaScript中优先级越高越先被执行,优先级相同时以书从左向右执行。乘、除、取余优先级相同加、减优先级相同乘、除、取余优先级大于加、减使用()可以提升优先级总结:先乘除后加减,有括号先算括号里面的提问:1.算术运算符有那几个常见的?+-*/%2.算术运算符优先级怎么记忆?先乘除取余,后加减,有小括号先算小括号里面的3.取余运算符开发中的使用场景是?来判断某个数字是否能被整除计算圆的面积需求:对话框中输入圆的半径,算出圆的面积并显示到页面分析:面积的数学公式:*r:转换为JavaScript写法:变量*r*r4.1 数据类型 数字类型(Number)NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果NaN 是粘性的。任何对 NaN 的操作都会返回 NaN 4.1 数据类型 字符串类型(string)通过单引号()、双引号()或反引号()包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。注意事项:1.无论单引号或是双引号必须成对使用2.单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)3.必要时可以使用转义符,输出单引号或双引号4.1 数据类型 字符串类型(string)字符串拼接:场景:+运算符 可以实现字符串的拼接。口诀:数字相加,字符相连模板字符串l使用场景拼接字符串和变量在没有它之前,要拼接变量比较麻烦l语法 (反引号)在英文输入模式下按键盘的tab键上方那个键(1左边那个键)内容拼接变量时,用$包住变量1.JavaScript中什么样数据我们知道是字符串类型?只要用单引号、双引号、反引号包含起来的就是字符串类型2.字符串拼接比较麻烦,我们可以使用什么来解决这个问题?模板字符串,可以让我们拼接字符串更简便3.模板字符串使用注意事项:用什么符号包含数据?反引号用什么来使用变量?$变量名页面输出用户信息案例需求:页面弹出对话框,输入名字和年龄,页面显示:大家好,我叫xxx,今年xx岁了4.1 数据类型 布尔类型(boolean)表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)。4.1 数据类型 未定义类型(undefined)未定义是比较特殊的类型,只有一个值 undefined。什么情况出现未定义类型?只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。工作中的使用场景:我们开发中经常声明一个变量,等待传送过来的数据。如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有数据传递过来。4.1 数据类型 null(空类型)JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值null 和 undefined 区别:lundefined 表示没有赋值lnull 表示赋值了,但是内容为空null 开发中的使用场景:官方解释:把 null 作为尚未创建的对象大白话:将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给个null 1.布尔数据类型有几个值?true和false2.什么时候出现未定义数据类型?以后开发场景是?定义变量未给值就是undefined如果检测变量是undefined就说明没有值传递过来3.null是什么类型?开发场景是?空类型如果一个变量里面确定存放的是对象,如果还没准备好对象,可以放个null数据类型数据类型检测数据类型044.2 控制台输出语句和检测数据类型l控制台输出语句:控制台语句经常用于测试结果来使用。可以看出数字型和布尔型颜色为蓝色,字符串和undefined颜色为灰色3.2 控制台输出语句和检测数据类型2.通过 typeof 关键字获取数据类型typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:1.作为运算符:typeof x(常用的写法)2.函数形式:typeof(x)换言之,有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。uJavaScript介绍u变量u常量u数据类型u类型转换u实战案例类型转换为什么要类型转换隐式转换显式转换055.1 为什么需要类型转换JavaScript是弱数据类型:JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。坑:使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。此时需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。类型转换为什么要类型转换隐式转换显式转换045.2 隐式转换某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。规则:+号两边只要有一个是字符串,都会把另外一个转成字符串除了+以外的算术运算符 比如-*/等都会把数据转成数字类型缺点:转换类型不明确,靠经验才能总结小技巧:+号作为正号解析可以转换成数字型任何数据和字符串相加结果都是字符串5.2 显式转换编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。概念:自己写代码告诉系统该转成什么类型转换为数字型Number(数据)转成数字类型如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字NaN也是number类型的数据,代表非数字parseInt(数据)只保留整数parseFloat(数据)可以保留小数5.2 显式转换编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。概念:自己写代码告诉系统该转成什么类型转换为字符型:String(数据)变量.toString(进制)输入2个数,计算两者的和,打印到页面中1.类型转换的概念类型转换的概念一种数据类型转成别的类型,JavaScript是弱数据类型,很多情况计算的时候,需要转换数据类型2.隐式转换隐式转换系统自动做转换3.显式转换显式转换自己写代码告诉系统转成什么类型Number字符串内容里有非数字得到NaNStringuJavaScript介绍u变量u常量u数据类型u类型转换u实战案例用户订单信息案例需求:用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息分析:使用Scanner键盘录入一个三位数:个位的计算:数值%10123 除以 10(商12,余数为3):十位的计算:数值/10%10123 除以 10(商12,余数为3,整数相除只能得到整数)12 除以 10(商1,余数为2):百位的计算:数值/10/10%10123/10/10%10(123/10 得到12,12 /10 得到1,1%10 得到 1)用户订单信息案例
展开阅读全文
提示  新文库网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:javascript基础入门教程ppt课件包
链接地址:https://www.xinwenku.com/document/5507359.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。新文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知我们立即给予删除!

黔ICP备20002965号-1  在线客服QQ:365045600

Copyright © 2020-2023 www.xinwenku.com All rights reserved 新文库网 版权所有

收起
展开