javascript 简介

Posted 大伦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 简介相关的知识，希望对你有一定的参考价值。

javascript:


一、JavaScript嵌入页面的方式


　　1、行间事件（主要用于事件）
　　　　<input type="button" name="" onclick="alert(‘ok！‘);">
　　2、页面script标签嵌入
　　　　<script type="text/javascript">
　　　　　　var a = ‘你好！‘;
　　　　　　alert(a);
　　　　</script>
　　3、外部引入
　　　　<script type="text/javascript" src="js/index.js"></script>



二、注释与变量：


　　1、单行注释：//

　　2、多行注释：/* */

　　3、变量：
　　　　#弱类型语言，类型由值来决定
　　　　var a = 123，b = ‘abc‘;
　　　　#变量类型：
　　　　number、string、boolean、undefined(定义了变量，没赋值)、null
　　　　复合类型：object

三、获取元素与操作元素：

　　1、属性中的‘-‘不出现在script写法中，用驼峰式代替。
　　2、特殊：操作class属性时，要用className。
　　3、通过[]方式可以写变量。
　　4、通过innerhtml可以读写元素包裹的内容。

　　#demo1：操作元素
　　<!DOCTYPE html>
　　<html lang="zh-CN">

　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>操作元素</title>
　　　　<script type=‘text/javascript‘>
　　　　　　window.onload = function(){
　　　　　　　　document.getElementById(‘div1‘).title = ‘what a nice day‘;
　　　　　　　　var oDiv = document.getElementById(‘div1‘);
　　　　　　　　oDiv.style.color = ‘red‘;
　　　　　　　　oDiv.style.fontSize = ‘30px‘;

　　　　　　　　var attr = ‘background‘;
　　　　　　　　oDiv[‘style‘][attr] = ‘gold‘;

　　　　　　　　alert(oDiv.innerHTML);
　　　　　　}
　　　　</script>
　　</head>

　　<body>
　　　　<input type=‘button‘ name=‘‘ value=‘tank‘ onclick="alert(‘hello!‘)">
　　　　<div id=‘div1‘ title=‘what a fuking day!‘>这是一个元素</div>

　　</body>
　　</html>

　　#demo2换肤
　　<!DOCTYPE html>
　　<html lang="en">

　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>换肤</title>
　　　　<style type=‘text/css‘>
.　　　　　　box1{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　　　background-color:gold;
　　　　　　}

　　　　　　.box2{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　　　background-color:red;
　　　　　　}
　　　　</style>
　　　　<script type=‘text/javascript‘>
　　　　　　window.onload = function(){
　　　　　　　　document.getElementById(‘btn01‘).onclick = skin01;
　　　　　　　　document.getElementById(‘btn02‘).onclick = skin02;

　　　　　　}
　　　　　　function skin01(){
　　　　　　　　document.getElementById(‘link‘).className = ‘box1‘;
　　　　　　}
　　　　　　function skin02(){
　　　　　　　　document.getElementById(‘link‘).className = ‘box2‘;
　　　　　　}
　　　　</script>
　　</head>

　　<body>

　　　　<input type=‘button‘ name=‘‘ value=‘皮肤1‘ id=‘btn01‘ >
　　　　<input type=‘button‘ name=‘‘ value=‘皮肤2‘ id=‘btn02‘ >
　　　　<div class=‘box1‘id=‘link‘></div>

　　</body>

　　</html>


四、匿名函数


　　#伪代码
　　window.onload = function(){
　　　　var oDiv = document.getElementById(‘div1‘);
　　　　/*oDiv.onclick = myalert;
　　　　function myalert(){
　　　　alert(‘ok‘);
　　　　}
　　　　*/
　　　　oDiv.onclick = function(){
　　　　alert(‘ok‘);
　　　　}
　　}
　　<body>
　　　　<div id=‘div1‘>标签</div>
　　</body>

 

五、switch 多重判断语句，case后面是变量的值。


　　var today = 2;
　　switch (today){
　　　　case 1:
　　　　　　alert(‘数学‘);
　　　　　　break;
　　　　case 2:
　　　　　　alert(‘语文‘);
　　　　　　break;
　　　　case 3:
　　　　　　alert(‘外语‘);
　　　　　　break;
　　　　default:
　　　　　　alert(‘不补习‘);
　　}


六、数组

　  建议使用第二种创建方式
　　var aRr1 = new Array(1,2,3);
　　var aRr2 = [‘a‘,‘b‘,‘c‘];


