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

爱创课堂零基础入门学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 的常用...
0基础快速入门html5
通过参加 html5 培训入门 通过自身学习入门你需要通过的是最开始学习时多看看...(三)html5 开发开发包括三个要素 HTML、CSS 和 JS,是 html5 开发开发包括的...
零基础js入门练习题
零基础js入门练习题_互联网_IT/计算机_专业资料。1,什么是 Javascript? 答:Javascipt 是一种脚本语言,由 web 浏览器进行解释和执行。 2,JavaScript 是由那几个...
零基础如何学习web前端开发呢?
完整的培训课 程体系,为不同基础的学员安排合理的培训课程,零基础也可以入学,...web 前端开发包括三个要素:HTML、CSS 和 JS,是 web 前端开发包括的 三要素,...
web前端学习的路线是什么?零基础学习web要多久?
零基础学习web要多久?_英语学习_外语学习_教育专区。现在基本上各行各业多少...lar.js,requireJS, Backbone.js,node.js 等, 当然有兴趣的也可以再多学一些...
用细心和爱心创造轻松的课堂教学
用细心和爱心创造轻松的课堂教学 课堂是学生接受知识主要的地方之一,课堂教学是一个由多因素 构成的复杂的动态系统,它搭载着教师的新的教学理念与思路,学 生在...
淘宝天猫JS特效零基础到精通VIP班_网页布局_教学视频大...
淘宝天猫JS特效零基础到精通VIP班课程 5 课时数22课时 在学人数6人价格:¥580.00 立即购买 简介 目录 评论(2) 立即购买 ¥580.00 课程概述 高清视频教程 ...
【海棠学院】WEB前端-javascript详解免费学习_脚本语言...
适用人群 JavaScript零基础入门 学习目标 通过对本课程3个半月的系统学习让你从JS小白到大牛,这3个多月你会学习到JS基本语法、数据类型、流程控制、定时器、日期...
JS学习心得体会
暂无评价|0人阅读|0次下载|举报文档JS学习心得体会_韩语学习_外语学习_教育专区...亲其师信其道,要让学生因你的魅力而喜欢你的课堂,因你的课堂而爱上你的风采...
更多相关标签:
信用课堂入门篇测试 | 艺服网络课堂打版入门 | 日语口语课堂入门篇 | 妙味课堂 react 入门 | 吉他入门零基础 | 股票入门基础知识 | 英语语法基础入门 | 王者荣耀零基础入门 |