web前端开发之JavaScript知多少？
结束了第一阶段html/css的学习的小伙伴们，终于迎来了第二阶段js的学习！
这时候就有小伙伴问了，js和我们之前学的html有什么区别呢？
一、基础不同
1、JS代码：基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
2、html代码：是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
二、用处不同
1、JS代码：用于Web应用开发,常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
2、html代码：结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
三、特点不同
1、JS代码：主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
2、html代码：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
下面，让我们一起揭开JavaScript的神秘面纱！！！
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。
JavaScript又是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
注：java和JavaScript没有任何的血缘关系，java是是由Sun 公司于1995年5月推出的，而javascript是于1995年由Netscape公司设计实现而成的，由于Netscape公司与Sun公司合作，Netscape高层希望它看上去能够像Java，因此取名为JavaScript！
举个例子：Java是李逵，JavaScript是李鬼，hhhh。
而一个完整的JavaScript应该由下列三个不同的部分组成
核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）
它能用来干什么呢？
js的一些用途：
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。//关于cookie和node.js 后期阶段我们会了解到 这里不作解释 感兴趣的小伙伴可以自行查询
基于Node.js技术进行服务器端编程。
js又有什么特色呢，让这么多的前端工程师连声叫好？
JavaScript脚本语言具有以下特点:
(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。 不同于服务器端脚本语言，例如php与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。
JavaScript的定义方式
1）方式一：直接定义在事件中：//行内式
<input type="button" value="第一个按钮" onclick="alert('hello world');"/>
注意：onclick="alert('hello world'); //字符串用单引号或双引号隔开，此处用单引号，因为会和前面的双引号成对。
2）方式二：在页面上<head></head>标签中嵌入<script></script>标签，标签中放置JavaScript代码：//内嵌式
例如：
<head>
<meta charset="utf-8"/>
<script language="javascript" type="text/javascript">
console.log("hello,world！");
</script>
</head>
3）方式三：将代码写在单独的.js文件中，在html页面的<head>里使用<script>引入：//外链式
<head> <script language="javascript" src="myScript.js"></script> </head>
JavaScript的代码错误查看
1）解释性代码，若代码错误，则页面无任何效果。
2）IE浏览器：使用开发工具。
3）Firefox浏览器：使用错误控制台查看。
JavaScript的注释
单行注释： // 注释语句 快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！
数据类型：
Js中的数据类型：
数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined
对比java中的数据类型：
整数：byte short int long
小数：float double
字符：char
布尔：boolean
字符串：String
变量：
定义：就是存放数据的、内疗可以存储任意数据
声明变量：
var 变量名称 = 存储的数据; (variable 变量)
变量命名规范：
1. 只能由字母、数字、_（下划线）、$（美元符号）组成。
2. 不能以数字开头。
3. 命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。
js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型：
数值型：var i = 1; var d = 2.35;
字符串：var str = "用心学习";
布尔型：var b = true;
对比Java:
java是强类型的语言，注重类型的定义，Java定义类型如下：
整型：int i = 1;
浮点型：double d = 2.35;
字符串：String str = “用心学习”;
布尔型：boolean b = true;
总结：js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。
检测数据类型：
typeof(value); 或者typeof value; 返回这个变量的类型.
说明 : 同一个变量, 可以进行不同类型的数据赋值.
<script type="text/javascript"> var a; alert(typeof a); // undefined a = 998; alert(typeof a); // number a = "用心学习"; alert(typeof a); // string a = true; alert(typeof a); // boolean </script>
算术运算符
+ - * / % ++ --
注意：
1. 由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。
2. 字符串和其他的数据使用+号运算，会连接成一个新的字符串。
3. 字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算
，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number
<script> alert(1234 / 1000 * 1000); // 1234 var s = "12"; s -= 10; alert(s); // 2 var s = "aa"; s -= 10; alert(s); // NaN Not a Number 不是一个数字 var s = "12"; s += 10; alert(s); // 1210 </script>
关系（比较）运算符
> >= < <= !=
== 等于（只比较内容） === 恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：true / false
<script>
// 请问1 : 3 > 5, 结果为 ?
alert(3 > 5); // false
// 请问2 : “22” == 22 结果为 ?
alert("22" == 22); // true (仅仅判断数值)
// 请问3 : “22” === 22 结果为 ?
alert("22" === 22); // false (恒等于, 数值和类型都要相等)
</script>
逻辑运算符
&& 与 true&&false ====>false
|| 或 true||false ====>true
！ 非 !true ====>false
false（理解）：false, 0, null, undefined
true（理解）：true, 非0, 非null, 非undefined
针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)
演示一：
<script> // 短路与 (一假即假) // 口诀 : 找第一个为假的值. // 请问1 : 8 < 7 && 3 < 4, 结果为 ? alert(8 < 7 && 3 < 4); // false // 请问2 : -2 && 6 + 6 && null 结果为 ? alert(-2 && 6 + 6 && null); // null // 请问3 : 1 + 1 && 0 && 5 结果为 ? alert(1 + 1 && 0 && 5); // 0 </script>
演示二:
<script> // 短路或 : 一真即真. // 口诀 : 找第一个为真的值. // 请问1 : 0 || 23 结果为 ? alert(0 || 23); // 23 // 请问2 : 0 || false || true 结果为 ? alert(0 || false || true); // true // 请问3 : null || 10 < 8 || 10 + 10结果为 ? alert(null || 10 < 8 || 10 + 10); // 20 // 请问4 : null || 10 < 8 || false结果为 ? alert(null || 10 < 8 || false); // false </script>
三元运算符：
条件？表达式1：表达式2
如果条件为true，返回表达式1的结果
如果条件为false，返回表达式2的结果
演示：
<script> // 请问1 : 3 ? “aaa” : “bbb” 结果为 ? alert(3 ? "aaa" : "bbb"); // aaa // 请问2 : 0 ? “ccc” : “ddd” 结果为 ? alert(0 ? "ccc" : "ddd"); // ddd </script>
if条件语句
这个和Java中if语句一样。
演示：
<script>
var score = 59;
if (score >= 90) {
alert("优秀");
} else if (score >= 80) {
alert("良好");
} else if (score >= 60) {
alert("及格");
} else {
alert("不及格");
}
</script>
switch分支结构
这个和java中switch结构一样。只是Java中表达式为：常量 整型（去long）、字符、字符串
演示：
<script>
var score = 59;
// 需求 : 将需要一个整型数值, 不想要小数点.
// window 对象的 parseInt 方法.
score = window.parseInt(score / 10 + "");
// alert(score);
switch (score) {
case 10:
case 9:
alert("优秀!");
break;
case 8:
alert("良好!");
break;
case 7:
case 6:
alert("及格!");
break;
default:
alert("不及格!");
break;
}
</script>
循环结构 while、do-while. for;
while(循环条件){循环体;}
do{循环体;}while(循环条件);
for(循环变量赋初值；循环条件；循环变量增值){循环语句;}
console.log（...）; 以日志的形式在控制台输出结果！
演示：
<script>
// 需求 : 统计 1~100 之间能够被3和7整除的数字个数
var count = 0;
// 1. 遍历 1~100 之间的所有整型数值
for (var i = 1; i <= 100; i++) {
// 2. 判断
if (i % 3 == 0 && i % 7 == 0) {
// alert(i);
console.log(i);
// 3. 累加个数
count++;
}
}
// 4. 查看结果
// alert(count);
console.log(count);
</script>
console.log显示如下：
循环嵌套
演示案例9*9乘法表
<style>
table {
/* 将 table 表格的线变成了细线 */
border-collapse: collapse;
/*color: red;*/
border-color: red;
}
</style>
<script>
// 需求 : 九九乘法口诀表
document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
document.write("<caption>九九乘法口诀表</caption>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "*" + i + "=" + (j*i) + " ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
效果如下：
这次就介绍到这，且听下回分解！886
祝：长风破浪会有时，直挂云帆济沧海！
- 点赞
- 收藏
- 关注作者
评论（0）