07
2020
09

JavaScript 编程语言

是 Web 的编程语言; 是一种轻量级的编程语言 是可插入 HTML 页面的编程代码插入 HTML 页面后,可由所有的现代浏览器执行

 用法:TML 中的脚本必须位于 <script> 与 </script> 标签之间,脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中,<script>标签:在 HTML 页面中插入 ,要使用 <script> 标签 ,<script> 和 </script> 会告诉  在何处开始和结束,中间的代码就是包含了;

 <body>中的 会在页面加载时向 HTML 的 <body> 写文本blob.png

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

   函数和事件在 <body>中的语句会在页面加载中执行,

如果需要在某个事件发生时执行代码,比如当用户点击按钮时,我们把  代码放入函数中,就可以在事件发生时调用该函数

 <head> 部分中的 函数放置到 HTML 页面的 <head> 部分,该函数会在点击按钮时被调用:blob.png   blob.png 

<body>中的函数,把一个  函数放置到 HTML 页面的 <body> 部分,该函数会在点击按钮时被调用:blob.png    blob.png

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

输出: 没有任何打印或者输出的函数

数据显示: 可以通过不同的方式来输出数据;

使用 window.alert() 弹出警告框;window.alert(10 + 6);blob.png    blob.png

document.write():方法将内容写到 HTML 文档中使用 innerHTML 写入到 HTML 元素

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

document.getElementById("demo").innerHTML = "段落已修改。";blob.png  blob.png

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的  代码,innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的  代码;

直接写入HTML文档:document.write(Date());/*获取现在时间*/blob.png  blob.png

写到控制台:使用 console.log() 方法在浏览器中显示  值,在浏览器在调试窗口中点击 "Console" 菜单    blob.png     blob.png

javaScript语法:的语法规则定义了语言结构,是一个脚本语言;它是一个轻量级,但功能强大的编程语言;

JavaScript的字面量:在编程语言中,一般固定值称为字面量,如 3.14,数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e),document.getElementById("demo").innerHTML = 123e5;   blob.png    blob.png

字符串(String)字面量 可以使用单引号或双引号:document.getElementById("demo").innerHTML = 'John Doe';    document.getElementById("demo").innerHTML = ”John Doe“

表达式字面量 用于计算:document.getElementById("demo").innerHTML = 5 * 10;   document.getElementById("demo").innerHTML = 5 + 10;

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

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

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

定义变量:在编程语言中,变量用于存储数据值, 使用关键字 var 来定义变量, 使用等号来为变量赋值:  varlength;length=6;document.getElementById("demo").innerHTML = length;最后输出值为6blob.png    blob.png

变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值变量=名称;字面量=值;

操作符:使用 算术运算符 来计算值:document.getElementById("demo").innerHTML = (5 + 6) * 10;最后结果为110;

使用赋值运算符给变量赋值:blob.png     blob.png

关键字:如在定义变量的关键字var,在定义便量前面加入关键字var,此时var关键字在告诉浏览器我创建了一个新变量;var x = 5 + 6;var y = x * 10;

注释:不是所有的  语句都是"命令"。双斜杠 // 后的内容将会被浏览器

数据类型:有多种数据类型:数字,字符串,数组,对象;


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

字母大小写;avaScript 对大小写是敏感的,当编写  语句时,请留意是否关闭大小写切换,函数 getElementById 与 getElementbyID 是不同的,同样,变量 myVariable 与 MyVariable 也是不同的

语句:在 HTML 中, 语句向浏览器发出的命令,这些命令的作用是告诉浏览器要做的事情,document.getElementById("demo").innerHTML = "你好 Dolly";语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" ;

分号用于分隔  语句,在每条可执行的语句结尾添加分号,用分号的另一用处是在一行中编写多条语句blob.png

 代码是  语句的序列,浏览器按照编写顺序依次执行每条语句blob.png    blob.png

代码: 可以分批地组合起来,代码块以左花括号开始,以右花括号结束代码块的作用是一并地执行语句序列blob.png未发生事件前blob.png发生事件后blob.png

在代码中对于代码进行折叠:在文本字符串中使用反斜杠对代码行进行换行:

document.write("你好 \ 世界                                blob.png

这样折行是错误的:document.write \ 
                 ("你好世界!");

注释: 不会执行注释可以添加注释来对  进行解释,或者提高代码的可读性,单行注释以 // 开头blob.png   blob.png;多行注释以 /* 开始,以 */ 结尾blob.png  blob.png在代码中可以使用注释来阻止执行(可用于调试)blob.png   blob.png多行注释可以阻止代码块的执行blob.pngblob.png

一般把注释放到代码行的结尾处;

中的变量;变量是用于存储信息的"容器"。与代数一样, 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y),变量可以使用短名称(比如 x 和 y),变量必须以字母开头变量名称对大小写敏感(y 和 Y 是不同的变量),变量也能以 $ 和 _ 符号开头blob.png  blob.png

