JavaScript入门
目标
1.知道什么是程序
2.知道什么是js
3.掌握js的基本用法
4.变量，运算符
前言：程序
什么是程序？
计算机程序（Computer Program），港、台译做电脑程式。计算机程序是一组计算机能识别和执行的指令，运行于电子计算机上，满足人们某种需求的信息化工具。
第一节：了解编程语言的发展史
-
人工
-
纸带穿孔：
0没有孔 1有孔
-
机器语言：第一代计算机语言称为机器语言。机器语言就是 0/1 代码。计算机只能识别 0 和 1。01010101010
-
汇编语言：汇编语言就是将一串很枯燥无味的机器语言转化成一个英文单词
ADD 0100101
缺点：可移植性差。
优点：速度贼快！
-
高级编程语言：
c c++ java python javaScript
面向过程：C
面向对象：java
编程思想。
面向接口
面向切面
第二节：JavaScript 语言的发展
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。 [1]
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。 [1]
第三节： JavaScript 基本语法
3.1 ECMA 基本语法组成
注释，变量，运算符，数据类型，流程控制，对象
3.2 JavaScript怎么用
程序的本质是进行数据处理，数据处理从数据的存取开始。
<script type="text/javascript">
// js的单行注释
// 定义一个变量，存储一个数据
var num = 10;
// 使用弹框方式将变量存储的数据显示出来
alert(num);
</script>3.2.1 使用HBuilder创建项目
javascript的两种定义方式:
-
页内脚本
在head标签内部，写script标签
外部脚本
在页面外部创建js文件，在页面中通过script标签引入进来
-
创建外部js文件
-
新建html文件，在html的head标签中，通过script标签的src属性引入外部js文件
<script type="text/javascript" src="js文件路径"></script>
3.3 JavaScript 注释
各种语言中的注释:
html语言注释(在html页面中)
<!--这是html语言注释-->css语言注释(在style标签内使用)
/* 在css代码块中用这个注释 在js,java和其他语言中， 这种注释方式都比较普遍 */js语言注释(在script标签内使用)
// 单行注释 /* js多行注释 */3.4 JavaScript 变量
3.4.1 什么是变量
变量来源于数学，是计算机语言中能储存计算结果或能表示值的抽象概念。
变量可以通过变量名访问。在指令式语言中，变量通常是可变的
在程序运行的时候，变量会对应内存中的一个存储区域，通过变量我们可以向这个内存区域存储数据，或者读取数据。
3.4.2 为什么要用变量
程序的本质是要进行数据处理，通过变量可以存储或访问数据，进行后续的操作。体现一种间接的思维方式。
3.4.3 变量的定义和使用
变量的语法:
// 定义变量存储数据var 变量名 = 数据; // 先定义变量，再赋值var 变量名;变量名 = 数据;其中:
-
var 是定义变量的关键字，程序读到var关键字的时候，就会在内存中开辟一块空间。这个空间的名字用变量名来标识。除了使用var可以定义变量开辟内存空间，在javascript 6之后，新增了两个关键字也可以定义变量
let(定义局部变量),const(常量变量)
-
变量名,用于标记在内存中开辟的一块空间。
a.变量名由字母、数字、下划线、$符号构成，不能以数字开头
b.变量名的写法：小驼峰(studentName)，一个名字有多个单词构成，第一个单词首字母小写，后面单词首字母大写
c. 自己定义的变量名，不能使用javascript语言的保留字
d. 变量名一定要有含义。做到见名知义。不能用类似 "var a ; var b"
e. 变量被重复定义时，会被覆盖
-
=表示赋值操作/运算，用于将右边的数据存储到左边的变量空间中 -
数据用表示特定信息的内容。数据分为:字符串数据,数值数据,其他类型的数据
-
;分号表示一个语句的结束。在js中按照规范要在一句代码结束后加";"。<!--内部js代码块--> <script type="text/javascript"> var name = "张三"; // 字符串数据 var sex = '男人'; // 字符串数据 var age = 20; // 数值数据 var tall = 1.7; // 数值数据 var isMarry = false; // 布尔值数据 //alert:系统弹窗函数 // alert(name); // alert(sex); // alert(age); // alert(tall); // alert(isMarry); // 使用控制台输出的方式，显示变量信息 // console: 标准浏览器中的工具类，用于向浏览器控制台输出信息 console.log(name,sex,age,tall,isMarry); </script>3.5 JavaScript中的输入输出语句
输出语句:通过程序向外部输出信息
// javascript中的输出语句 // 1.alert(数据/变量) 弹窗显示数据 // aaa 没有定义，不是变量，没有用引号括起来，因此不是数据，所以会出错 //alert(aaa); //alert("aaa"); //var s = "aaa"; //alert(s); //alert(20); //数值数据不用引号 //alert(1.8); // 2.console.log(数据/变量,..); 在浏览器控制台中输出信息 //console.log("aaa","bbb","ccc"); // var s1 = "aaa"; // var s2 = "bbb"; // var s3 = "ccc"; // console.log(s1,s2,s3); // s是一个变量,变量是一块内存空间，变量空间中的数据可以随便变化 // var s = "aaa"; // console.log(s); // s = "bbb"; // console.log(s); // s = "ccc"; // console.log(s); // 3.document.write(数据/变量); 直接在浏览器的页面中输出信息 //document.write("hello world<br/>"); //document.write("我爱北京天安门"); document.write("<p>hello world</p>"); document.write("<p>我爱北京天安门</p>");输入语句:通过外部向程序输入信息
语法: prompt("提示信息","默认值") <script type="text/javascript"> // 通过输入框，输入你的姓名，性别，年龄，身高,然后打印到页面上 var name = prompt("请输入姓名",""); var sex = prompt("性别","男"); var age = prompt("年龄","0"); var tall = prompt("身高","1"); // 将信息显示到页面上 //document.write(name,sex,age,tall); document.write("姓名:"+name+" 性别:"+sex+" 年龄:"+age+" 身高:"+tall); </script>3.6 js中数据类型
//数据是用于表示信息的载体 字符串数据: "张三",'李四',"aasdfasdf","100","2.34",'123' 数值数据: 100,1233,12.234,0.234 布尔值数据: true,false 空对象数据: null 未定义数据: undefined 对象类型的数据: json,Array...js中的数据类型:
简单类型:
string(字符串): "张三",'李四',"aasdfasdf","100","2.34",'123'
number(数值数据):100,1233,12.234,0.234
boolean(布尔值):true,false
null(空对象数据object): null
undefined(未定义类型数据):undefined
复杂类型:
function(函数),Array(数组),JSON...
var v ; // 初始定义变量，但是不赋值,此时v的是数据状态是undefined document.write(v+" "+typeof(v)+"<br/>"); v = "张三"; document.write(v+" "+typeof(v)+"<br/>"); v = 100; document.write(v+" "+typeof(v)+"<br/>"); v = 1.234; document.write(v+" "+typeof(v)+"<br/>"); v = true; document.write(v+" "+typeof(v)+"<br/>"); v = null; document.write(v+" "+typeof(v)+"<br/>"); v = undefined; document.write(v+" "+typeof(v)+"<br/>");3.7 js中的运算符
3.7.1 算术运算符
算术运算的结果是：数值
var num1 = 10; var num2 = 4; // 算术运算符:+,-,*,/,%,++,-- // document.write(num1+num2+"<br/>"); // document.write(num1-num2+"<br/>"); // document.write(num1*num2+"<br/>"); // document.write(num1/num2+"<br/>"); // document.write(num1%num2+"<br/>"); // +: 具有二义性 // a. 如果符号两边的数据都是数值，则做加法运算 // b. 如果符号两边的数据有字符串，则做拼接操作 // document.write("10"+10+"<br/>"); //拼接效果 // document.write(2*2*"2"*2*2+"<br/>"); //运算次序由左到右 // document.write(2*2*"a"*2*2); //NaN: not a number // ++ : 当前变量中的数据自增(自己加1),可以放在变量前面，也可以放在后面 // -- : 当前变量中的数据自减(自己减去1),可以放在变量前面，也可以放在后面 //var v = 10; //v++; //v--; //++v; //--v; //document.write(v); //var v = 10; // 变量之间可以赋值 //var v2 = v; // 当一句代码中有多步运算，那么++在前，在后，会影响计算结果 // 1. 当有多步运算时，++在后的时候，先做其它运算，再做自增 // 2. 当有多步运算时，++在前的时候，先做自增运算，再做其它运算 //var v2 = v++; // 赋值,自增 //var v2 = ++v; //document.write(v+" "+v2); var n = 10; document.write(++n + "<br/>"); document.write(n);3.7.2 赋值运算符
赋值运算结果是变量中存储的数据
注意:
=: 单纯的赋值操作+=: 增强赋值，先做加法运算，运算之后再赋值var n1 = 10; var n2 = 20; //n2 = n1; n2 += n1; // 等价: n2 = n2+n1 两步操作: 1. n2+n1 2. n2 = (n2+n1); document.write(n1+" "+n2);3.7.3 比较运算符
比较运算符的结果是布尔值:true，false
//var n1 = 10; // 一个等号是赋值，两个等号是判断 //var n2 = 5; // document.write((n1==n2)+"<br/>"); //相等判断 // document.write((n1!=n2)+"<br/>"); // 不等判断 // document.write((n1>n2)+"<br/>"); // document.write((n1>=n2)+"<br/>"); // document.write((n1<n2)+"<br/>"); // document.write((n1<=n2)+"<br/>"); // 一个数据的构成: 1.数据内容 2.数据类型 var v1 = 10; //数值数据10 var v2 = "10";// 字符串数据10 //document.write(v1==v2);// 只进行数值判断，不做类型判断 //document.write(v1===v2); //即比较数据内容，同时比较数据类型是否一致 //document.write(v1!=v2); //只比较数值 document.write(v1!==v2);// 比较数值，同时比较类型3.7.4 逻辑运算符
逻辑运算的结果也是布尔值: true,false
一般用来连接多个关系运算，构成一个复杂的条件表达式。
逻辑与: 连接的多个比较运算(条件)同时成立，则结果为true，否则结果为false
逻辑或: 连接的多个比较运算(条件)只要有一个成立，则结果为true,否则结果为false
逻辑非：对原有的结果取反
扫一扫
7817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
