一、什么是JS(Javascript)?

  Javascript是一种脚本语言,被广泛用于Web应用开发,常用来为网页添加各式各样的功能,为用户提供更加流畅的浏览效果。

  Javascript严格区分大小写。

前端三剑客:html+css+js

  html:结构(房子)
  css:样式(装修)
  js:行为(动态的修改行为和样式:房子的结构和装修想改就改)

使用JS的三种写法:

  1、在标签内部完成(不常用)

例:(alert("弹窗内容"):出现一个弹窗)

<a href="javascript:alert(0);">点我啊!</a>
<p onclick="alert('来啦老弟!')">请点击我!</p>

  2、在script标签中完成(注意:script标签可以写在html中的任意位置,但建议写在页面最底部,利于提高用户体验)

<script type="text/javascript">
alert("哈哈哈");
</script>

  

  3、外连式(创建一个Js文件,里边写的都是Js代码,然后再html中引用)

html文件中引用js文件:

    <!-- 因为ha.js文件和咱们这个html文件在同一文件夹,所以路径直接写src="ha.js" -->
<script type="text/javascript" src="ha.js"></script>

js文件(后缀为.js的文件):

//js代码就写在这里,如下:

//当页面刷新就会弹窗以下弹框
window.onload=function(){
//alert()是一个弹窗
alert("欢迎您的到了!");
}

二、JS的特性

  1、js的数据类型

  js中的数据类型只有三种:number,String,boolean

    number:所有数字类型的统称。

    String:字符串类型。

    boolean:布尔类型(true/false)

  2、特殊类型

    NaN:出现非数字

    Infinity:除数为0

    undefined:未定义

    null:空(必须主动赋值才会是null,没有赋值都为undefined)

  3、运算符

    ==:代表普通比较

    ===:代表全等

    " "和undefined表示没有值:null其实是一个值

    ||:或(注意:在java中,||返回的一定是boolean值,但在js中,返回的是第一个为true的值)

三、具体实例

  1、JS预编译    

    js的代码执行顺序是从上往下执行,但在代码执行之前js会事先大概扫描一遍,把所有变量的定义放到最前面(只是定义,不包括值)

<script type="text/javascript">

    //js的代码执行顺序是从上往下执行
//但在代码执行之前js会事先大概扫描一遍,把所有变量的定义放到最前面(只是定义,不包括值) var use="23";
console.debug(use);
//结果为23 var userna;
console.debug(userna);
//结果为undefined console.debug(us);
var us;
//结果为undefined console.debug(username);
var username="23";
//结果为undefined console.debug(usern);
//直接报错,因为usern没定义 </script>

 

  2、对象三步曲

     1、创建对象

    2、设置对象的属性和方法:添加,修改,删除

    3、获取对象的属性和方法

<script type="text/javascript">
//1、创建对象
//var obj = new object();
var obj = {}; //2.设置对象的属性与方法(.和[]是一样的)
//添加属性方法一:
obj.name="小王"
obj.age =23;
obj.say = function(){
console.debug("过来呀!"); }
//添加属性方法二:
obj["name"]="小王";
obj["age"] =23;
obj["say"]= function(){
console.debug("过来呀!");
} /*
for...in是用于循环与遍历数组/对象的
数组:key就是下标
对象:key就是对象的属性
*/
for(var key in obj){
//key是下标
//输出属性和属性类型
console.debug(obj[key],typeof obj[key]); //如果obj对象的属性类型为方法,就输出
if(typeof obj[key] == "function"){
//输出属性
console.debug(obj[key]);
//调用对象中 的方法属性
obj[key]();
}
} //修改(修改与添加设置写法是一样的)
obj.name="小李"; //删除某一个属性
delete obj.age; //3.获取属性和方法
console.debug(obj.name);
console.debug(obj.age);
console.debug(obj.say);
obj.say(); </script>

  3、arguments(获取到调用函数时传进去的所有参数) 

    js内置了很多对象(如:arguments ): 内置对象(js自动为你准备好的)

    arguments -> 每次调用方法都会在方法中创建这对象

    arguments -> 伪数组(它里面装的就是这个方法的所有参数)

<script type="text/javascript">
/**
js中调用函数(方法)和参数无关
js内置了很多对象: 内置对象(js自动为你准备好的)
arguments -> 每次调用方法都会在方法中创建这对象
arguments -> 伪数组(它里面装的就是这个方法的所有参数)
*/
function add(){
//打印每次调用add方法时传的所有参数
console.debug(arguments)
var result = 0;
for(var i=0;i<arguments.length;i++){
//将传进add方法的参数全部加起来
result += arguments[i];
}
return result;
} console.debug(add(5));  //5
console.debug(add(5,8));  //13
console.debug(add(5,8,2));  //15
console.debug(add(5,8,2,5));  //20 </script>

  4、js中调用函数(方法)和参数无关 

    注意:调用函数和参数无关,如果出现相同名字的方法,根据js代码从上往下执行的原则,下面的方法会覆盖上面的方法。

    返回值:想返回什么直接return 值 进行返回,如果没有return,自动返回undefined。

    JS中一切都是对象

    函数就是方法,方法就是函数

    函数:面向过程的说法 ;方法:面向对象的说法