数据类型: 变量还能保存其他数据类型,比如文本值 (name="Bill Gates"),类似 "Bill Gates" 这样一条文本被称为字符串,当向变量分配文本值时,应该用双引号或单引号包围这个值,当向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理blob.png    blob.png

在中创建变量时用关键词来声明变量,使用 var 关键词来声明变量:var carname;

变量声明之后,该变量是空的使用等号,向变量赋值:carname="Volvo";也可以在声明变量时对其赋值:var carname="Volvo";

一条语句中多个变量,在一条语句中声明很多变量。该语句以关键词开头,并使用逗号分隔变量即可:var lastname="Doe", age=30, job="carpenter";也可以横跨多行:blob.png

一条语句中声明的多个不可以赋同一个值:var x,y,z=1;x,y 为 undefined, z 为 1

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefine

var carname;变量 carname 的值将是 undefined;

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

引用数据类型:对象(Object)、数组(Array)、函数(Function)

拥有动态类型,相同的变量可用作不同的类型:

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

字符串(String)字符串是存储字符(比如 "Bill Gates")的变量,字符串可以是引号中的任意文本;可以使用单引号或双引号:var carname="Volvo XC60";var carname='Volvo XC60';也可以在字符串中使用引号,只要不匹配包围字符串的引号即可:blob.png   blob.png

 数字类型(Number):数字可以带小数点,也可以不带:var x1=34.00;  //使用小数点来写   var x2=34;    //不使用小数点来写;极大或极小的数字可以通过科学(指数)计数法来书写:  blob.png  blob.png

 布尔(Boolean):布尔(逻辑)只能有两个值true 或 false var x=true;vary=false;

数组:创建名为 cars 的数组:blob.png 或者blob.png

对象(Object):对象由花括号分隔,在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:var person={firstname:"John", lastname:"Doe", id:5566};的对象 (person) 有三个属性:firstname、lastname 以及 id;空格和折行无关紧要。声明可横跨多行:blob.png

对象属性有两种寻址方式:document.write(person.lastname + "<br>");document.write(person["lastname"] + "<br>");blob.png   blob.png

Undefined 这个值表示变量不含有值,可以通过将变量的值设置为 null 来清空变量blob.pngblob.pngblob.png

声明新变量类型:当声明新变量时,可以使用关键词 "new" 来声明其类型:var carname=new String;var x=      new Number;var y=      new Boolean;var cars=   new Array;var person= new Object;

对象: 对象是拥有属性和方法的数据

在 中,几乎所有的事物都是对象真实生活中,一辆汽车是一个对象,对象有它的属性,如重量和颜色等,方法有启动停止等;

变量赋值:变量 car 设置值为 "Fiat" :var car = "Fiat";

对象也是一个变量,但对象可以包含多个值(多个变量):

var car = {type:"Fiat", model:500, color:"white"};3 个值 ("Fiat", 500, "white") 赋予变量 car;3 个变量 (type, model, color) 赋予变量 car

定义对象:可以使用字符来定义和创建 对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};义 对象可以跨越多行,空格跟换行不是必须的

对象属性: " 对象是变量的容器",又认为 " 对象是键值对的容器",键值对通常写法为 name : value (键与值以冒号分割,键值对在 对象通常称为 对象属性

可以通过两种方式:访问对象属性:blob.png  blob.png    blob.png

对象方法:对象的方法定义了一个函数,并作为对象的属性存储,对象方法通过添加 () 调用 (作为一个函数),访问了 person 对象的 fullName() 方法:blob.pngblob.pngblob.png  blob.png

如果要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:blob.png   fullName 属性加括号输出函数执行结果:John Doe,不加括号则输出函数表达式:

 function() {return this.firstName + " " + this.lastName;}

中访问对象方法:fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性,如果使用 fullName 属性,不添加 (), 它会返回函数的定义;如果()会调用fullName属性,访问 person 对象的 fullName() 方法blob.png

在中创建一个对象:var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};//定义对象   document.getElementById("demo").innerHTML =person.firstName + " 现在 " + person.lastName + " 岁.";//调用

函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块:函数就是包裹在花括号中的代码块,前面使用了关键词 function:blob.png  blob.png

当调用该函数时,会执行函数内的代码,可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 在任何位置进行调用( 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数

调用带参数的函数:调用函数时,您可以向其传递值,这些值被称为参数,参数可以在函数中使用

以发送任意多的参数,由逗号 (,) 分隔:变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推blob.png点击button调用带参数的函数blob.png

可以使用不同的参数来调用该函数,这样就会给出不同的消息:blob.png  第一个buttonblob.png第二个buttonblob.png

带有返回值的函数:函数将值返回调用它的地方,通过使用 return 语句就可以实现,使用 return 语句时,函数会停止执行,并返回指定的值, 整个 并不会停止执行,仅仅是函数。 将继续执行代码,从调用函数的地方blob.png  调用的函数会执行一个计算,然后返回结果为

12

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。