HTML----从页面结构,语义上描述页面
CSS------从审美的角度装饰页面
JavaScript--从交互的角度提升页面用户体验
交互:就是网页的元素针对用户的特定行为,产生指定的变化。就是响应事件。
一、什么是JavaScript?
(1)JavaScript 是用来实现交互的。
(2)JavaScript是纯文本的,用任何的纯文本编辑器都能够编辑它(记事本,notepad++、editplus、Dw、sublime)
(3)也是网页的一部分,随着html的请求,JavaScript也随之加载到本地,在本地渲染运行的JavaScript 脚本不保密,所有的代码都可以通过查看源代码获取。
(4)JavaScript、PHP、ASP、JSP区别:
JavaScript和PHP、ASP、JSP完全不同;
JavaScript是运行在 用户的计算机 中的是前台的脚本;PHP、ASP、JSP是运行在服务器上的
JavaScript的功能单一,仅仅用来开发页面效果的;PHP等语言可以与数据库交互、开发网站程序的
有JavaScript的网页是静态网页,不是动态网页(假如一个网页有JavaScript花花绿绿的,他仍然是静态网页,所谓的动态,静态是指:能否与数据库产生交互);只有PHP、ASP、JSP这些网页,才是动态网页。
二、开发工具sublime
打开sublime,是一个空白文档,此时输入“html:xt”,按住快捷键"Ctrl+E" 即可。
一些快捷键:
按CTRL+鼠标滚轮:调整字号;
输入div*5,在按Ctrl+E:就能生成5个div盒子模型;
按鼠标中键(即滚轮):可以多行编辑;
CTRL+shift+K:删除当前行;
CTRL+shift+D:复制当前行;
CTRL+shift+上下键:调整当前行的位置;
CTRL+Alt+[ :可以让CSS格式进行转换(单行/多行)
三、对象、属性、标题
对象:万物皆对象。
所谓的对象,就是一个物体,一个实体。
对象一定是有一个名字的。在JavaScript中也有很多对象,这些对象是天生存在在JavaScript里面,比如:document是一个对象,window也是一个对象。
JavaScript想调用一个对象,非常的简单,直接打他的名字就行。
每个对象负责的事情不一样:document负责一切和文档相关的事情;window负责一切和浏览器窗口相关的事情。
执行什么事情,就要写找准对象
所有的对象都是名词,“美丽”“可爱”“漂亮”都不是对象。
对象是有类型的,猪八戒、孙悟空、二郎神是一类;西瓜、馒头、蟠桃是一类
属性:属性是描述一个对象的。
所以一提到属性,一定是某一个对象。比如:猪八戒这个对象,就有 年龄、性别、身高、性别等属性;西瓜的属性:大小、颜色、重量。
对象或多或少都有属性,属性的不同,对象的不同。
所有的对象都有属性:document对象,title就是document对象的属性,描述的是文档的标题;window对象,location是window对象的属性,描述的是浏览器当前所在的页面URL。
如果你想更改一个对象的属性,就要用语法:对象。属性=“新的值”;等号表示赋值,将等号右边的值赋予左边。这是一个命令,是命令计算机立即执行的。等号不是表示相等,而是命令
正确的语法:document。cookie=“新的值”;(对象。属性=“新的值”)
方法:就是一个对象能够做的行为。比如:猪八戒有睡觉方法、打怪方法、化缘等行为。
JavaScript 中的对象,也都有一些能够做的事情,也都有一定的方法。
比如:widow 对象就有一个alert方法。window对象能够做alert这个事情
命令一个对象立即执行它的方法 的方法:对象。睡觉(“参数”);如:猪八戒。睡觉(“5小时”);那猪八戒就会立即停止手上的工作,进行睡觉。
所谓的“参数”就是一定的配置这个方法的一定的数据。
用户看不见控制台,是为了方便调试程序,我们经常在控制台输出文字。我们要用的对象是 console 对象,调用它的log方法,参数就是要输出的文字,比如:console.log(“哈哈”)
响应事件的一个能力,让一个html元素能够响应事件,就给这个标签加上onclick=“自己起名()”即可。
四、操作页面元素
事件源:有监听的HTML标签,能响应事件的HTML标签,就是事件源。
事件名:用户的特定行为,比如 onclick。
事件的响应:就是一个个function。
事件的响应,就是function,那么编程就是编写事件的响应。响应中,最重要的就是要想清楚被操作的对象。
第一个程序:点击第一个盒子第二个盒子变蓝;
第一个盒子为事件源,第二个盒子称为被操作对象。
getElementById —— 通过Id得到元素
document.getElementById("box2").style.backgroundColor= "blue";
现在要让盒子2变蓝,所以就要让JavaScript得到盒子2这个元素。得到元素的方法,就需要通过Id得到它。
document.getElementById("");这种命名法称为驼峰命名法。
长的一个单词,是由多个单词组成的,第一个单词的首字母小写,之后的每一个单词的字母都大写。很像一个低头吃草的骆驼。
点击一个盒子让另外一个盒子变色。点击谁,谁的身上就有onclick;你要操作谁,谁就必须要有id,书写document.getElementById("")得到它。
找准事件源,用户点击哪个盒子,会有事情发生,这个盒子就是事件源,它身上就有onclick属性,
找准谁是被操作的对象,被操作的对象可能不止一个,并且事件源自己也有可能是被操作的对象,被操作的对象身上一定要有id.
第一次分享跟技术有关的文章,以后会陆续更新,欢迎小伙伴们一起交流,共同进步。
网友评论