　　1、join
　　　　var sTr = aRr2.join(‘-‘);
　　2、增加/删除元素,push/pop 用法一致
　　　　#这里是从前面增/删
　　　　aRr2.unshift(0);
　　　　aRr2.shift();
　　3、反转数组
　　　　aRr2.reverse();
　　4、splice 同时增加删除元素
　　　　#括号里分别是从第几个元素开始、删几个、添加的元素。
　　　　aRr2.splice(2,1,6,7,8);
　　5、通过标签获取元素
　　　　document.getElementsByTagName(‘元素名‘)；
　　6、for 循环
　　　　for(i=0;i<n;i++){}

　　7、数组去重：
　　　　var aRr = [1,3,5,7,3,3,2,6,45,2,6,3,2];
　　　　var aRr2 = [];
　　　　for(var i=0;i<aRr.length;i++){
　　　　　　if (aRr.indexof(aRr[i]) == i){
　　　　　　　　aRr2.push(aRr[i]);
　　　　　　}
　　　　}



七、Javascript组成


　　1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
　　2、DOM 文档对象模型 操作html和css的方法
　　3、BOM 浏览器对象模型 操作浏览器的一些方法



八、字符串处理方法


　　1、字符串合并操作：“ + ”
　　2、parseInt() 将数字字符串转化为整数
　　3、parseFloat() 将数字字符串转化为小数
　　　　#小数计算bug，会导致结果不准：
　　　　var a = 0.1;
　　　　var b = 0.2;
　　　　alert(parseFloat(a) + parseFloat(b));
　　　　#解决方法：
　　　　alert((parseFloat(a)*100 + parseFloat(b)*100)/100);
　　4、split() 把一个字符串分隔成字符串组成的数组
　　5、charAt() 获取字符串中的某一个字符
　　6、indexOf() 查找字符串是否含有某字符，没找到返回-1
　　7、substring() 截取字符串 用法： substring(start,end)（不包括end）
　　8、toUpperCase() 字符串转大写
　　9、toLowerCase() 字符串转小写
　　10、字符串反转：
　　　　var sTr = ‘12435235dxcfzxcvom45634‘;
　　　　var sTr2 = sTr.split(‘‘).reverse().join(‘‘);



九、调试程序的方法


　　1、alert
　　2、console.log
　　3、document.title

