当前位置:首页 >> 其它课程 >>

爱创课堂零基础入门学js


JavaScript零基础入门学

爱创课堂

爱创课堂前端p培训

什么是javascript?
Javascipt是一种脚本语言,由web浏览器进行解释和执行。

JavaScript ECMAScript DOM BOM

ECMAScript : 核心 DOM

: 文档对象模型 BOM : 浏览器对象模型
爱创课堂 爱创课堂前端p培训

怎样将Javascript应用到网页中?
方法一:将javascript代码插入html文档<head>部分的<script>标签中 例: <head> <script type=“text/javascript”> //javascript 代码

alert(‘hello world’);
</script> </head>

爱创课堂

爱创课堂前端p培训

方法二:将javascript代码存放在一个独立的文件。用.js作为文件的扩展名,再利用 <script>标签的src属性指向该文件。 例: test.js

alert(‘hello wordld’);
Alert(‘金团网欢迎您 !http://www.ejintuan.com’); test.html <head> <script type=“text/javascript”src=“test.js”></script> </head>

爱创课堂

爱创课堂前端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”);
var test = parseInt(“1234blue”); var test = parseInt(“22.5”);

//returns NaN
//returns 1234 //returns 22

var test = parseFloat(“1234blue”); var test = parseFloat(“22.5”);

//returns 1234.0

//returns 22.5

爱创课堂

爱创课堂前端p培训

运算符
1.算术运算符 + - * / % var total = (1 + 4) * 5; var i = 100; var temp = (i – 20) / 2;

alert(“10”+ 20) alert(10 + 20)

//return 1020; //return 30;

2. 后增量/后减量运算符 ++ ,-var i = 10; var a = i++; 爱创课堂 alert(a);

// i = i + 1;
爱创课堂前端p培训

3. 比较运算符 >, <, >=, <=, ==, != alert ( 10 > 5 ); //outputs true

var i = 100; var n = 100; alert(i == n); //outputs true; alert(i != n); //outputs false; 4.逻辑运算符 && : 逻辑与 || : 逻辑或 !:逻辑非 var i = 8; alert ( i<5 && i<10); alert ( i > 100 || i < 10); alert(!(10 > 5)); //outputs false //outputs true //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. Do…while 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 < 10; i++){ if(i > 5){ continue; } n++; } alert(n);

爱创课堂

爱创课堂前端p培训

例: var n = 0;

for(var i=1; i < 10; i++){
if( 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(‘金团网http://www.ejintuan.com’)”);//eval的用法 结果弹出对话框 金团网网址

爱创课堂 2.parseInt

和 parseFloat 将字符串转换为数字

爱创课堂前端p培训

3. escape 和 unescape 例:

进行URL编码和解码

var url = “http://www.baidu.com/s?wd=金团网”;
url = escape(url); alert(url); var es = escape(“金团网"); alert(es);//加密 alert(unescape(es));//解密

爱创课堂

爱创课堂前端p培训

*谢谢您的查阅!

爱创课堂

爱创课堂前端p培训


相关文章:
爱创课堂web前端笔试题面试题汇总+前端优化总结_图文
爱创课堂web前端笔试题面试题汇总+前端优化总结_面试...目的是帮助更多 0 基 础的学员更快的掌握学习前端...js基础对象有那些, window 和 document 的常用...
从零基础到造价精英,原来可以这么简单!
我们注重实例操作,只要您用心去看去学,肯定学 得会,废话少说,马上进入课堂!!...一、基础知识篇 1、土建专业基础知识 http://www.jsrcj.com/?newsview-2396...
更多相关标签: