您当前的位置:学院动态 > 行业资讯 > 正文

必须要精通Javascript的这些知识点


时间:2017-08-12 10:46    来源:顽石科技    编辑:www.mhsilh.com.cn
 
        今天,我想说一说在短期软件开发培训过程中,关于Javascript的学习建议:必须要精通Javascript的这些知识点。

精通Javascript
精通Javascript

       其实同学们在学习Javascript时,对web环境还不太熟悉,所以比较难以理解Javascript在以后开发过程中的实际意义,再者不同浏览器对Javascript的处理并非有统一标准,所以不建议此时将javascrip讲的太难。同时不论是javaweb、asp.net、还是php等动态网页开发语言,对Javascript都有刚性要求,所谓无Javascript无web,所以基础的Javascript功底一定要有。在具备这些Javascript基本功底后,辅以jquery,足以应付常用的Javascript开发要求。

下面罗列了在Javascript课程学习完毕后,我们应该要掌握的知识点。

1.Javascript基本概念
Javascript是一种运行在浏览器宿主环境下的脚本语言。
Javascript虽然和Java在名字相近,但是二者没有必然的联系。近似于雷锋和雷锋塔的关系。
Javascript包含3大块内容:ECMAScript、DOM、BOM。
Javascript代码一定要编写到<script type="text/Javascript"></script>的标记中间。
Javascript对大小写敏感。

2.Javascript变量和数据类型
Javascript的数据类型包括:number(数值型)、string(字符串)、boolean(布尔型)、undefined(未定义)、null(空)。
其中undefined和null相等。
Javascript是一种弱类型的编程语言。所有类型的变量,都是通过关键字var定义。变量的数据类型由它的值来确定。

//定义name变量,值为zhangsan
var name = "zhangsan";
var a;//注意,通过var声明变量后,该变量的数据类型是无法确定的。只有在赋值以后才能确定。
a = "nice";//a的数据类型就是string
a = false;//a的数据类型就是boolean
a = 5;//a的数据类型就变成了number
在开发过程中,我们可以通过typeof关键字来获取变量的数据类型。
var name = "zhangsan";
var type = typeof(name);//type的值为string
var a = "nice";
type = typeof(a);//type的值为string
a = false;
type = typeof(a);//type的值就变成了boolean
a = 5;
type = typeof(a);//type的值就变成了number

3.流程控制
Javascript中流程控制包括3种:顺序结构、选择结构、循环结构。
选择结构:
n if - else if - else if - else

var score = prompt("请输入学生成绩:");
//将输入的字符串转换为number
score = parseInt(score);
if(score>=90){
  document.write("优秀");
}else if(score>80){
  document.write("良好");
}else if(score>=60){
  document.write("及格");
}else{
  document.write("再接再厉");
}
注意:if - else if -else有很多变种:可以只有if;也可以既有if也有else;也可以在if后面添加多个else if而没有else。
n switch
注意:switch更适合于等值判断的情况。

var mingCi = 2;
switch(mingCi){
  case 1:
    document.write("奖励笔记本电脑一台");
break;
  case 2:
document.write("奖励移动硬盘一块");
break;
  case 3:
document.write("奖励U盘一个");
break;
  default:
    document.write("继续加油");
}
循环结构:
n While

var sum = 0;
var i = 1;
while(i<=100){
  sum += i;
  i++;
}
 
n do-while

var sum = 0;
var i = 1;
do{
  sum += i;
  i++;
}while(i<=100);
n for
var sum = 0;
for(var i = 1; i <= 100; i++){
  sum += i;
}
while、do-while、for之间的异同点:
他们三个都能实现循环操作。但是在不同的业务场景下,选择不同的循环会更加方便。如果事先知道循环的次数,那么首选for循环;如果不知道循环的次数则选择while或者do-while循环。如果循环在任何条件下至少会执行1次,那么可以使用do-while循环;如果有可能循环操作一次都不执行,则可以选择while循环。

4.BOM
BOM:Browser Object Model。浏览器对象模型。
因为Javascript是运行在浏览器中的脚本语言,所有有时会通过Javascript和浏览器进行交互,那么就要使用到BOM。
history对象:history.back()、history.forward()、history.go(number)、
location对象:location.reload()、location.href、location.hostName、location.host
弹框函数:alert()消息提示框、confirm()询问对话框、prompt输入对话框
定时器函数:setInterval()、setTimeout()、clearInterval()、clearTimeout()

