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)