JavaScript学习

目录

一、JavaScript简介

二、JavaScript的用法

三、JavaScript输出

四、JavaScript基础语法 

1、字面量

2、变量

3、操作符

4、JS语句

5、JS关键字

6、JS注释

7、数据类型

8、JS对象

9、JavaScript 函数

10、字母大小写

11、字符集

12、JavaScript 事件

13、JavaScript 字符串

14、JavaScript 运算符

1)JavaScript 算术运算符

2)JavaScript 赋值运算符:

3)比较运算符:

4)逻辑运算符:

5)条件运算符(三元运算符):

15、条件语句

16、分支语句

17、循环语句

18、JS表单

19、this关键字

20、let 和 const 

五、JavaScript 函数

1、函数声明

2、函数表达式

3、 Function() 构造函数

4、函数提升(Hoisting)

5、箭头函数(ES6 新增)

六、JS类

七、JS DOM

1、查找 HTML 元素

1)通过 id 查找 HTML 元素

2)通过标签名查找 HTML 元素

3)通过类名找到 HTML 元素

2、JavaScript HTML DOM - 改变 HTML

1)改变 HTML 输出流

 2)改变 HTML 内容

3)改变 HTML 属性

3、JavaScript HTML DOM - 改变CSS

1)改变 HTML 样式

2)使用事件


一、JavaScript简介

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。

简而言之,html是弄网页内容的,css是弄网页布局的,而JavaScript是来控制网页的行为的!

二、JavaScript的用法

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script>
alert("我的第一个 JavaScript");
</script>

可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

三、JavaScript输出

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。

    document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

  • 使用 innerHTML 写入到 HTML 元素。

    如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法,请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容

  • 使用 console.log() 写入到浏览器的控制台。

四、JavaScript基础语法 

1、字面量

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e):  12  12.12

字符串(String)字面量 可以使用单引号或双引号:  'zzq'  ''zzq''

表达式字面量 用于计算:5 * 7 

数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}

2、变量

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值。变量是一个名称。字面量是一个。 

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可(一条语句中声明的多个变量不可以同时赋同一个值):

var lastname="Doe", age=30, job="carpenter";

如果重新声明 JavaScript 变量,该变量的值不会丢失

在 2015 年以前,我们使用 var 关键字来声明 JavaScript 变量。在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量

变量作用域

1)局部变量

变量在函数内声明,变量为局部变量,具有局部作用域。局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

2)全局变量

变量在函数外定义,即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。以下实例中 carName 在函数内,但是为全局变量。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

3、操作符

JavaScript使用 算术运算符 来计算值,使用赋值运算符给变量赋值

4、JS语句

  • 在 HTML 中,JavaScript 语句用于向浏览器发出命令。语句是用分号分隔
  • JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。
  • 您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
document.write("你好 \
世界!");

5、JS关键字

abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith

6、JS注释

和Java一样,JS也可以用//来写单行注释 

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

7、数据类型

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。

引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。

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 通过对象字面量赋值

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串
  • 布尔(逻辑)只能有两个值:true 或 false。
  • 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
  • Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
  •  JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象

类型转换:

 将数字转换为字符串

//1.将数字转换为字符串
String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

x.toString()
(123).toString()
(100 + 23).toString()


//2.将布尔值转换为字符串
String(false)        // 返回 "false"
String(true)         // 返回 "true"
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"


//3.将日期转换为字符串
Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)


//4.将字符串转换为数字
Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

//5.将布尔值转换为数字
Number(false)     // 返回 0
Number(true)      // 返回 1

//6.将日期转换为数字
d = new Date();
Number(d)          // 返回 1404568027739

d = new Date();
d.getTime()        // 返回 1404568027739

8、JS对象

对象定义:var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

对象属性:person.lastName;或person["lastName"];访问属性

对象方法:

    创建:

methodName : function() {
    // 代码 
}

   访问:objectName.methodName()

9、JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用:引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕,本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明,可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

10、字母大小写

JavaScript 对大小写是敏感的。当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。同样,变量 myVariable 与 MyVariable 也是不同的

11、字符集

JavaScript 使用 Unicode 字符集。Unicode 覆盖了所有的字符,包含标点等字符

12、JavaScript 事件

JavaScript 可以做什么?

事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码:

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...

常见的HTML事件:

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover鼠标指针移动到指定的元素上时发生
onmouseout用户从一个 HTML 元素上移开鼠标时发生
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

13、JavaScript 字符串

字符串可以存储一系列字符,如 "John Doe"。字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:

var carname = "Volvo XC60";
var carname = 'Volvo XC60';

//可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

//也可以在字符串添加转义字符来使用引号
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

//我们也可以使用 new 关键字将字符串定义为一个对象
var firstName = new String("John")//	不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用

可以使用索引位置来访问字符串中的每个字符:

var character = carname[7];

 可以使用内置属性 length 来计算字符串的长度:

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

字符串属性:

属性描述
constructor返回创建字符串属性的函数
length返回字符串的长度
prototype允许您向对象添加属性和方法

字符串方法:

