关于JavaScript的那点事

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" 即可。


关于JavaScript的那点事_第1张图片
整个框架就构建好了

一些快捷键:

按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.


第一次分享跟技术有关的文章,以后会陆续更新,欢迎小伙伴们一起交流,共同进步。

你可能感兴趣的:(关于JavaScript的那点事)