文档库 最新最全的文档下载
当前位置:文档库 › javascript入门篇—知识总结

javascript入门篇—知识总结

javascript入门篇—知识总结
javascript入门篇—知识总结

为什么学习JavaScript

一、你知道,为什么JavaScript非常值得我们学习吗?

1. 所有主流浏览器都支持JavaScript。

2. 目前,全世界大部分网页都使用JavaScript。

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

4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。

二、易学性

1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序。

2.我们可以用简单命令,完成一些基本操作。

三、从哪开始学习呢?

学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作。

新朋友你在哪里(如何插入JS)

我们来看看如何写入JS代码?你只需一步操作,使用之间。

之间的是文本类型(text),ja vascript是为了告诉浏览器里面的文本是属于JavaScript语言。

我也可以独立(引用JS外部文件)

通过前面知识学习,我们知道使用

找到你的位置(JS在页面中的位置)

我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。放在部分

最常用的方式是在页面中head部分放置

例子中的alert("hello!");就是一个JavaScript语句。

一行的结束就被认定为语句的结束,通常在结尾加上一个分号";"来表示语句的结束。

看看下面这段代码,有三条语句,每句结束后都有";",按顺序执行语句。

注意:

1.“;”分号要在英文状态下输入,同样,JS中的代码和符号都要在英文状态下输入。

2. 虽然分号“;”也可以不写,但我们要养成编程的好习惯,记得在语句末尾写上分号。

注释很重要

注释的作用是提高代码的可读性,帮助自己和别人阅读和理解你所编写的JavaScript代码,注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。

我们为了方便阅读,注释内容一般放到需要解释语句的结尾处或周围。

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

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

什么是变量

什么是变量? 从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。

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

var变量名

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

1.变量必须使用字母、下划线(_)或者美元符($)开始。

2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

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

变量要先声明再赋值,如下:

varmychar;

mychar="javascript";

varmynum = 6;

变量可以重复赋值,如下:

varmychar;

mychar="javascript";

mychar="hello";

注意:

1. 在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量。

2. 变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。

判断语句(if...else)

if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。语法:

if(条件)

{ 条件成立时执行的代码 }else

{ 条件不成立时执行的代码 }

假设我们通过年龄来判断是否为成年人,如年龄大于等于18岁,是成年人,否则不是成年人。代码表示如下:

什么是函数

函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。

如何定义一个函数呢?基本语法如下:

function 函数名()

{

函数代码;

}

说明:

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

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

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

我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字:“add2”,代码如下:

function add2(){

var sum = 3 + 2;

alert(sum);

}

函数调用:

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

输出内容(document.write)

document.write()可用于直接向HTML 输出流写内容。简单的说就是直接在网页中输出内容。第一种:输出内容用“”括起,直接输出""号内的内容。

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

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

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

关于JS输出空格问题,请查看wiki中" JS如何输出空格 "

警告(alert 消息对话框)

我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。

语法:

alert(字符串或变量);

看下面的代码:

注:alert弹出消息对话框(包含一个确定按钮)。

结果:按顺序弹出消息框

注意:

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

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

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

确认(confirm 消息对话框)

confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

语法:

confirm(str);

参数说明:

str:在消息对话框中要显示的文本返回值: Boolean值

返回值:

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

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

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

看下面的代码:

结果:

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

提问(prompt 消息对话框)

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。

语法:

prompt(str1, str2);

参数说明:

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

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

返回值:

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

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

看看下面代码:

varmyname=prompt("请输入你的姓名:");

if(myname!=null)

{ alert("你好"+myname); }

else

{ alert("你好 my friend."); }

结果:

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

打开新窗口(window.open)

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法:

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。

窗口名称:可选参数,被打开窗口的名称。

1.该名称由字母、数字和下划线字符组成。

2."_top"、"_blank"、"_selft"具有特殊意义的名称。

_blank:在新窗口显示目标网页

_self:在当前窗口显示目标网页

_top:框架网页中在上部窗口中显示目标网页

3.相同name 的窗口只能创建一个,要想创建多个窗口则name 不能相同。

https://www.wendangku.net/doc/515566843.html, 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:

例如:打开https://www.wendangku.net/doc/515566843.html,网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

注意:运行结果考虑浏览器兼容问题。

关闭窗口(window.close)

close()关闭窗口

用法:

window.close(); //关闭本窗口

<窗口对象>.close(); //关闭指定的窗口

例如:关闭新建的窗口。

注意:上面代码在打开新窗口的同时,关闭该窗口,看不到被打开的窗口。

认识DOM

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

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1. 元素节点:上图中、、

