js全面学习-javascript的基础知识-概念篇(1)
接触js陆陆续续有两个月,由于大三在学校上课,所以并没有深入研究js,所以未来一段时间内,每天都会抽出时间深入学习js,以写博客的形式记录自己所学过的知识,也希望能对大家起到帮助。—-实践(敲代码)出真知啊兄弟们~我们一起努力!
自学JS,最系统的方法应该就是W3C上的,那么如何来学习呢,大体上看来,网站表述的内容,是先搭好架子,在填充内容,最后以实例去熟悉所学过的内容,在这个过程中我们所接触的知识点可以在参考手册中查询,接下来开始一部分一部分的复习。
一、什么是javascript
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
提示
JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。
正文
第一点、JS实现
内部的JavaScript
HTML 中的脚本必须位于 <script>
与 </script>
标签之间。
脚本可被放置在 HTML 页面的 <body>
和 <head>
部分中。
<script>
和 </script>
会告诉 JavaScript 在何处开始和结束。 <script>
和 </script>
之间的代码行包含了 JavaScript:
外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js
。
如需使用外部文件,请在 <script
> 标签的 “src” 属性中设置该 .js
文件:
代码如下:
<script src="myScript.js"></script>
第二点、JS如何输出
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素:
<h1>我的第一张网页</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>
JavaScript 由 web 浏览器来执行。在这种情况下,
浏览器将访问 id="demo" 的 HTML 元素,
并把它的内容(innerHTML)替换为 "My First JavaScript"。
写到文档输出
下面的例子直接把 <p>
元素写到 HTML
文档输出中:
<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>
警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
大家可以看下面的代码内容:
<h1>我的第一张网页</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("糟糕!文档消失了。");
}
</script>
第三点、变量
变量是存储信息的容器。
例如:
var x=2;
var y=3;
var z=x+y;
在代数中,我们使用字母(比如 x)来保存值(比如 2)。
通过上面的表达式 z=x+y,我们能够计算出 z 的值为 5。
在 JavaScript 中,这些字母被称为变量。
那么请注意
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
变量必须以字母开头
变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
变量名称对大小写敏感(y 和 Y 是不同的变量)
提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。
JavaScript 数据类型
JavaScript 变量还能保存其他数据类型,比如文本值 (name=”Bill Gates”)。
在 JavaScript 中,类似 “Bill Gates” 这样一条文本被称为字符串。
JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。
当您向变量分配文本值时,应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。
例如:
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';
那么大家知道下面这段代码的效果是什么样的吗?可以粘贴到自己的编辑器上去看一看~
<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
Value = undefined
var carname;
将undefined加粗,是因为它很重要,在面试和我们实际运用中,都能得到体现。
在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。 在执行过以下语句后,变量 carname
的值将是 undefined: 请大家牢记这段话。
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 carname 的值依然是 “Volvo”:
var carname="Volvo";
var carname;
第四点、JavaScript 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
这是最基础的知识之一,记得我在面试的时候,面试官问我数据类型都有哪些,我没有说出“数组”
,接下里的一系列问题就围绕着 “数组”
开始了…所以希望大家能熟悉每一个数据类型,光记住他们是什么是不够的,请看我的分析。
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
实例
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
1、JavaScript 字符串
字符串是存储字符(比如 “Bill Gates”)的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
var carname="Bill Gates";
var answer="He is called 'Bill'";
2、JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
3、JavaScript 布尔逻辑)只能有两
个值:true 或 false。
var x=true
var y=false
布尔常用在条件测试中。在介绍完大框架后,我们会深入研究数据类型。
4、JavaScript 数组
下面的代码创建名为 cars 的数组:
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
var cars=["Audi","BMW","Volvo"];
数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。
5、JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
6、Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;
声明变量类型
当您声明新变量时,可以使用关键词 “new” 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
javaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。`
数据类型大体分为六部分,其中的一些重点我会单独写博客说明。
第五点、JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。那么什么是属性和方法呢?
属性和方法: 属性
是与对象
相关的值。
方法是
能够在对象
上执行的动作。
举个例子我们人,拥有身高,体重,肺活量等属性。
我们可以有唱歌、跑步、游泳等方法。
JavaScript 中的对象
在 JavaScript 中,对象
是数据(变量),拥有属性和方法。
当您像这样声明一个 JavaScript 变量时:
var txt = "Hello";
您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说,length 的值是 5。字符串对象同时拥有若干个内建的方法。(具体有哪些,容我之后再细说)。
属性: —> txt.length=5
方法: txt.indexOf()、txt.replace()、txt.search()
提示:在面向对象的语言中,属性和方法常被称为对象的成员。
在之后的博客笔记中,您将学到有关字符串对象的更多属性和方法。
如何创建JavaScript 对象
JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数等。
你也可以创建自己的对象。
本例创建名为 “person” 的对象,并为其添加了四个属性:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=20;
person.eyecolor="blue";
如何访问对象属性?
访问对象属性的语法是: objectName.propertyName
—-> 【对象名】.【属性名】
上文中使用 person
对象的 eyecolor
属性来查找字符串的长度:
var x = eyecolor.length;
document.write(x);
在以上代码执行后,x 的值是? 答案为4.
如何访问对象的方法?
您可以通过下面的语法调用方法:
objectName.methodName()
—> 【对象名】.【方法名】
这个例子使用 String
对象的 toUpperCase()
方法来把文本转换为大写:
var message="Hello world!";
var x=message.toUpperCase();
在以上代码执行后,x 的值是? HELLO WORLD!
第六点、JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
</body>
着段代码的效果是:点击按钮,网页会弹出 hello world!字样
提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
带参数的函数
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。bill gate
对应着 name
等等
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
带有返回值的函数
有时,我们会希望函数将值返回调用它的地方。
通过使用
return
语句就可以实现。在使用
return
语句时,函数会停止执行,并返回指定的值。
语法例如:
function myFunction()
{
var x=5;
return x;
}
上面的函数会返回值 5。
注释:整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。
函数调用将被返回值var myVar=myFunction();
myVar 变量的值是 5,也就是函数 “myFunction()” 所返回的值。
即使不把它保存为变量,您也可以使用返回值:
document.getElementById("demo").innerHTML=myFunction();
"demo"
元素的 innerHTML
将成为 5,也就是函数 "myFunction()"
所返回的值。
您可以使返回值基于传递到函数中的参数:
请看一个实际中的例子:
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
给函数传值3和4,函数返回运算结果,并将值直接插入到 id
名为demo
的内容上。
插入一条信息
innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容; 如:
<div id="aa">这是内容</div> ,
我们可以通过document.getElementById('aa').innerHTML
来获取id
为aa
的对象的内嵌内容;
也可以对某对象插入内容,如document.getElementById('aa').innerHTML='这是被插入的内容';
这样就能向id为aa的对象插入内容。
如果你想要退出函数是,return
可以为空 即return;
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值(多看几眼哦)
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
这条语句:
carname="Volvo";
将声明一个全局变量 carname
,即使它在函数内执行。
那么今天大概浏览到这里,下个博客会接着学习JS的基础知识,谢谢大家。
推荐阅读
-
js全面学习-javascript的基础知识-概念篇(1)
-
Javascript入门学习第一篇 js基础第1/2页_基础知识
-
Javascript入门学习第七篇 js dom实例操作_基础知识
-
Javascript入门学习第二篇 js类型_基础知识
-
Javascript入门学习第六篇 js DOM编程_基础知识
-
JavaScript基础知识学习总结篇(每个知识点都附带上机的例子,而不是纯理论) 上,当前字数统计:12435
-
Javascript入门学习第五篇 js函数第1/2页_基础知识
-
荐 javascript从入门到跑路-----小文的js学习笔记(18 —1)------作用域以及作用域链
-
javascript学习全过程-----js学习笔记(1)------js的基础语法
-
学习JavaScript 的必备 (一),让您对js的 function, javascript内置对象,this概念及之间的关系不再迷惑。(