<script type="text/javascript">
//一切都是对象
//函数就是方法,方法就是函数
// 函数:面向过程的说法 方法:面向对象的说法 function say(){
alert(0);
}
say(); //调用函数必须要加一个括号 var say = new Function("a","b","return a+b;");
console.debug(say(4,6)); /**
注意:调用函数和参数无关,如果出现相同名字的方法,根据js代码从上往下运行原则,下面的方法会覆盖上边的方法
返回值:想返回什么直接return 值 进行返回,如果没有return,自动返回undefined
*/
function say(a,b){
alert(a+b);
} console.debug(say(5,6));//控制台打印11
console.debug(say(5));//控制台打印NaN,因为第二个参数为undefined
console.debug(say(5,6,7));//控制台打印11 say(4,6);
</script>

  

  5、动态调用方法

  使用.与[]是一个效果(就是说可以用.的都可以用[])

<script type="text/javascript">

    //我们拿一个对象的属性,使用.与[]是一个效果(就是说可以用.的都可以用[])
console.debug(window.username);
console.debug(window["username"]);
//用[]调用方法,称为:动态调用(因为这样写方法名就可以随意更换了,但参数还在)
window["say"](5,5);
console.debug(window); </script>

 

  6、全局变量    

      window->我们在外部定义【全局变量:script标签里面,方法外面】的所有的变量以及方法都属于顶层对象,可以直接用window点出来

      注意:定义的全局变量请不要使用如:name,close,onclick,onclose........作为名字,它们都是JS中的关键字,使用了会把js原有的名字覆盖,会出问题。

    查看js的关键字:console.debug(window);    这句代码会在浏览器控制台上打印出JS中的关键字

<script type="text/javascript">

    var username = "张三";

    function say(a,b){
alert(a+b);
}
console.debug(window);
console.debug(username);
console.debug(window.username);
window.say(5,7); </script>

  

  7、对象的拷贝

<script type="text/javascript">
var obj01 = {
name:"小八戒",
age:34,
email:"xxx@qq.com"
}
var obj02 = {
name:"小悟空"
};
//遍历第一个对象,把它的所有属性交给第二个对象
for(var key in obj01){
//判断一个对象是否有这个属性
// hasOwnProperty()来判断是否已经存在这个属性
if(!obj02.hasOwnProperty(key)){
obj02[key]= obj01[key];
}
} console.debug(obj01)
console.debug(obj02) </script>

  8、函数也是一个对象

    函数也是一个对象,也可以创建属性,还可以在自己基础上再创建方法

<script type="text/javascript">

    //函数也是一个对象
function say(){
alert(0);
}
//say()方法添加name,age,sex,hello()属性
say.name = "haha"; //name是一个只读属性
say.age = 5;
say.sex = true;
//创建hello()方法
say.hello = function(){
alert("hello...")
} console.debug(say);
//调用say方法的属性hello()方法
say.hello(); </script>

  9、this

    this在JS中是一个很重要,很常用的属性,谁调用,this就指向谁。

<script type="text/javascript">

    var obj01 = {
name:"小张",
age:12
};
var obj02 ={
name:"小王",
age:45
} //谁调用,this就指向谁
var say = function(a,b){
console.debug(a,b);
console.debug(this.name+","+this.age);
} obj01.hello = say;
obj01.hello();
obj02.hello = say;
obj02.hello(); //改变this的指向
/**
call和apply都可以改变this的指向
call:是可变 参数方案,直接传参
apply:第二个参数必需是一个数组
*/
say.call(obj01,3,6);
say.apply(obj02,[4,6]) </script>

  10、prototype

<script type="text/javascript">
/**
prototype:为原生对象扩展一个方法(按照自己需要的格式显示时间)
*/
Date.prototype.format = function(){
console.debug(this)
//按照自己需要的格式显示时间
return this.getFullYear()+"-"+(this.getMonth()+1)+"-"+this.getDate();
} var date = new Date();
console.debug(date.getMonth())
console.debug(date.getFullYear()) console.debug(date.format()); </script>

  11、回调函数

<script type="text/javascript">
/**
* 我们可以把一个函数当作另外一个函数的属性传过去,而传过去的这个函数我们把它称之为回调函数
*/
/*
var i = 0;
setInterval(function(){
console.debug(i++);
},1000);
*/
var i=0;
function haha(){
console.debug(i++)
}
//定时器:每过一秒把haha()函数当setInterval()函数的属性传回去再次执行
setInterval(haha,1000); </script>

  12、匿名函数

<script type="text/javascript">
/**
* 匿名函数就是一个没有名称的函数 它可以改变代码的作用域
jQuery $
*/
(function(a,b){
console.debug(a+b)
})(3,9) </script>

  13、闭包

<script type="text/javascript">

//闭包,指的是语法。简单理解就是:函数中可以使用函数之外定义的变量。一种封装特性
var username ="王权富贵";
function say(){
//这里的函数之外的变量指的是username
console.debug(username);
}
//调用函数/方法
say(); </script>

  14、计数器

