JavaScript入门系列之知识点总结


Posted in Javascript onMarch 24, 2016

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

一、准备工作:

1、为什么学习JavaScript

所有的主流浏览器都只是Javascript

大部分网页都使用Javascript

它可以让网页呈现各种动态效果

易学

2、如何插入JS

<script>标签要成对出现,并把JavaScript代码写在<script></script>之间。

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

3、引用JS外部文件

可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js
在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。

<script src="script.js"></script>

4、JS在页面中的位置

javascript作为一种脚本语言可以放在html页面中任何位置,我们一般放在网页的head或者body部分。但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。

5、语句和符号

每一句JavaScript代码格式: 语句;

6、注释方法

单行注释,在注释内容前加符号 “//”。

多行注释以"/*"开始,以"*/"结束。

7、变量

定义变量使用关键字var,语法如下:

var 变量名

变量名可以任意取名,但要遵循命名规则:

1.变量名必须使用字母或者下划线(_)开始。

2.变量名必须使用英文字母、数字、下划线(_)组成。

3.变量名不能使用JavaScript关键词与JavaScript保留字。

8、判断语句(if...else)

语法:

if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

9、函数

function 函数名()
{
函数代码;
}

说明:

1. function定义函数的关键字。

2. "函数名"你为函数取的名字。

3. "函数代码"替换为完成特定功能的代码。

函数调用:

函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了

二、常用互动方法

1、输出内容(document.write)

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

第一种:输出内容用“”括起,直接输出""号内的内容。

第二种:通过变量,输出内容

第三种:输出多项内容,内容之间用+号连接。

第四种:输出HTML标签,并起作用,标签使用“”括起来。

2、警告(alert消息对话框)

弹出一个小窗口,上面写着一段提示信息文字(alert弹出消息对话框(包含一个确定按钮)):alert(字符串或变量);

注意:

1. 在点击对话框"确定"按钮前,不能进行任何其它操作。

2. 消息对话框通常可以用于调试程序。

3. alert输出内容,可以是字符串或变量,与document.write 相似。

3、确认(confirm消息对话框)

弹出对话框(包括一个确定按钮和一个取消按钮)。confirm(str);

参数说明:

str:在消息对话框中要显示的文本

返回值: Boolean值

返回值:

当用户点击"确定"按钮时,返回true

当用户点击"取消"按钮时,返回false

注: 通过返回值可以判断用户点击了什么按钮

注: 消息对话框是排它的,即用户在点击对话框按钮前,不能进行任何其它操作。

4、提问(prompt消息对话框)

弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)prompt(str1, str2);

参数说明:

str1: 要显示在消息对话框中的文本,不可修改

str2:文本框中的内容,可以修改

返回值:

1. 点击确定按钮,文本框中的内容将作为函数返回值

2. 点击取消按钮,将返回null

注:在用户点击对话框的按钮前,不能进行任何其它操作。

5、打开新窗口(window.open)

open() 方法用于打开一个新的窗口:window.open(<URL>, <窗口名称>, <参数字符串>)

参数说明:

URL:打开窗口的网址或路径。

窗口名称:被打开窗口的名称。

可以是"_top"、"_blank"、"_selft"等。

参数字符串:设置窗口参数,各参数用逗号隔开。(top,left,width,height,menubar,toolbar,scrollbars,status)

注意:

1.参数之间逗号及等号前后有空格,该字符串无效,只有删除空格才能正常运行。

2.运行结果考虑浏览器兼容问题。

6、关闭窗口(window.close)

window.close(); //关闭指定窗口

<窗口对象>.close();

三、DOM操作

1、认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、

属性和文本的树结构(节点树)。

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

2、通过ID获取元素

document.getElementById(“id”)

注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

3、innerHTML属性

.innerHTML 属性用于获取或替换 HTML 元素的内容。

Object.innerHTML

1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2.注意书写,innerHTML区分大小写

4、改变HTML样式

Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。
基本属性表(property);

backgroundColor/height/width/color/font/fontFamily/fontSize

5、显示和隐藏(Display属性)

Object.style.display = value

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value取值:

none:此元素不会被显示(隐藏)

block:此元素将显示为块级元素(显示)

6、控制类名(className属性)

设置或返回元素的class属性

object.className = classname

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

Javascript 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
jquery easyui使用心得
Jul 07 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
JS实现支持Ajax验证的表单插件
Mar 24 #Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 #Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 #Javascript
js+css实现select的美化效果
Mar 24 #Javascript
基于jQuery Ajax实现上传文件
Mar 24 #Javascript
Angular.js如何从PHP读取后台数据
Mar 24 #Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 #Javascript
You might like
PHP HTML代码串截取代码
2008/12/29 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
js 深拷贝函数
2008/12/04 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python pandas常用函数详解
2018/02/07 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python遍历路径破解表单的示例
2020/11/21 Python
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
大学生标准推荐信范文
2013/11/25 职场文书
党员干部承诺书
2014/03/25 职场文书
碧霞祠导游词
2015/02/09 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
Python加密与解密模块hashlib与hmac
2022/06/05 Python