Web前端开发(HTML5+CSS3+JavaScript)课件第9章JavaScript基础1.pptx

Web前端基础技术CSSJSHTML第9章JavaScript基础(1/2)Contents目录JavaScript概述数据类型类型变量与类型转换运算符与表达式程序结构1.

JavaScript概述基于客户端浏览器运行的一种解析型脚本语言(顺序解析执行,无须编译);主要作用:实现与用户的交互;获取或动态更新HTML元素的内容和样式

应用:表单数据获取和验证动态更新HTML内容:添加/移除元素动态改变元素的属性:值、样式;示例第1个JavaScript程序,输出数据目的:1.掌握代码书写位置:内部方式;外部文件方式。2.掌握注释的使用3.掌握调试方法:1)弹出对话框:alert(一个不同类型的数据);如:alert(“ok!”);2)控制台输出:console.log(逗号分隔,多个不同类型数据),如:console.log(“ok!”,100,true);1可以省略type属性内部方式写在head标记内(了解)2写在body标记内(了解)在浏览器按F12中查看输出3通常写在文档最后写在文档末尾,掌握添加firstJS.js文件,在js文件内不需要script标记使用外部js文件,在HTML中使用script标记的src属性引用目的:代码与HTML分离;代码复用。在html文件中引用外部js文件,通常放在HTML文件末尾相当于在script标记中插入外部js文件的内容外部文件方式12二、.数据类型1.Number;2.String;3.Boolean;4.null;5.Undefined;6.Object;7.Function;8.数组Array整数:10进制;8进制;16进制

2进制;如:123

0o120XFF/0xff0B1100浮点数:小数与其他语言学习方法、学习思路相同,从数据类型开始=>变量=>类型转换=>表达式=>程序结构

255|10|62|655351.Number数字:整数和浮点数,通常使用十进制。console.log(0xff,"|",0o12,"|",0o76,"|",0xFFFF)注:结果自动转换为10进制输出示例:在控制台输出不同进制的数字使用单引号或双引号括起来任何字符序列,如:"我在学习JavaScript"'我在学习JavaScript'例如:1.在双引号中使用双引号;2.分行显示console.log("他说:'你好!'")console.log("他说:\"你好!\"

")alert("你的选择是:\n1)A

2)B

varbook={

id:1,

bookName:"三国演义",

price:12.8,

};console.log(book)console.log(book.id,book.bookName,book.price)

示例:定义一个Book对象,保存一本书的信息掌握对象的定义方法{属性名:属性值,…}定义函数的目的是为了共享代码,实现代码复用,其类型名为Function。定义函数的语法为:function函数名(参数列表){

/*程序片段*/}

functionadd(x,y){

returnx+y;

}

varfunc=add//保存函数类型的变量

varz=func(10,20)

//作为add函数使用

数组是特殊的对象,可以使用newArray()方式创建数组,但更简单的方式是使用中括号[]定义数组,例如:vararr=newArray(3)/*定义包含3个元素的数组arr*/定义数组后,可以使用任意下标对元素赋值,数组的长度由最大下标值决定,使用length属性获取数组的长度。没有赋值的数组元素的默认值为undefined(即未赋值)8.数组varx=[]/*定义空数组x,长度是任意的*/x[0]=100/*指定数组下标赋值*/x[100]="ABC"/*指定数组下标赋值,元素的类型可以不同*/console.log(x[0],x[100])/*输出结果为:100ABC*/console.log(x[2])/*输出结果为:undefined*/console.log(x.length)/*输出长度,结果为101*/vary=[1,2,3]/*定义的同时初始化数组y*/通常我们会使用中括号[]语法来定义对象,例如:掌握数组的定义方法[元素1,元素2,…]

示例:定义一个books数组,保存多本书的信息掌握数组的定义方法[元素1,元素2,…]试一试试一试1.理解练习:编程测试

2.理解练习:编程测试测试以下表达式,使用你的调试方法输出结果varbol=NaN==NaN=>bol=varx;x==undefinedy==undefined=>?typeof(y)==‘undefined’//是否是存在的类型,是/否99==“99a”//默认将字符串使用Number转换为数字进行比较99==‘99’结果是?值/值;值/引用会转换为值类型比较;而两者均为引用时作为对象比较1.下面哪个不是JavScript的注释符A.//

B./**/

C.

D.全是2.JavaScrip代码的使用方式包括:A.内嵌方式

B.内部方式

C.外部文件方式

D.全是3.console.log方法的主要作用是在浏览器的控制台输出调试信息A.正确

THE END
1.基于htmlcssjavascript的网页代码上述代码展示了一个简单的HTML网页结构。网页由头部、主体和底部组成,头部包含标题,主体则留出了展示内容的区域。 二、样式设计 接下来,我们使用CSS(层叠样式表)来美化我们的网页。下面是一些简单的样式设置: body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}header{background-cohttps://blog.51cto.com/u_16213403/12049365
2.cssjs搭建网页个人博客网页设计html+css+js<scriptsrc="script.js"></script><!-- 引入 JavaScript 文件 --> </body> </html> css文件代码 body{ background-color:#f0f0f0;/* 背景颜色 */ font-family: Arial, sans-serif; margin:0; padding:0; } .header-title{ background-color:#007BFF;/* 蓝色背景 */ https://blog.csdn.net/2303_76486879/article/details/144355137
3.前端开发HTML+CSS+JavaScript前端三剑客的基础知识体系了解当然这里的页面的标签小编这里是截取不到了; 1.4HTML常见的标签 1.段落标签 在HTML中, 段落, 换?这里的语言主要是用作交互的操作,他与HTML和CSS的关系如下所示: 解释具体: ? HTML: 的结构代码如下所示: 代码语言:javascript 复制 <body> <script src="jquery.js" ></script> <input tyhttps://cloud.tencent.com/developer/article/2468810
4.HTML+CSS+JS实现的简单应用小案例分享javascript技巧这篇文章主要为大家分享四个用HTML+CSS+JS实现的简单应用小案例,有:猜数字、表白墙、切换日夜间模式和待办事项,需要的可以参考一下+ 目录 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!【 如果你想靠AI翻身,你先需要一个靠谱的工具!】 1.猜数字 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 https://www.jb51.net/article/238595.htm
5.基于html+css+js实现简易计算器代码实例css教程下面我将详细讲解如何基于html+css+js实现简易计算器代码实例。 下面我将详细讲解如何基于html+css+js实现简易计算器代码实例。 HTML部分 首先,我们需要创建一个HTML页面,代码如下: <!DOCTYPE html><html><head><metacharset="UTF-8"><title>简易计算器</title><linkrel="stylesheet"href="style.css"></head>https://www.genban.org/teach/teach-63914.html
6.好看的前端计算器代码分享(html+css+js制作计算器)简介:这里分享的html+css+js制作的几个计算器代码。 第一个 demo演示 <!DOCTYPE html> <html> <head> <title>计算器</title> <style type="text/css"> body { background-color: #F5F5F5; font-family: Arial, sans-serif; } h1 { text-align: center; margin-top: 50px; } .container { widthhttps://developer.aliyun.com/article/1420960
7.HTML+CSS+JS网页设计期末课程大作业(家居网)HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 二、作品效果 视频演示 https://live.csdn.net/v/embed/239867 https://www.jianshu.com/p/8613379bc3b8