方法描述
charAt()返回指定索引位置的字符
charCodeAt()返回指定索引位置字符的 Unicode 值
concat()连接两个或多个字符串,返回连接后的字符串
fromCharCode()将 Unicode 转换为字符串
indexOf()返回字符串中检索指定字符第一次出现的位置
lastIndexOf()返回字符串中检索指定字符最后一次出现的位置
localeCompare()用本地特定的顺序来比较两个字符串
match()找到一个或多个正则表达式的匹配
replace()替换与正则表达式匹配的子串
search()检索与正则表达式相匹配的值
slice()提取字符串的片断,并在新的字符串中返回被提取的部分
split()把字符串分割为子字符串数组
substr()从起始索引号提取字符串中指定数目的字符
substring()提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase()根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()把字符串转换为小写
toString()返回字符串对象值
toUpperCase()把字符串转换为大写
trim()移除字符串首尾空白
valueOf()返回某个字符串对象的原始值

  

14、JavaScript 运算符

1)JavaScript 算术运算符

运算符描述例子x 运算结果y 运算结果
+加法x=y+275
-减法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模(余数)x=y%215
++自增x=++y66
x=y++56
--自减x=--y44
x=y--54

2)JavaScript 赋值运算符:

运算符例子等同于运算结果
=x=yx=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0

3)比较运算符:

运算符描述比较返回值
==等于x==8false
x==5true
===绝对等于(值和类型均相等)x==="5"false
x===5true
!= 不等于x!=8true
!== 不绝对等于(值和类型有一个不相等,或两个都不相等)x!=="5"true
x!==5false
> 大于x>8false
< 小于x<8true
>= 大于或等于x>=8false
<= 小于或等于x<=8true

4)逻辑运算符:

运算符描述例子
&&and(x < 10 && y > 1) 为 true
||or(x==5 || y==5) 为 false
!not!(x==y) 为 true

5)条件运算符(三元运算符):

variablename=(condition)?value1:value2 

15、条件语句

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

16、分支语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

17、循环语句

For 循环

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

For/In 循环

//for/in 语句循环遍历对象的属性
var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

 while 循环

while (i<5)
{
    x=x + "The number is " + i + "<br>";
   }

do/while 循环

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

18、JS表单

HTML 表单自动验证

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

约束验证 HTML 输入属性

属性描述
disabled规定输入的元素不可用
max规定输入元素的最大值
min规定输入元素的最小值
pattern规定输入元素值的模式
required规定输入元素字段是必需的
type 规定输入元素的类型

约束验证 CSS 伪类选择器

选择器描述
:disabled选取属性为 "disabled" 属性的 input 元素
:invalid选取无效的 input 元素
:optional选择没有"optional"属性的 input 元素
:required选择有"required"属性的 input 元素
:valid选取有效值的 input 元素

19、this关键字

  • 在方法中,this 表示该方法所属的对象。
  • 如果单独使用,this 表示全局对象。
  • 在函数中,this 表示全局对象。
  • 在函数中,在严格模式下,this 是未定义的(undefined)。
  • 在事件中,this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

20、let 和 const 

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量

//使用 var 关键字重新声明变量可能会带来问题。在块中重新声明变量也会重新声明块外的变量:
var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2


//let 关键字就可以解决这个问题,因为它只在 let 命令所在的代码块 {} 内有效。
var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

const 关键字

//const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:
const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

const定义常量与使用let 定义的变量相似:

  • 二者都是块级作用域
  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

  • const声明的常量必须初始化,而let声明的变量不用
  • const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。

五、JavaScript 函数

1、函数声明

//由于函数声明不是一个可执行语句,所以不以分号结束。
function myFunction(a, b) {
    return a * b;
}

函数可作为一个值使用,函数是对象 

2、函数表达式

//JavaScript 函数可以通过一个表达式定义。函数表达式可以存储在变量中:
var x = function (a, b) {return a * b};
//在函数表达式存储在变量后,变量也可作为一个函数使用:
var z = x(4, 3);
//上述函数以分号结尾,因为它是一个执行语句。

3、 Function() 构造函数

var myFunction = new Function("a", "b", "return a * b");
//var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);
//在 JavaScript 中,很多时候,你需要避免使用 new 关键字。

4、函数提升(Hoisting)

提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的行为。提升(Hoisting)应用在变量的声明与函数的声明。因此,函数可以在声明之前调用。使用表达式定义函数时无法提升

myFunction(5);

function myFunction(y) {
    return y * y;
}

5、箭头函数(ES6 新增)

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;
//当只有一个参数时,圆括号是可选的:
//没有参数的函数应该写成一对圆括号:

箭头函数是不能提升的,所以需要在使用之前定义。使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。如果函数部分只是一个语句,则可以省略 return 关键字和大括号 {},这样做是一个比较好的习惯:

 

六、JS类

待更新。。。

七、JS DOM

1、查找 HTML 元素

1)通过 id 查找 HTML 元素

var x=document.getElementById("intro");
//如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。如果未找到该元素,则 x 将包含 null。

2)通过标签名查找 HTML 元素

//查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3)通过类名找到 HTML 元素


var x=document.getElementsByClassName("intro");

2、JavaScript HTML DOM - 改变 HTML

1)改变 HTML 输出流

绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

 2)改变 HTML 内容

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

3)改变 HTML 属性

JavaScript 更改此元素的内容 (innerHTML)

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

3、JavaScript HTML DOM - 改变CSS

1)改变 HTML 样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>

2)使用事件

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

</body>
</html>

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值