爱创课堂零基础入门学js.ppt

JavaScript零基础入门学,爱创课堂前端p培训,爱创课堂,什么是javascript? Javascipt是一种脚本语言，由web浏览器进行解释和执行。,ECMAScript,DOM,BOM,JavaScript,ECMAScript : 核心 DOM : 文档对象模型 BOM : 浏览器对象模型,爱创课堂前端p培训,爱创课堂,怎样将Javascript应用到网页中？ 方法一：将javascript代码插入html文档部分的标签中 例： /javascript 代码 alert(hello world); ,爱创课堂前端p培训,爱创课堂,方法二：将javascript代码存放在一个独立的文件。用.js作为文件的扩展名，再利用 标签的src属性指向该文件。 例： test.js alert(hello wordld); Alert(金团网欢迎您 ！); test.html ,爱创课堂前端p培训,爱创课堂,JavaScript 语法 一、变量 1.变量由 var 运算符加变量名定义。 var age = 25; var mood = happy; 2.变量名命名规则： 第一个字符必须是字母、下划线(_)、或美元符号 ($); 变量名中不能包含空格或标点符号（$ 除外); 变量名区分大小写; 不能使用保留字; 为了让变量名有更好的可读性，可以在变量名中适当的插入下划线分隔，如： var my_mood = happy;,爱创课堂前端p培训,爱创课堂,二、数据类型 1.字符串(String) 字符串由零个或多个字符构成，字符包括字母，数字，标点符号和空格; 字符串必须放在引号里（单引号或双引号）; var mood = “happy”; var mood = happy; 2.数值(number) var age = 25; var price = 33.25;,爱创课堂前端p培训,爱创课堂,3.布尔类型 (boolean) 布尔型数据只能有两种种值 true 和 false; var married = true; var married = false; 与字符串不同，不要把布尔值用引号括起来。布尔值 false 与 字符串 “false”是两回事。,爱创课堂前端p培训,爱创课堂,4.查看数据类型 typeof var mood = “happy”; alert(typeof mood); alert(typeof 95); 5.转换成字符串 var married = false; alert(married.toString(); / outputs “false” var age = 25; alert(age.toString(); /outputs “25”,爱创课堂前端p培训,爱创课堂,6.转换成数字 parseInt() 转换成整数 parseFloat() 转换成浮点数 例： var test = parseInt(“blue”); /returns NaN var test = parseInt(“1234blue”); /returns 1234 var test = parseInt(“22.5”); /returns 22 var test = parseFloat(“1234blue”); /returns 1234.0 var test = parseFloat(“22.5”); /returns 22.5,爱创课堂前端p培训,爱创课堂,运算符 1.算术运算符 + - * / % var total = (1 + 4) * 5; var i = 100; var temp = (i 20) / 2; alert(“10”+ 20) /return 1020; alert(10 + 20) /return 30; 2. 后增量/后减量运算符 + ,- var i = 10; var a = i+; / i = i + 1; alert(a);,爱创课堂前端p培训,爱创课堂,3. 比较运算符 , =, 5 ); /outputs true var i = 100; var n = 100; alert(i = n); /outputs true; alert(i != n); /outputs false; 4.逻辑运算符 /outputs false,爱创课堂前端p培训,爱创课堂,注释 / 单行注释 /* */ 多行注释,爱创课堂前端p培训,爱创课堂,程序流程控制 一、条件语句 if(condition) statements1 else statement2 例： if(10 5) alert(“hello world”); var i = 90; if(i 100) alert(i + “大于100”); else if(i 80) alert(i + “大于80”); else alert(i + “小于100”); ,爱创课堂前端p培训,爱创课堂,二、循环语句 1.While while (exp) /statements; 例： var count = 1; while(count 11) alert(count); count+; ,爱创课堂前端p培训,爱创课堂,2. Dowhile do /statements; while (condition); 例： var count = 1; do alert(count); count+; while(count 11);,爱创课堂前端p培训,爱创课堂,3.for 循环语句 for(initial; expression; post-loop-expression) /statement; 例： for(var count = 1; count 11; count+) alert(count); ,爱创课堂前端p培训,爱创课堂,4. break 语句和 continue 语句 break 语句可以立即退出循环; continue 语句只是退出当前循环; 例： var n = 0; for(var i = 1; i 5) continue; n+; alert(n);,爱创课堂前端p培训,爱创课堂,例： var n = 0; for(var i=1; i 5) continue; n+; alert(n);,爱创课堂前端p培训,爱创课堂,5. Switch 语句 switch (expression) case value: /statement break; case value: /statement break; default: /statement 例： var i = 25; switch(i) case 25: case 100: alert(100); break; default: alert(other); ,爱创课堂前端p培训,爱创课堂,函数 函数就是完成某个功能的一组语句，函数由关键字 function 函数名加一组参数定义; 函数在定义后可以被重复调用，通常将常用的功能写成一个函数，利用函数可以使代码的组织 结构更多清晰。 基本语法： function funName (arg0, arg1, argN) /statements 例1： function say_hello (name, msg) alert(“hello”+ name + “:”+ msg); say_hello(“david”, “how are you today?”);,爱创课堂前端p培训,爱创课堂,使用 return 语句从函数返回值 例2： function sum (num1, num2) return num1 + num2; var s = sum(1, 2); document.write(s); alert(s);,爱创课堂前端p培训,爱创课堂,变量的作用域 变量既可以是全局，也可以是局部的。 全局变量：可以在脚本中的任何位置被引用，一旦你在某个脚本里声明了全局变量，你就可以 在这个脚本的任何位置（包括函数内部）引用它，全局变量的作用域是整个脚本; 局部变量：只存在于对它做出声明的函数内部，在函数的外部无法相用它，局部变量的作用域 仅限于函数内部; 例： function square(num) var total; total = num * num; return total; var total = 50;/全局变量 alert(total); var number = square(20); alert(total); /函数内部声明的变量，就是局部变量；其他情况都是属于全局变量,爱创课堂前端p培训,爱创课堂,练习： 编写一个函数求N的阶乘; 3! = 3 * 2 * 1 10! = 10 * (10 -1) n! = n* (n-1)! function svm(mm) svm=mm*(mm-1) return svm; alert(svm(4);/4!的值,爱创课堂前端p培训,爱创课堂,JavaScript 内部函数 在javascript中有一些功能是很常用的，它们以全局函数的形式提供给用户，这些函数称为内 部函数。 1.eval() Eval 接受一个字符串类型的参数，将这个字符串作为代码在上下文环境中执行，并返回执行 的结果; 例： var i = 1; eval(“i = i + 1”); eval(“alert(i);”); Eval(“alert(金团网)”);/eval的用法 结果弹出对话框 金团网网址 2.parseInt 和 parseFloat 将字符串转换为数字,爱创课堂前端p培