<script type="text/javascript">

(function(){
var result = 0;
window.getRes = function(){
result++;
return result;
}
})() //让变量result的值只能通过方法修改,无法直接修改
console.debug(getRes()); //
console.debug(getRes()); // console.debug(getRes()); //
console.debug(getRes()); //
console.debug(getRes()); // </script>

  15、事件监听

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件监听测试</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
//"click.qing":给这个点击事件取一个名叫qing
$("#mybtn").on("click.qing",function(){
console.debug("明天天晴!!!");
}) $("#mybtn").on("click.feng",function(){
console.debug("明天有风!!!");
}) $("#mybtn").on("click.guang",function(){
console.debug("明天逛街!!!");
}) //取消逛街这个方法
$("#mybtn").off("click.guang");
})
</script>
</head>
<body> <button id="mybtn">点我有惊喜哦!!!</button> </body>
</html>

  16、jQuery继承

<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){ var obj = {tel:"1836****000",sex:true};
var obj1 = {name:"达康书记",age:100};
var obj2 = {};
//把第一个对象的属性,交给第二个对象
//把后面的对象的属性,交给前面
$.extend(obj2,obj1,obj); console.debug(obj2); })
</script>

  17、jQuery自定义插件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义插件</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript"> $.fn.changeColor = function(){
//.hover():鼠标移上来与移出去的事件
this.hover(
function(){
//鼠标移上来,class属性上再添加一个名字:youdiv
$(this).addClass("youdiv");
},
function(){
//鼠标移出去,class属性上添加的名字删除
$(this).removeClass("youdiv");
}
)
} $(function(){
//调用自定义的插件
$("#mydiv").changeColor(); })
</script> <style type="text/css">
.mydiv{
width:100px;
height:100px;
background: red;
}
.youdiv{
background: blue;
}
</style>
</head>
<body>
<div id="mydiv" class="mydiv"></div> </body>
</html>

JavaScript(JS)的简单使用的更多相关文章

  1. [JavaScript] js实现简单的代码运行框

    <script type="text/javascript">// <![CDATA[ function runCode(obj) { var winname = ...

  2. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  3. paip.java 以及JavaScript (js) 的关系以及区别

    paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  4. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  5. 【Android进阶】Android程序与JavaScript之间的简单调用

    本篇将讲解一个简单的Android与JavaScript之间的简单调用的小程序 效果图 工程结构 HTMLActivity.java代码 package com.example.javatojs; i ...

  6. 投票系统 & js脚本简单刷票

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS的简单用法

    JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

  8. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  9. 【HANA系列】SAP HANA XS使用JavaScript(JS)调用存储过程(Procedures)

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  10. angular4.0和angularJS、react.js、vue.js的简单比较

    angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...

随机推荐

  1. 把 web 项目部署到 Linux 服务器上

    1.打开 eclipse,在已经完成的 web 项目上面点击右键,选择 export,然后选择导出成 war 包. 以部署 SMBMS 项目为例   2.项目打包成 war ,选择项目导出到的位置. ...

  2. (一)python条件语句和基本数据类型

    条件语句 语法一:if...else  if <条件成立>: 处理过程 else: 处理过程 语法二:if...elif...else if <条件1成立>: 处理过程1 el ...

  3. led1,1s取反,led2计数10次取反

    1 //利用定时器0 1s,led1取反,利用计数器1,跳10,取反 #include<reg52.h> #define uchar unsigned char #define uint ...

  4. BZOJ 2274 [Usaco2011 Feb]Generic Cow Protests

    [题解] 很容易可以写出朴素DP方程f[i]=sigma f[j] (sum[i]>=sum[j],1<=j<=i).  于是我们用权值树状数组优化即可. #include<c ...

  5. BZOJ 4385 洛谷3594 POI2015 WIL-Wilcze doły

    [题解] 手残写错调了好久QAQ...... 洛谷的数据似乎比较水.. n个正整数!!这很重要 这道题是个类似two pointer的思想,外加一个单调队列维护当前区间内长度为d的子序列中元素之和的最 ...

  6. 【Codeforces 992B】Nastya Studies Informatics

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 因为gcd(a,b)=x 所以设a = nx b = mx 又有ab/gcd(a,b)=lcm(a,b)=y 则nmx = y 即n(m*x) ...

  7. nyoj 93 汉诺塔(三)(stack)

    汉诺塔(三) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度 ...

  8. jQuery动态添加表格1

    用jquery的append方法在指定行的后面新增一行tr,会把新增的行的html追加到指定行的html里面 content +="<tr><td>123</t ...

  9. sharepoint 2013安装--没安装成功--机器配置太低了

    油管上的sharepoint2013安装教程 https://www.youtube.com/watch?v=3lQVMGWJQho 下载脚本的网址 http://gallery.technet.mi ...

  10. MYSQL常用的时间日期函数

    #时间日期函数 #获取当前日期XXXX-XX-XXSELECT CURRENT_DATE(); SELECT CURDATE();#效果与上一条相同 #获取当前日期与时间XXXX-XX-XX XX:X ...