Javascript-入门
【LJ?Dragon】Every single person has at least one secret that would break your heart.
Js基础 \事件编程 \Dom操作 \BOM模型 \面向对象 \正则表达式 \贪食蛇
一、简介
1、 什么是javascript
JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。
2、 为什么要使用javascript
表单验证
网页特效
小游戏
Ajax
3、快速入门
在程序中,如果想编写js代码,有两种办法:
1)在html文件中,在一对script标记中,直接编写
<script language='javascript'>document.write('hello');</script>
2)在js中,直接编写,在html中,使用一对script标记直接引用
<script language='javascript' src='demo01.js'></script>
以上两种不能在一对script标记中重复使用
二、基础语法
1、基本格式
JavaScript区分大小写
变量a和变量A是两个变量
JavaScript脚本程序须嵌入在HTML文件中
JavaScript脚本程序中不能包含HTML标记代码
<script>document.write(‘<table></table>’);</script>
每行写一条脚本语句
语句末尾可以加分号
JavaScript脚本程序可以独立保存为一个外部文件
2、关于script标签
<script>
Language:引用的语言 javascript、php、c#、VBSCRIPT
Src:引用一个外部的js文件
3、关于变量
变量是用来临时存储数值的容器,变量存储的数值是可以变化的
变量必须要先声明才能使用,使用var声明变量
使用var声明:局部变量
没有使用var声明:全局变量
变量的命名规则:第一个字符必须是英文字母,或者是下划线(_);其后的字符,可以是英文字母,数字,下划线;变量名不能是JavaScript的保留字
变量的作用域:全局变量、局部变量
4、数据类型
String :字符串 ‘’ “”
Number :数字 10、10.01、100
Boolean :布尔型 true、false
Undefined :未定义
Null :空
'utf-8';
<script type="text/javascript" language="javascript">//使用js描述一个人的完整信息var name='张三';var age = 30 ;var marry = true ;var height = 1.8 ;//打印到列表上document.write('<ol>');document.write('<li>姓名'+ name + '</li>');document.write('<li>年龄'+ age + '</li>');document.write('<li>婚否'+ marry + '</li>');document.write('<li>身高'+ height + '</li>');document.write('</ol>');
Object :对象
function Person (){}var p1 = new Person ();p1.name = 'WangWu';p1.age = 20 ;document.write(p1.name+'<Br>');document.write(p1.age);
5、运算符
算术运算符
+、-、*、/、%、++、--
i++
++i
<script type="text/javascript">var i=10;var j=i++; //先赋值后自加var k=++i; //先自加后赋值document.write(j); //10document.write(k); //12</script>
比较运算符
>、<、>=、<=、!=、==、===、!==
==和===有何区别?
== :判断值是否相等
===:判断值相等类型也相同
<script type="text/javascript">var i=5; //Numbervar j="5"; //Stringif(i==j){document.write("相等"+'<Br>');}if(i===j){document.write("全相等");}
</script>
逻辑运算符
&&、||、!
赋值运算符
=、+=、-=、*=、/=、%=
将运算符左边的与右边的进行计算,再赋值给左边的
字符串运算符
+、+=
三、流程结构
顺序结构
分支结构
循环结构
1、顺序结构
代码是一行接着一行执行
2、分支结构
If、else、else if、switch
3、循环结构
For、while、do....while、for.....in
小游戏:
猜数游戏:进入到页面之后、随机一个数1--500、弹出输入框,由用户输入一个数字,如果这个数字大于随机数,提示:大了,反之提示,小了。如果相等,提示:猜对了,然后程序结束
<script type="text/javascript">// alert(Math.random()); 0到1 之间的小数// Math.random()*500; 0到500间的小数var n = Math.round(Math.random()*500); //四舍五入取整 ,将其赋值给一个变量// document.write(n);// prompt ("Please Input a number between 1~500"); 输入框while(true){var number = prompt (" Please Input a number:"); //接收用户输入的数据 if (number > n) alert('Big');if (number < n) alert('Small');if (number == n) {alert('OK'); break;}}</script>
四、函数
1、函数的功能
代码重复性使用
模块化编程
2、语法:
使用函数前要先定义才能调用
函数定义有三个部分:函数名,参数列表,函数体
定义函数的格式
function 函数名([参数1,参数2...]){
函数执行部分;
return 表达式;
}
调用语法:
函数名(实参1,实参2,......,);
五、代码示例
例1:关于函数的定义和调用
<script type="text/javascript">// //函数的定义// function display(){// alert('Hello');// }// //函数的调用// display ();// display ();// display ();// display ();
</script>
例2:关于函数的参数问题
//关于函数的传参function display (first,second){alert(first + second);}var i = 10;var j = 20; display (i,j);
在上题中,first,second是形参,i,j是实体
在函数执行过程,形参值的改变不会影响实参
按值传递
按地址传递原理图:
在js中,对象类型默认就是按地址传递
function display(obj){obj.name='lisi';}var p1 = new Object();p1.name='zhangsan';display(p1);alert(p1.name);
例3:关于函数的返回值问题
var i = 10;alert(i); //变量是可以保存数据的,也可以保存地址function display (i) {alert ("Hello"); //变量名存在栈中,变量的数据存在堆中(堆比栈大,栈比堆快)函数存在计算机的代码段中,代码段中的数据引用来自于栈中的一个,,,函数名就是首地址,display是存在于window对象下的//函数和数组一样,是一段连续的地址return i; //函数遇到return会立即返回,后面的代码不执行}//i = display ; //将函数的首地址赋值给i ,变量i 也指向了这个函数的首地址//i(); //括号表示执行;//var i = display ;// i () ;//var i = function display (){//alert("hello");//}//i();
例4:关于匿名函数
//匿名函数// var i =function (){ //// alert("123");// }// i();
Var i=10; 变量可以保存数据,也可以保存地址
Function display(){} 在window对象下添加一个叫display的变量,它指向了这个函数的首地址Window.i=display 我们让window对象下的i指向这个函数的首地址display() ======= i();
例5:自调用匿名函数
(function(){alert("js");})(); //function(){} 函数的定义,返回函数的首地址//(function(){}) //函数的首地址//(function(){})() //小括号代表执行
(function(first){alert(first);alert('hello js');
})(10)
Function(){} :相当于返回首地址
(Function(){}) :把这部分看做一个整体
(function(){})():相当于找到这个地址并执行
以上这种写法:可以避免代码库中的函数有重命问题,并且以上代码只会在运行时执行一次,一般用做初始化工作。
例6:全局变量与局部变量
// i = 10 ; //全局// var j = 20; //仍然是全局的// function display(){// var k = 30; //局部的// p = 40 ; //全局的// }
在函数内部定义的就是局部的,否则就是全局的
//var i =10 ;function display() {//var i =20; //局部变量只在局部作用域起作用i =20 ; //全局的,会将全局i的值修改为20}display();alert(i);
如果函数内的变量没有var声明会直接影响全局的
为什么没有var是全局的?
是因为,在js中,如果某个变量没有var声明,会自动到上一层作用域中去找这个变量的声明语句,如果找到,就使用,如果没有找到,继续向上查找,一直查找到全局作用域为止,如果全局中仍然没有这个变量的声明语句,那么会自动在全局作用域进行声明,这个就是js中的作用域链
代码示例:
<script type="text/javascript">var i =10;function fn1(){// i =100; var i=100; // 将作用域中的i修改为10000function fn2(){i = 1000;function fn3(){i=10000;}fn3();}fn2();}fn1();alert(i);</script>
局部访问全局使用作用域链
全局访问局部可以使用闭包进行模拟
六、arugments的使用
在一个函数内部,可以使用arguments属性,它表示函数的的形参列表,它是以数组形式体现的
例1:在定义display函数时,它的实参个数必须要与形参个数保持一致,有时,我们定义函数时,形参数目不能固定,如何解决?
// function display(name,name2){// document.write(name);// document.write(name2);// }// display("lisi",'zhangsan');
例2:如果定义时,参数个数不确定,可以通过arguments来保存所有实参
function display(){//没有定义形参,那么形参会自动存放到arguments这个属性数组中for(var i=0;i<arguments.length;i++){document.write(arguments[i]+'<br>');}}display('zhangsan','lisi','wanwu'); //三个实参display('zhangsan','lisi','wanwu','zhaoliu','guanyu'); //五个实参
例3:使用js函数来计算每个公司的员工工资总额
<script type="text/javascript">//sum =0;function display(){var sum =0; //总额for(var i= 0; i< arguments.length;i++){sum+=arguments[i];}document.write(sum+'<br>');}//A公司display(10000,2000,5000);//B公司display(1000,2000,5000,8000,10000);</script>
七、javascript中的词法分析
Js中的script是分段执行的
例1:在之前script语句段定义的变量和函数可以在其它script语句段使用。
<script type="text/javascript">
// var i =10;
</script><script type="text/javascript">
// alert(i);
/</script>
例2:在一个js程序中,可以有多个script语句段,那么它们如何工作?
1、读入第一个代码段
2、编译
声明变量、声明函数、语法检查、语义检查、代码优化、分析并得到代码树.......
Var i=10;
Var i;
3、执行
i=10;
4、读入下一个代码段
5、编译
6、执行
7、……
8、结束
<script type="text/javascript">//alert(i); //undefined 运行错误,语法没问题//var i = 10; //编译进行声明,执行进行赋值
</script>
首先,对上面这个script语句段进行编译,这时已经声明了变量i,这时它是undefind
例3:js中的错误类型
编译错误 :是指在编译时发生的错误,如:语法错误
<script type="text/javascript">//alert(i; //语法错误</script>
运行错误 :是指在运行时发生的错误
<script type="text/javascript">//alert(i); //undefined 运行错误,语法没问题//var i = 10; //编译进行声明,执行进行赋值alert(i; //编译错误alert(i); //运行错误alert('hello'); //编译在执行前,编译错了,代码就不执行了
</script>
无论是哪种错误,当前代码段中的后面的代码都不执行
编译时,如果发生错误,那么当前代码会停止执行,而执行后面代码段的内容
运行时,如果发生错误,但前面的代码已经执行完毕,所以不会影响前面的内容
alert('hello'); alert(i; //编译错误alert(i); //运行错误
无论是哪种错误,不会影响后面的代码的执行
<script type="text/javascript">alert(i; //编译错误alert(i); //运行错误</script><script type="text/javascript">alert('hello'); </script>
编译错误和运行错误出现时,对各自代码段的影响
<script type="text/javascript">alert(i; //如果代码中出现了编译错误,代码中所有的声明全都无效alert(i); //运行错误var first =10;function display(){alert('hello');}
</script><script type="text/javascript">alert(first);display();
</script>
Script 执行流程图
转载于:https://www.cnblogs.com/anstoner/p/6483198.html
Javascript-入门相关推荐
- 经典的JavaScript入门书
经典的 JavaScript 入门书 --<JavaScript基础教程(第7版)> 原版销售累计超过 150 000 册! 欢迎你使用 JavaScript !使用这种容易上手的程序设计 ...
- 原版销售累计超过150 000册的经典JavaScript入门书
媒体评论 如果你要学习 JavaScript,本书绝对不容错过. --JavaScript.about.com 一本伟大的 JavaScript入门书!适合初级程序员和 Web设计师. --Amazo ...
- 《jQuery与JavaScript入门经典》——2.6 小结
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第2章,第2.6节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
- 《jQuery与JavaScript入门经典》——第 1 章 动态Web编程简介 1.1理解Web服务器浏览器范式...
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第1章,第1.1节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
- JavaScript入门经典(第4版)
循序渐进精细讲解所有JavaScript知识点 指导您构建建出神入化的完美Web应用程序 JavaScript入门经典(第4版) 基本信息 原书名: Beginning JavaScript 原出版社 ...
- 《JavaScript入门经典(第6版)》——2.7 问答
本节书摘来自异步社区<JavaScript入门经典(第6版)>一书中的第2章,第2.7节,作者: [美] Phil Ballard 译者:李 军陈冀康,更多章节内容可以访问云栖社区&quo ...
- JavaScript入门【JavaScript专题1】
JavaScript入门 从今天开始就与大家一起学习JavaScript了 在本系列教程中,您将学习如何制作 JavaScript 驱动的网页. JavaScript 入门 在这里,您将了解使用 Ja ...
- 《JavaScript入门经典(第4版)》上第5章一个实例程序的修正,完善
今日,做<JavaScript入门经典(第4版)>第5章上的一个例题,感觉书上的代码有个小错误. 这是ch5_examp5.html上的一个实例,是计算一个数x保留y小数位后,四舍五入的结 ...
- JavaScript入门(part12)--内置对象
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 内置对象 Math对象 日期对象 数组对象 字符串对象 JavaScript入门 内置对象 Math对象 ...
- JavaScript入门(part11)--对象
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 对象 创建对象的三种方式 利用字面量创建对象 利用 new Object 创建对象 利用构造函数创建对象 n ...
最新文章
- 机器学习--多标签softmax + cross-entropy交叉熵损失函数详解及反向传播中的梯度求导
- 生命银行怎么样_银行双职工的家庭现状...
- seL4 microkernel学习资料
- 如何判断Linux load的值是否过高
- Ubuntu Tweak 0.8.2 发布
- ASP.NET Core中使用GraphQL - 第一章 Hello World
- ios开发ocr识别_传统图像处理技术,ocr识别技术算法
- css animate属性spend不生效
- SAP License:FI疑难问题小结
- 信息熵 条件熵 信息增益 信息增益比 GINI系数
- 批量杀死MySQL连接
- java 常用前端框架_Java Web前端到后台常用框架介绍
- 树莓派舵机 c语言,树莓派控制SG90舵机
- 计算机键入命令,win7系统安装软件出现命令行选项语法错误键入“ 命令/?”怎么办...
- 史上最全各种简历模板,自荐信模板和面试技巧
- php 时间戳 最大,PHP中大于2038年时间戳的问题处理
- html另存为对话框,前端实现弹出“另存为”对话框的三种方式
- 正则表达式匹配 整数和正整数
- ARP攻击,使用kali arpspoof
- iOS——3DES的加密
热门文章
- 关于set sql_trace=ture 的一些用法
- 纯文本文件的字符编码未声明_浅谈几种常见的字符编码
- 怎么组建战队_硬管加油技术在上世纪就诞生了,为何只有美国在用,我们怎么不用?...
- android build获取ext,android – 如何在Gradle中获取当前构建类型
- conv2d 公式_TF-卷积函数 tf.nn.conv2d 介绍
- 在游戏运营行业,Serverless 如何解决数据采集分析痛点?
- filter过滤器_不了解布隆过滤器?一文给你整的明明白白!
- Charles的断点调试(APP)
- ant接口自动化 junit_Jenkins + Ant自动运行Junit测试
- c语言初学者百题大战答案七,C语言百题大战2405how many minutes