等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如

  • ...
  • 中的JavaScript、DOM、CSS等文本。

    3. 属性节点:元素属性,如标签的链接属性href="https://www.wendangku.net/doc/515566843.html,"。

    看下面代码:

    JavaScript DOM

    通过ID获取元素

    学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

    语法:

    document.getElementById(“id”)

    看看下面代码:

    结果:null或[object HTMLParagraphElement]

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

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

    语法:

    Object.innerHTML

    注意:

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

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

    我们通过id="con"获取

    元素,并将元素的内容输出和改变元素内容,代码如下:

    结果:

    JavaScript常用知识点

    1、GET和POST的区别,何时使用POST? GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符 POST:一般用于修改服务器上的资源,对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值, 也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。 然而,在以下情况中,请使用POST 请求: 无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制) 发送包含未知字符的用户输入时,POST 比GET 更稳定也更可靠JavaScript是客户端和服务器端脚本语言,可以插入到HTML页面中,并且是目前较热门的Web开发语言。同时,JavaScript也是面向对象编程语言。 类似的基本题目还包括:JavaScript都有哪些类型?JavaScript是谁发明的?……2、列举Java和JavaScript之间的区别? Java是一门十分完整、成熟的编程语言。相比之下,JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖,而是针对不同的意图而设计的。Java是一种面向对象编程(OOPS)或结构化编程语言,类似的如C ++或C,而JavaScript是客户端脚本语言,它被称为非结构化编程。

    3. JavaScript和ASP脚本相比,哪个更快? JavaScript更快。JavaScript是一种客户端语言,因此它不需要Web服务器的协助来执行。另一方面,ASP是服务器端语言,因此总是比JavaScript慢。值得注意的是,Javascript现在也可用于服务器端语言(nodejs)。 4、什么是负无穷大? 负无穷大是JavaScript中的一个数字,可以通过将负数除以零来得到。 5、如何将JavaScript代码分解成几行吗? 在字符串语句中可以通过在第一行末尾使用反斜杠“\”来完成 例:document.write(“This is \a program”); 如果不是在字符串语句中更改为新行,那么javaScript会忽略行中的断点。

    个人心得avascript总结

    个人心得avascript总结 1、javascript是一种基于对象,和事件驱动的并具有安全性的脚本语言;基于对象,动态语言,无需编译,直接解释执行; 2、可以放在的地方;A、中,一对之间;B、单独文件中C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字; 4、javascript基本语法:4.1标识:大小写字母,数字,下划线,和美元符号:不能以数字开头;4.2javascript严格区分大小写4.3 每条语句必须以分号结束;(不写,一般没事,但是可能会引起不必要的歧义)4.4多行注释/**/单行注释: //4.5Functiontest(){Vari=100;//不加var就会自动变成全局变量,这样在以后会产生冲突;Alert(i);}Test();5、数据类型:(数字,boolean,String字符串;日期什么的是对象了)特殊值:NaN,Infinity,函数isNaN();isFinite();Boolean,取值只能是true,和false全是小写逻辑运算符vara=100;varb=0;varc=a||b;alert(c);//返回值是100:就是当两边返回值都是false时,返回第一个或最后一个不为false的值;6、什么值在javascript中是false?逻辑运算中,0,“”,false,null,undefined,NaN均表示false6.1想要赋个默认值:怎么办? functiontest(e){e=e||newobject();if(https://www.wendangku.net/doc/515566843.html,!=ang){alert(e);}}test(3);看这里:Varsth=test;//相当于将函数赋给一个变量,这个变量之后可以传参运行了;Alert(sth(100));7、javascript中的系统函数:

    javaScript重点知识总结

    1、JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用window.alert()弹出警告框。 使用document.write()方法将内容写到HTML 文档中。 使用innerHTML写入到HTML 元素。 使用console.log()写入到浏览器的控制台。 实例: document.getElementById("demo").innerHTML = "段落已修改。"; document.write("

    这是一个标题

    ");//write可以直接写入格式! 2、JavaScript 数据类型 var length = 16; // Number 通过数字字面量赋值var points = x * 10; // Number 通过表达式字面量赋值var lastName = "Johnson"; // String 通过字符串字面量赋值var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; 3、JavaScript事件

    HTML 事件可以是浏览器行为,也可以是用户行为。 以下是HTML 事件的实例: HTML 页面完成加载。 HTML input 字段改变时。 HTML 按钮被点击。 右图是常见的事件(前面都有on) 事件有三种写法,举onclick为例: //后面再写函数实现方式。 4、JavaScript 字符串 var carname = "Volvo XC60"; var character = carname[7]; //字符串的索引从0 开始 JavaScript本身对单引号还是双引号没有区别。一般都用双引号,两个都存在时,再考虑。

    JavaScript复习题

    复习题1 一、选择题 1、写“Hello World”的正确javascript语法是 A. ("Hello World") B. "Hello World" C. ("Hello World") D. ("Hello World") 2、JS特性不包括( ) A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的 (i==0)(i=0) i==0 then i=0 then 4、下列JavaScript的循环语句中( )是正确的 (i<10;i++) (i=0;i<10) i=1 to 10 (i=0;i<=10;i++) 5、下列的哪一个表达式将返回假 A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件 7、有语句“var x=0;while(____) x+=2;”,要使while循环体执行10次,空白处的循环判定式应写为: A.x<10 B. x<=10 <20 <=20 8、JS语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 +a2=30 +a2=1020+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是( ) 、以下( )表达式产生一个0~7之间(含0,7)的随机整数. . floor()*8) 11、产生当前日期的方法是( ) (); () Date() Now() 12、如果想在网页显示后,动态地改变网页的标题( ) A.是不可能的 B.通过(“新的标题内容”) C. 通过=(“新的标题内容”) D. 通过(“新的标题内容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法是()

    个人心得javascript总结模板

    个人心得javascript总结模板 个人心得javascript总结模板 篇一:个人心得javascript总结 1、javascript 是一种基于对象,和事件驱动的并具有安全性的脚本语言;基于对象,动态语言,无需编译,直接解释执行; 2、可以放在的地方; A、中,一对 之间; B、单独文件中 C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字; 4、javascript基本语法: 4.1 标识:大小写字母,数字,下划线,和美元符号:不能以数字开头; 4.2 javascript严格区分大小写 4.3 每条语句必须以分号结束;(不写,一般没事,但是可能会引起不必要的歧义) 4.4 多行注释**单行注释: 4.5 Function test(){ Var i=100;不加var 就会自动变成全局变量,这样在以后会产生冲突;

    Alert(i); } Test(); 5、数据类型:(数字,boolean,String字符串;日期什么的是对象了) 特殊值:NaN,Infinity,函数isNaN();isFinite(); Boolean,取值只能是true,和false 全是小写 逻辑运算符 var a=100; var b=0; var c=a||b; alert(c);返回值是100:就是当两边返回值都是false时,返回第一个或最后一个不为false的值; 6、什么值在javascript中是false? 逻辑运算中,0,“”,false,null,undefined,NaN均表示false 6.1想要赋个默认值:怎么办? function test(e){ e=e||new object(); if(https://www.wendangku.net/doc/515566843.html,!='ang'){ alert(e);}} test(3); 看这里: Var sth=test;相当于将函数赋给一个变量,这个变量之后可以传参运行

    Bootstrap知识简单归纳

    Bootstrap 响应式实用工具---目前只适用于块和表切换 Bootstrap 字形图标(Glyphicons) 什么是字形图标(Glyphicons)? 字形图标(Glyphicons)是在Web 项目中使用的图标字体。 字形图标(Glyphicons)列表 点击这里,查看可用的字形图标(Glyphicons)列表 用法 如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 在线定制字形图标(Glyphicons) 点击这里,在线定制字形图标(Glyphicons)。 插入符 使用插入符表示下拉功能和方向。使用带有class caret 的 元素得到该功能。 关闭图标 使用通用的关闭图标来关闭模态框和警告框。使用class close 得到关闭图标。 快速浮动 您可以分别使用class pull-left 或pull-right 来把元素向左或向右浮动。下面的实例演示了这点。 如需对齐导航栏中的组件,请使用.navbar-left 或.navbar-right 代替。请查看Bootstrap 导航栏。 居中内容块 使用class center-block 来居中元素。

    清除浮动 如需清除元素的浮动,请使用.clearfix class。 显示和隐藏内容 您可以通过使用class .show 和.hidden 来强行设置元素显示或隐藏(包括屏幕阅读器)。屏幕阅读器 您可以通过使用class .sr-only 来把元素对所有设备隐藏,除了屏幕阅读器。 Bootstrap 下拉菜单(Dropdowns) 对齐 通过向.dropdown-menu 添加class .pull-right 来向右对齐下拉菜单class="dropdown-menu pull-right" 标题 您可以使用class dropdown-header 向下拉菜单的标签区域添加标题 Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过Bootstrap 按钮(Button)插件添加可选的JavaScript 单选框和复选框样式行为 Bootstrap 按钮下拉菜单 本章将讲解如何使用Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在在一个.btn-group 中放置按钮和下拉菜单即可。您也可以使用 来指示按钮作为下拉菜单。