<script type="text/Javascript">
  function refreshTime(){
var date = new Date();
document.getElementById("box1").innerHTML = date.toString();
}
setInterval(refreshTime, 1000);
</script>
<script type="text/Javascript">
  function refreshTime(){
var date = new Date();
document.getElementById("box1").innerHTML = date.toString();
setTimeout(refreshTime, 1000);
}
setTimeout(refreshTime, 1000);
</script>

5.DOM
DOM:Document Object Model。文档对象模型。通过Javascript和Html文档进行交互。
1) 获取元素
n 根据getElementXXX系列的方法
getElementById()、getElementsByName()、getElementsByTagName()
n 根据节点之间的关系获取元素
parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling()
2) 创建元素
document.createElement(tagName);
3) 添加元素
Element.appendChild()、Element.insertBefore(a, b);
4) 删除元素
Element.removeChild(childNode);
5) 克隆元素
Element.cloneNode(true|false)
6) 节点类型
根节点、元素节点、属性节点、文本节点、注释节点... ...
n nodeType
元素节点:1、属性节点:2、文本节点:3
n nodeName
元素节点:标签名、属性节点:#attr、文本节点:#text
n nodeValue
元素节点:null、属性节点:属性值、文本节点:文本内容
7) 事件操作
n 事件类型:
click、dblclick、load、mouseover、mouseout、mouseenter、mouseleave、keyup、keydown、keypress、blur、change。

<script type="text/Javascript">
function start(){
  ...
}
function getText(){
  ...
}
</script>


6.常用对象
1) 数组Array
Javascript中的数组和Java中的数组差异很大。Javascript数组中存储的多个元素的数据类型可以各不相同;Javascript数组中存储的元素个数可以随时动态添加,而Java中数组的长度一旦确定后就不能更改。

<script type="text/Javascript">
  var array = new Array("zhangsan", 55, false, "nice");
  for(var i = 0; i < array.length; i++){
    document.write(array[i]);
}
//push()向数组中添加元素
//reverse()倒置数组中的元素
//pop()将数组中最后一个元素移除掉
//join()将数组中所有的元素使用指定的符号拼接成一个字符串
</script>
2) 日期Date
<script type="text/Javascript">
var date = new Date();//获取系统当前时间
//getFullYear()获取完整的年份
//getMonth()获取月份。介于0-11之间
//getDate()获取日期
//getHours()获取小时
//getMinutes()获取分钟
//getSeconds()获取秒
//getTime():获取当前时间距离1970-01-01 00:00:00的毫秒数
//setXxx():设置xxx
</script>
3) 数学运算Math
<script type="text/Javascript">
  var num1 = Math.ceil(15.7);//16   获取大于等于15.7的最小整数
  var num2 = Math.floor(15.7);//15  获取小于等于15.7的最大整数
  //Math.round()  四舍五入取整
  //Math.random()  获取随机数,介于0-1之间的小数。  Math.floor(Math.random()*10)+1
  //Math.power(m, n)  获取m的n次方
  //Math.squart(m)   获取m的开方  
</script>

7.常用的函数
1) 字符串相关函数

<script type="text/Javascript">
  //indexOf(string)  获取一个字符串在另一个字符串中出现的索引位置。-1表示没有出现过
//lastIndexOf(string)  获取一个字符串在另一个字符串中出现最后一次的索引位置
//substring(index, length)  取子串
//split()  使用指定字符将目标字符串分割成一个数组
//toLowerCase()  转换成小写
//toUpperCase()  转换成大写  
</script>
2) 数据类型转换相关函数
<script type="text/Javascript">
  //parseInt(string)  将字符串转换为整数
  //parseFloat(string)   将字符串转换为浮点数
</script>
 
 

本文有顽石科技原创!
转载请注明:http://www.mhsilh.com.cn/html/2017/xingyezixun_0812/546.html

? 必中一位 云南快乐十分选号技巧 嵘创信投 3D 体彩排列五开奖走势 河南11选5 20010期七乐彩开奖结果 宁夏11选5开奖走势图 2019十大股票推荐 排列3开奖直播 香港六合彩彩图 吉林十一选五 快乐飞艇人工计划预测 广西快乐十分开奖走势图 黑龙江省36选7彩票开奖查询 贵州十一选五基本走势图表 北京十一选五遗漏数