JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目1 使用JavaScript基础语法实现动态显示时间(任务2-知识储备)

项目1搭建智慧公寓网站首页任务1-2使用JavaScript基础语法实现动态显示时间1HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务效果

HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势知识储备变量与常量：变量的定义、变量的声明与赋值、变量的命名规则以及常量的声明与赋值等数据类型：数据类型分类与数据类型检测表达式与运算符：表达式分类与运算符分类函数：JavaScript内置函数与自定义函数的定义与调用BOM：window对象的常用方法和属性HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.1变量和常量1.变量（1）声明变量vara;//声明变量但未初始化赋值varaa='HelloWorld!';//声明变量且初始化赋值letb='HelloJavaScript!';//声明变量且初始化赋值ECMAScript6新增的let命令声明变量时，其用法与var命令类似。但let命令声明的变量具有块级作用域，不存在变量提升机制，可产生暂时性死区效果，不可在同一作用域下重复声明同名变量。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.1变量和常量1.变量（2）变量的命名规则变量名不能是JavaScript的关键字或保留字。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.1变量和常量1.变量（2）变量的命名规则第1个字符，可以是任意字母、下画线（_）、美元符（$）。第2个字符及后面的字符，除了字母、下画线（_）和美元符（$），还可以用数字0~9。中文也是合法的变量名，但在变量命名中应尽量避免使用。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.1变量和常量2.常量在JavaScript编程中，常量是那些一旦赋值后就不能被重新修改的数据。在JavaScript中，常量的声明通常使用const命令。与变量不同，const命令声明的常量不可改变，且必须在声明的同时对常量进行初始化赋值。在JavaScript中声明常量的语法格式如下所示。consta=10;HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.2数据类型基本数据类型：数字（Number）、布尔（Boolean）、字符串（String）、Null与Undefined；引用数据类型：对象（Object）数组（Array）和函数（Function）；HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.2数据类型（1）number：在JavaScript中，number类型用于表示数字类型的数据，它能够存储数字。varfoo=123;//数字类型的整型varbar=3.14;//数字类型的浮点型（2）Boolean：在JavaScript中，Boolean类型用于表示布尔值类型。布尔值只有两个可选值：真值（true）和假值（false），表示事物的“真”和“假”。varfoo1=true;//为变量foo1赋一个布尔类型的值truevarfoo2=false;//为变量foo2赋一个布尔类型的值falseHTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.2数据类型（3）String：字符串由零个或者多个字符构成，字符包括字母、数字、标点符号和空格，它是JavaScript用来表示文本的数据类型。字符串必须放在单引号('')或者双引号("")中，字符串的引号必须用半角字符，且字符串必须写在一行中。varfoo1='hello';//字符串类型varfoo2="123";//字符串类型【例1-10】使用字符串引号演示字符串引号的多种使用方法HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.2数据类型2.数据类型检测JavaScript提供的typeof操作符进行数据类型检测，typeof操作符将以字符串形式返回检测结果。typeof需要进行数据类型检测的数据;typeof(需要进行数据类型检测的数据1,需要进行数据类型检测的数据2...);【例1-11】使用typeof检测数据类型，演示使用typeof操作符检测数据类型HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.3表达式与运算符1.表达式（1）主表达式最简单的表达式称为主表达式(PrimayExpression)，即那些独立存在，不再包含更简单表达式的表达式。a//表达式a3.14//表达式3.14'JavaScript'//表达式'JavaScript'true//表达式truefalse//表达式falsenull//表达式nullHTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.3表达式与运算符1.表达式（2）复杂表达式复杂表达式由简单表达式及运算符构成，主要包括赋值表达式、算术表达式、字符串表达式等，语法格式如下所示。1+1//算术表达式letsum=1+1;//赋值表达式：将表达式1+1的值赋值给变量sumletgreeting="Hello,"+"world!";//字符串表达式HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.3表达式与运算符2.运算符对存储在变量中的数据执行各种运算操作需要使用运算符，这些运算符能够指导程序执行特定的运算或逻辑操作。本节将介绍JavaScript中常用的算术运算符、赋值运算符、比较运算符、逻辑运算符与三元运算符等。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.3表达式与运算符2.运算符（1）算术运算符用于执行基本的数学运算，如加法、减法、乘法、除法等。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.3表达式与运算符2.运算符（2）赋值运算符：简单赋值与复合赋值运算符1）简单赋值运算符：将赋值运算符（=）右边表达式的值保存到左边的变量中vara=1;//简单赋值运算符2）复合赋值运算符：结合了赋值和算术运算或位运算的功能，例如，+=、-=、*=、/=、%=vara=1;a+=4;//复合赋值运算符，等价于a=a+4;HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.3表达式与运算符2.运算符（3）比较运算符比较运算符用于比较两个值，返回一个布尔值，表示是否满足比较条件。满足条件则返回true，不满足条件则返回false。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.3表达式与运算符2.运算符（4）逻辑运算符逻辑运算符常用于对布尔型的数据进行操作，当操作数都是布尔值时，返回值也是布尔值；当操作数不是布尔值时，运算符“&&”和“！”的返回值就是一个特定的操作数的值。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.4函数函数用于封装一段完成特定功能的代码，相当于将包含一条或多条语句的代码块“包裹”起来，用户在使用时只需关心参数和返回值，就能完成特定的功能。JavaScript中函数分为内置函数（也叫系统函数）和自定义函数。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.4函数1.内置函数：可以直接使用的函数，常用内置函数：数学函数、字符串处理函数以及日期处理函数。（1）数学函数用于执行各种数学运算和操作【例1-15】使用Math.max()方法和Math.min()方法计算一组数“1,3,8,55”的最大值和最小值。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.4函数1.内置函数（2）字符串函数用于执行各种数学运算和操作【例1-16】使用concat()方法连接字符串“Java”和“Script”。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.4函数1.内置函数（3）日期函数日期函数主要分为获取日期和时间的函数与设置日期和时间的函数。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.4函数1.内置函数（3）日期函数【例1-17】使用JavaScript内置的日期函数设置和获取日期，并将获取到的日期渲染到页面中。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.4函数2.自定义函数（1）自定义函数function函数名([参数1,参数2,…]){函数体}在上述语法格式中，函数是由function关键字、函数名、参数和函数体4部分组成的。其中function关键字是定义函数的关键字；函数名中可以包含字母、数字、下画线（_）和美元符号（$），但不能以数字开头，也不能是JavaScript的保留关键字；parameters是传递给函数的参数列表，参数是外界传递给函数的值，此时的参数称为形参，它是可选的，多个参数之间使用“,”分隔；函数体是花括号{}包裹的代码块，其中包含了实现函数功能的所有代码。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势1.2.4函数2.自定义函数（2）调用自定义函数当函数定义完成后，要想在程序中发挥函数的作用，需要调用这个函数。函数的调用非常简单，只需通过“函数名()”的方式即可调用，小括号中可以传入参数。函数名称([参数1,参数2,…])HTML5的优势

解决了跨浏览器的问题