　　#parseInt 和 parseFloat不能正确判断NaN，可以用isNaN
　　#demo：计算器
　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>计算器</title>
　　　　<script>
　　　　　　window.onload = function(){
　　　　　　　　var oInput1 = document.getElementById(‘input01‘);
　　　　　　　　var oInput2 = document.getElementById(‘input02‘);
　　　　　　　　var oBtn = document.getElementById(‘btn‘);
　　　　　　　　var oSel = document.getElementById(‘sel‘);

　　　　　　　　oBtn.onclick = function(){
　　　　　　　　　　var num1 = oInput1.value;
　　　　　　　　　　var num2 = oInput2.value;
　　　　　　　　　　var cal = sel.value;

　　　　　　　　　　if(num1==‘‘ || num2==‘‘){
　　　　　　　　　　　　alert(‘输入框不能为空‘);
　　　　　　　　　　　　return;
　　　　　　　　　　}
　　　　　　　　　　if(isNaN(num1) || isNaN(num2)){
　　　　　　　　　　　　alert(‘只能输入数字！‘);
　　　　　　　　　　　　return;
　　　　　　　　　　}

　　　　　　　　　　switch(cal){
　　　　　　　　　　　　case ‘+‘:
　　　　　　　　　　　　　　alert((parseFloat(num1)*100+parseFloat(num2)*100)/100);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　case ‘-‘:
　　　　　　　　　　　　　　alert((parseFloat(num1)*100-parseFloat(num2)*100)/100);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　case ‘*‘:
　　　　　　　　　　　　　　alert(((parseFloat(num1)*100)*(parseFloat(num2)*100))/10000);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　case ‘/‘:
　　　　　　　　　　　　　　alert((parseFloat(num1)*100)/(parseFloat(num2)*100));
　　　　　　　　　　　　　　break;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　</script>
　　</head>
　　<body>
　　　　<input type=‘text‘ name=‘‘ id=‘input01‘>
　　　　<select id=‘sel‘>
　　　　　　<option>+</option>
　　　　　　<option>-</option>
　　　　　　<option>*</option>
　　　　　　<option>/</option>
　　　　</select>
　　　　<input type=‘text‘ name=‘‘ id=‘input02‘>
　　　　<input type=‘button‘ name=‘‘ value=‘计算‘ id=‘btn‘>
　　</body>
　　</html>


十、定时器

 

 

　　1、demo定时弹框伪代码

　　<script>
　　　　window.onload = function(){
　　　　　　var oPop = document.getElementById(‘pop‘);
　　　　　　var oShut = document.getElementById(‘shut‘);
　　　　　　function showpop(){
　　　　　　oPop.style.display = ‘block‘;
　　　　　　}
　　　　　　setTimeout(showpop,3000);

　　　　　　oShut.onclick = function(){
　　　　　　　　oPop.style.display = ‘none‘;
　　　　　　}
　　　　}
　　</script>


　　2、关闭定时器：
　　　　var timer = setTimeout(function(){alert(‘hello‘);},3000);
　　　　clearTimeout(timer);


　　3、反复定时器：
　　　　var timer2 = setInterval(function(){alert(‘hi‘);},2000);

 

　　4、demo倒计时伪代码：
　　<script type="text/javascript">
　　　　window.onload = function(){
　　　　　　var oDiv = document.getElementById(‘div1‘);
　　　　　　function timeleft(){
　　　　　　　　var now = new Date();
　　　　　　　　var future = new Date(2020,1,1,0,0,0);
　　　　　　　　var lefts = parseInt((future-now)/1000);
　　　　　　　　var day = parseInt(lefts/86400);
　　　　　　　　var hour = parseInt(lefts%86400/3600);
　　　　　　　　var min = parseInt(lefts%86400%3600/60);
　　　　　　　　var sec = lefts%60;
　　　　　　　　str = ‘距离2020年1月1日0点还剩下‘+day+‘天‘+hour+‘时‘+min+‘分‘+sec+‘秒‘;
　　　　　　　　oDiv.innerHTML = str;
　　　　　　}
　　　　　　timeleft();
　　　　　　setInterval(timeleft,1000);
　　　　}

　　</script>
　　......
　　<div id="div1"></div>


十一、封闭函数与闭包

 

　　1、封闭函数
　　(function(){
　　　　var oDiv = document.getElementById(‘div1‘);
　　　　oDiv.style.color = ‘red‘;
　　})();

　　#还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
　　!function(){
　　　　var oDiv = document.getElementById(‘div1‘);
　　　　oDiv.style.color = ‘red‘;
　　}()

　　2、闭包：
　　　　函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回


　　#闭包用处
　　2-1、将一个变量长期驻扎在内存当中，可用于循环中存索引值
　　　　<script type="text/javascript">
　　　　　　window.onload = function(){
　　　　　　　　var aLi = document.getElementsByTagName(‘li‘);
　　　　　　　　for(var i=0;i<aLi.length;i++)
　　　　　　　　{
　　　　　　　　　　(function(i){
　　　　　　　　　　　　aLi[i].onclick = function(){
　　　　　　　　　　　　　　alert(i);
　　　　　　　　　　　　}
　　　　　　　　　　})(i);
　　　　　　　　}
　　　　　　}
　　　　</script>
　　　　......
　　　　<ul>
　　　　　　<li>111</li>
　　　　　　<li>222</li>
　　　　　　<li>333</li>
　　　　</ul>

　　2-2、私有变量计数器，外部无法访问，避免全局变量的污染
　　　　<script type="text/javascript">

　　　　　　var count = (function(){
　　　　　　　　var a = 0;
　　　　　　　　function add(){
　　　　　　　　　　a++;
　　　　　　　　　　return a;
　　　　　　　　}
　　　　　　　　return add;
　　　　　　})()

　　　　　　count();
　　　　　　count();
　　　　　　var nowcount = count();
　　　　　　alert(nowcount);

　　　　</script>


十二、内置对象：


　　1、document

　　　　document.referrer //获取上一个跳转页面的地址(需要服务器环境)
　　2、location

　　　　window.location.href //获取或者重定url地址
　　　　window.location.search //获取地址参数部分
　　　　window.location.hash //获取页面锚点或者叫哈希值
　　3、Math

　　　　Math.random 获取0-1的随机数
　　　　Math.floor 向下取整
　　　　Math.ceil 向上取整


　　　　demo随机取10个 10到20 的整数
　　　　<script>
　　　　var a = 10;
　　　　var b = 20;

　　　　var arr = [];

　　　　for(var i=0;i<10;i++){
　　　　　　var num = Math.floor(Math.random()*(b-a+1)+a);
　　　　　　arr.push(num);
　　　　}

　　　　alert(arr);
　　　　</script>


十三、面向对象设计


　　1、单体
　　<script type="text/javascript">
　　　　var Tom = {
　　　　　　name : ‘tom‘,
　　　　　　age : 18,
　　　　　　showname : function(){
　　　　　　　　alert(‘我的名字叫‘+this.name);
　　　　　　},
　　　　　　showage : function(){
　　　　　　　　alert(‘我今年‘+this.age+‘岁‘);
　　　　　　}
　　　　}
　　</script>

　　2、工厂模式
　　<script type="text/javascript">
　　　　function Person(name,age,job){
　　　　　　var o = new Object();
　　　　　　o.name = name;
　　　　　　o.age = age;
　　　　　　o.job = job;
　　　　　　o.showname = function(){
　　　　　　　　alert(‘我的名字叫‘+this.name);
　　　　　　};
　　　　　　o.showage = function(){
　　　　　　　　alert(‘我今年‘+this.age+‘岁‘);
　　　　　　};
　　　　　　o.showjob = function(){
　　　　　　　　alert(‘我的工作是‘+this.job);
　　　　　　};
　　　　　　return o;
　　　　}
　　　　var tom = Person(‘tom‘,18,‘程序员‘);
　　　　tom.showname();

　　</script>

　　3、构造函数
　　<script type="text/javascript">
　　　　function Person(name,age,job){
　　　　　　this.name = name;
　　　　　　this.age = age;
　　　　　　this.job = job;
　　　　　　this.showname = function(){
　　　　　　　　alert(‘我的名字叫‘+this.name);
　　　　　　};
　　　　　　this.showage = function(){
　　　　　　　　alert(‘我今年‘+this.age+‘岁‘);
　　　　　　};
　　　　　　this.showjob = function(){
　　　　　　　　alert(‘我的工作是‘+this.job);
　　　　　　};
　　　　}
　　　　var tom = new Person(‘tom‘,18,‘程序员‘);
　　　　var jack = new Person(‘jack‘,19,‘销售‘);
　　　　alert(tom.showjob==jack.showjob);
　　</script>

　　4、原型模式,实现对象公用同一个方法
　　<script type="text/javascript">
　　　　function Person(name,age,job){
　　　　　　this.name = name;
　　　　　　this.age = age;
　　　　　　this.job = job;
　　　　}
　　　　Person.prototype.showname = function(){
　　　　　　alert(‘我的名字叫‘+this.name);
　　　　};
　　　　Person.prototype.showage = function(){
　　　　　　alert(‘我今年‘+this.age+‘岁‘);
　　　　};
　　　　Person.prototype.showjob = function(){
　　　　　　alert(‘我的工作是‘+this.job);
　　　　};
　　　　var tom = new Person(‘tom‘,18,‘程序员‘);
　　　　var jack = new Person(‘jack‘,19,‘销售‘);
　　　　alert(tom.showjob==jack.showjob);
　　</script>

　　5、继承
　　#call 和 apply：可以改变this的指向，用来继承属性。
　　#方法继承：将父类的一个实例赋值给子类的原型属性。
　　<script type="text/javascript">

　　　　function fclass(name,age){
　　　　　　this.name = name;
　　　　　　this.age = age;
　　　　}
　　　　fclass.prototype.showname = function(){
　　　　　　alert(this.name);
　　　　}
　　　　fclass.prototype.showage = function(){
　　　　　　alert(this.age);
　　　　}
　　　　function sclass(name,age,job)
　　　　{
　　　　　　fclass.call(this,name,age);
　　　　　　this.job = job;
　　　　}
　　　　sclass.prototype = new fclass();
　　　　sclass.prototype.showjob = function(){
　　　　　　alert(this.job);
　　　　}
　　　　var tom = new sclass(‘tom‘,19,‘全栈工程师‘);
　　　　tom.showname();
　　　　tom.showage();
　　　　tom.showjob();
　　</script>


 


































































































































































































































































































































































































































































以上是关于javascript 简介的主要内容，如果未能解决你的问题，请参考以下文章

HTML-教案-JavaScript简介

01-Javascript简介(了解)

JavaScript入门第一章（JavaScript简介）

javascript构成简介

JavaScript简介

JavaScript入门经典的内容简介