写在前面:开发环境搭建:WampServer;
代码编辑器:notepad++;自行下载安装;
傻瓜式安装,安装完以后www文件夹下新建项目testPro,如图:
Ps:1,完全没有基础的新手,就不要在这个点上纠结用哪种集成开发环境软件性能更好了,等你达到一定程度,想用什么就用什么;
2,后端开发,前端技术是一定要懂的,学会制作一个复杂程度中等及以上的的静态网页;
3,至于在哪学习,菜鸟教程了解一发,PHP,html+css,Javascript原生的代码基础学习一下,先不要看框架(各种框架,前端框架,后端框架都不要看);
本文将着重用最简单的例子说明前后端交互的问题,暂时先不涉及和数据库的交互,从最基本的开发环境搭建到三大块的基本介绍和三者之间如何交互,PHP,HTML+CSS,JAVASCRIPT;(本文将不会涉及最基本的代码常规知识讲解,只会有重点以及交互你需要注意的知识点的说明);
另,开发这个职业的任何一个功能都有可能有很多种方法去实现,今天的简介只是介绍其中一种可行方法,然后把所有的重要元素串联起来而已;
一:PHP,HTML+CSS,JAVASCRIPT重点介绍版块;
A:HTML;
1)了解HTML5,HTML5的设计目的是为了在移动设备上支持多媒体,互联网的发展要求你的前端代码必须要同时利于移动端设备访问,或者优先移动端展示设计;
2)对于HTML讲两个概念,元素:块级元素:block-level(例:DIV),内联元素:inline(例:SPAN),二者的区别如下图:
在使用默认的样式的前提下,二者展示如上图,块级元素在浏览器显示时,通常会以新行来开始(和结束);下面会在CSS样式里面说如何让块级元素同行显示,内联元素新行展示;
3)HTML 属性之id及class;
(与后期需要配合使用的CSS和JavaScript都有关系:必须完全了解);
Class,为html元素定义一个或多个类名(classname)(类名从样式文件引入);
Id,定义元素的唯一id;
B:CSS;选择器(id及class选择器);
以下用块级元素同行显示,内联元素新行展示实例说明CSS选择器实现这样一个简单的功能;
testPro项目,根目录下新建同级test.htm(如图引入css样式表)以及test.css文件;提示:开发者需要掌握绝对路径以及相对路径;
通过链接访问输出结果如下:
C:JAVASCRIPT:变量,输出(利用id及class选择器输出交互)及循环;
1),JAVASCRIPT变量:在 JavaScript 中我们使用 var 关键词来声明变量;
2)输出方式(常规输出以及利用id及class选择器输出交互);
a:常规输出如下图:
B:利用id及class选择器输出交互如下图:
另JS开发阶段还要知道:console.log(),具体用法第二大部分说交互的时候再说;
3)循环(for循环);
提示:JS和PHP的基础知识,变量,循环,条件语句很多都很相似,可以一起学习,JS学习好对你后期要开发的整个项目会有很大的便利(这不是废话吗,很多编程知识都有很大的相似之处,学会一门编程语言以后,学习另外的编程语言就会很快);
D:PHP;变量与JSON格式的转换;
1) 你需要知道的两个函数:
json_encode:对变量进行 JSON 编码;
json_decode:对 JSON 格式的字符串进行解码,转换为 PHP 变量;
2) JSON概念:JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
3) PHP包含文件:include 和 require 语句;
以上都是交互实例需要使用到的;
具体怎么使用下面具体用实例说明;
二:三者交互实例;
testPro项目根目录下,新建两个PHP文件: index.php,first.php;
first.php文件内定义一个数组;
$arr=array('bmw','vol','aodi','toyota');
?>
Index.php文件内,如下图
第一步:包含first.php文件才可以使用定义的数组(任何文件之间都要有个连接点,不会是凭空就可以使用的,外部CSS ,JS文件也都是要引用的);
第二步:在js 代码中使用php文件中的数组,
var last_arr=<?php echo json_encode($arr);?>;
提示:必须json编码,才能使用服务端的数据,或者直接在php文件json编码也可以的;
第三步:根据id动态显示数组内容;
第四步:for循环展示数组内容;
最后一步console.log输出数组;
输出后显示:
下个课程主要会说明这三项和数据库的交互(原生);