一、特点：

JavaScript和java并没有直接关系，就像雷锋与雷峰塔似的没有联系；

js是面向对象的，是运行在浏览器端的编程语言；

主要解决的是前端与用户的交互问题，包括交互数据。

二、js引入方式

1.行内式：

<开始标签 on+事件类型=“js代码”></结束标签>

行内引入方式必须结合事件来使用

<body>

<input type="button" onclick="alert('行内引入')" value="button" name="button">

<button onclick="alert(123)">点击我</button>

</body>

onclick:点击鼠标触发一个事件

alert(""):弹出提示框 括号内式字符串格式

2.嵌入式：

在head或body中，定义script标签，然后在script标签里面写js代码

<script type="text/javascript">

	alert('滚出来见我')

</script>

3.外链式：

定义外部js文件(.js结尾的文件)

<script type="text/javascript" src="js文件路径"></script>

注:

script标签一般定义在head或body中

Script标签要单独使用，要么引入外部js，要么定义内部js，不要混搭使用

外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点

二、js语句和注释：

js语句以英文分号；结尾（不加也可以，不会报错）

单行注释：//

多行注释：/*注释*/

三、js变量的定义：

js中定义变量以关键字var开头

命名规范：

  • 不能以数字开头；

  • 可以以字母、下划线、$、#开头；

  • 驼峰命名

    浏览器控制台输出：

    console.log(变量名）

    数据类型：

    数字类型：number

    字符串类型：string

    布尔类型：boolean

    空值null是一个object

    未定义undefined

<script type="text/javascript">

//			数字类型number

			var num = 10;

//			alert(num);

//			console.log(num);

//			alert(typeof(num));

//			字符串类型string

			var str = 'hello world';

//			alert(str);

//			alert(typeof(str));

//			布尔类型boolean

			var bool = true;

//			alert(typeof(bool))

			var a = null;

//			alert(typeof(a))

			var b = undefined;

//			alert(typeof(b))

			var n = 10,m = 20;

			alert(n)

			console.log(m)

			console.log(n)

</script>

四、复合数据类型：

key：value形式

var result = {

	name:'张三'；

	age:18;

	a:false;

	}

alert(result);

console.log(result);

五、获取元素：

获取元素对象需要使用到标签对象：document

window.onload它是在文档加载完成后才执行里面的代码

<script type="text/javascript">

			window.onload=function  () {

				var div_obj = document.getElementById('one');

				console.log(div_obj);

			}

		</script>

六、读写元素数据：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>读写元素数据</title>

		<style type="text/css">

			.box{

				height: 200px;

				width: 200px;

				background-color:red ;

			}

			.box2{

				height: 100px;

				width: 100px;

				background-color:deeppink ;

			}

		</style>

		<script type="text/javascript">

			window.onload=function () {

				//获取标签对象

				var oDiv = document.getElementById("one");

				//对象读取id

				var odiv_id = oDiv.id;

//				alert(odiv_id);

				//读取类名

				var odiv_clsName = oDiv.className;

//				alert(odiv_clsName);

				//读取标签颜色      加上 style

				var odiv_color = oDiv.style.color;

//				alert(odiv_color);

				//读取字体大小

				var odiv_size = oDiv.style.fontSize;

//				alert(odiv_size);

				//写入数据

//				oDiv.style.color="green";

				//更改类名

//				oDiv.className="app";

//				var odiv_clsName = oDiv.className;

//				alert(odiv_clsName);

				oDiv.className="box2";

			}

		</script>

	</head>

	<body>

		<div id="one" class="box">读写元素数据</div>

	</body>

</html>

七、修改标签包裹的内容：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>修改标签包裹的内容</title>

		<script type="text/javascript">

			window.onload=function  () {

				//1.获取标签对象

				var a_obj = document.getElementById("one");

				//读取标签的内容 innerHTML

				var sContent = a_obj.innerHTML;

//				alert(sContent);

				//修改标签内容

				a_obj.innerHTML="我是修改后的内容";

			}

		</script>

	</head>

	<body>

		<a id="one" href="#">百度链接</a>

八、函数定义：

关键字：function 函数名

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>函数定义</title>

		<script type="text/javascript">

			window.onload=function  () {

				// 定义 函数    关键字 function 函数名

				//定义无参数函数

//				function fun_Name () {

//

//					alert("定义函数");

//

//				}

//

//				//调用函数   函数名();

//				fun_Name();

				//定义有参数函数

//				function fun_Alert(a,b) {

//

//					alert(a);

//					alert(b);

//

//				}

//

//				fun_Alert(10,"helloworld");

				//定义有返回值的函数

				function ret_function (a,b) {

					result = a+b;

					return result;

				}

				num_ret = ret_function(10,20);

				alert(num_ret);

			}

		</script>

	</head>

	<body>

	</body>

</html>

九、匿名函数：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>匿名函数</title>

		<style type="text/css">

			.box{

				height: 200px;

				width: 200px;

				background-color: red;

				border-radius:50% ;

			}

		</style>

		<script type="text/javascript">

			window.onload=function  () {

				//匿名函数  没有函数名

				var btn = document.getElementById("btn");

				//定义一个点击事件

//				function fun_Btn () {

//

//					alert("定义匿名函数");

//				}

				//给button 添加点击事件

//				btn.onclick = fun_Btn;

				btn.onclick=function  () {

					alert("定义匿名函数");

				}

			}

		</script>

	</head>

	<body>

		<button id="btn">点击一下</button>

		<div class="box" id="">

		</div>

	</body>

</html>

十、js条件分支：

if（表达式）{

代码块1；

}else if（表达式）{

代码块2；

}

...

else{

代码块n;

}

&&与比较

|| 或比较

JavaScript（js）概述的更多相关文章

  1. javascript组成概述认识

    这里的JavaScript组成概述是说的在浏览器端渲染的JavaScript而不是nodejs js组成概述 js的完整实现是由ECMAscript.DOM.BOM三个部分组成的: -ECMAscri ...

  2. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. Unit05： JavaScript对象概述 、 常用内置对象一 、 常用内置对象二 、 常用内置对象三

    Unit05: JavaScript对象概述 . 常用内置对象一 . 常用内置对象二 . 常用内置对象三 常用内置对象使用演示: <!DOCTYPE html> <html> ...

  4. js 概述 ( 一 )

    1 JS 概述 1 简称JS,是一种浏览器解释型语言,代码嵌套在HTML页面中,将由浏览器解释执行 作用:主要用来实现页面的动态效果,实现用户交互,实现网页中的网络请求 2 JS 组成 : 1 ECM ...

  5. Node.js 概述

    JavaScript 标准参考教程(alpha) 草稿二:Node.js Node.js 概述 GitHub TOP Node.js 概述 来自<JavaScript 标准参考教程(alpha) ...

  6. javascript(js)小数精度丢失的解决方案

    原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3* ...

  7. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数

    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...

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

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

  9. 关于URL编码/javascript/js url 编码/url的三个js编码函数

    关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent() 本文为您讲述关于js(javasc ...

  10. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

  1. CentOS 7中安装和配置Promethues

    Prometheus 是什么? Prometheus是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采用Prome ...

  2. [逻辑学]意外绞刑悖论(Hangman paradox)(又称意外考试悖论)

    绞刑 在审讯中一位囚徒被法官判处死刑.判决如下:“你下周将会被处决,但哪天处决对你来说是一个惊喜.”囚徒因此作出如下推理:“假如处决日是周日,那么在周六夜晚降临后,我将提前知道我周日会被处决,那样的话 ...

  3. 【长期更新】Leetcode刷题心得与思考

    1.递归与动态规划的思考 Leetcode第95题 递归问题最重要的问题是想明白函数的作用是什么? 这个例子中函数的返回值就是给定a-b这个区间的数字,返回它所有可能的Tree,此时你不需要明白具体怎 ...

  4. OpenGL学习笔记 之一 （基本的图形绘制）

    参考网址:http://www.cnblogs.com/FredCong/archive/2012/10/13/2722893.html #include <glut.h> #includ ...

  5. linux系统中RAID5磁盘冗余阵列配置（5块磁盘）

    RAID5:需要至少三块(含)硬盘,兼顾存储性能.数据安全和储存成本. 如图所示”parity”块中保存的是其他硬盘数据的奇偶校验信息(并非其他硬盘的数据),以数据的奇偶校验信息来保证数据的安全,RA ...

  6. The request was aborted: Could not create SSL/TLS secure channel

    一.背景: 公司底层服务CDN从Akamai迁移到阿里云之后, 使用该服务的一个应用报错如下: System.AggregateException: One or more errors occurr ...

  7. 数位dp踩坑

    前言 数位DP是什么?以前总觉得这个概念很高大上,最近闲的没事,学了一下发现确实挺神奇的. 从一道简单题说起 hdu 2089 "不要62" 一个数字,如果包含'4'或者'62', ...

  8. setting中executable for debug session对话框

  9. Hystrix的介绍（断路、降级）

    在大中型分布式系统中,通常系统很多依赖(HTTP,hession,Netty,Dubbo等),如下图:     在高并发访问下,这些依赖的稳定性与否对系统的影响非常大,但是依赖有很多不可控问题:如网络 ...

  10. 十三、GPIO子系统

    由于之后的触摸屏驱动分析中使用到了GPIO子系统和i2c子系统,因此在分析触摸屏驱动之前我准备把这两个子系统进行简单分析. 之前我们使用GPIO引脚的方式并不是推荐的方式,当我们更改某一bit时,很有 ...