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

爱创课堂零基础入门学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培训


相关文章:
edu_ecologychuanke89014
学习目标 本套课程是诚筑说为有些html和css的基础同学准备的,当我们想在自己的页面上加入一些动态效果, 用JavaScript是我们浏览器兼容性最好的选择!但JS对于编程...
爱创课堂_如何成为一名优秀的web前端工程师
暂无评价|0人阅读|0次下载|举报文档爱创课堂_如何成为一名优秀的web前端工程师...前端开发的入门门槛其实很低, 与服务器端语言先慢后快的学习曲线相比, 前端...
edu_ecologychuanke195362
学习目标 JS基础概念与知识,技术新手可以做为入门的准备,编辑运营可以学完后,能看懂JS代码,修改一些简单的特效。能达到这样的要求,我想也就差不多了。 讲师信息...
爱创课堂前端开发体验angular课堂笔记
暂无评价|0人阅读|0次下载|举报文档爱创课堂前端开发...js 中 if 语句 在 vue 中定义条件模板用 v-if ...爱上统计学 课堂笔记 暂无评价 14页 1下载券 信...
edu_ecologychuanke1477660905
适用人群 零基础学员 学习目标 此课程为套餐课程,适合没有任何基础、没有学习...第21章 【JavaScript】JS基础入门01 JS网页声明规范写网页以及定位有哪些 30分钟...
零基础js入门练习题
零基础js入门练习题_互联网_IT/计算机_专业资料。1,什么是 Javascript? 答:Javascipt 是一种脚本语言,由 web 浏览器进行解释和执行。 2,JavaScript 是由那几个...
爱创课堂web前端笔试题面试题汇总+前端优化总结
爱创课堂web前端笔试题面试题汇总+前端优化总结_面试...目的是帮助更多 0 基 础的学员更快的掌握学习前端...js基础对象有那些, window 和 document 的常用...
edu_ecologychuanke1477648358
有计算机基础的小白,杰米诺课堂带你从零基础到就业,...学习目标 1:html5 css3响应式布局、移动html5app开发...echarts 、vueJS、JAMES、easyUI等企业级框架入门到...
edu_ecologychuanke96006
适用人群 JavaScript零基础入门 学习目标 通过对本课程3个半月的系统学习让你从JS小白到大牛,这3个多月你会学习到JS基本语法、数据类型、流程控制、定时器、日期...
edu_ecologychuanke194314
淘宝天猫JS特效零基础到精通VIP班课程 5 课时数22课时 在学人数6人价格:¥580.00 立即购买 简介 目录 评论(2) 立即购买 ¥580.00 课程概述 高清视频教程 ...
更多相关标签:
嘉兴学院创业基础课堂 | 创业基础网络课堂答案 | 日语口语课堂入门篇 | 艺服网络课堂打版入门 | 崔允漷 课堂观察入门 | 围棋课堂 入门15 | 新教师课堂教学入门 | 围棋课堂 入门 |