一、特点：

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. iOS-UIToolbar与UISearchBar

    组件_ UIToolbar  /** 1. 顶部toolbar 2. TextField可以以UIBarButtonItem的自定义视图的方式加入toolbar 3. 三个按钮 4. 将UIBarBu ...

  2. nfs搭建；nfs监控；mount对于nfs的相应配置

    nfs搭建 https://www.cnblogs.com/lms0755/p/9211585.html https://www.jianshu.com/p/e47cccbb3ae5 https:// ...

  3. 分布式消息通信之RabbitMQ_Note

    目录 1. RabbitMQ 安装 2. RabbitMQ 应用场景,特性 3. 官网入门指引 4. RabbitMQ 工作模型 5. RabbitMQ 主要的几种交换机类型 6. Java API的 ...

  4. Java中让fastJson识别Colloction和Map中的泛型类

    由于fastJson的高效性,最近采用fastJson来做序列化并存储数据,但出现了一个麻烦的问题,如果将Map<K,V>这样的类型序列化,反序列化就会不尽人意,有以下尝试: 使用JSON ...

  5. 【ARM-Linux开发】如何使用opkg在RicoBoard上在线安装软件包

    类似于debian的apt-get,Redhat的yum类似,嵌入式Linux平台可以使用opkg实现在线安装软件包的功能,在我们提供的matrix文件系统中,已经包含了opkg工具,但是还没有配置一 ...

  6. Codis-FE配置启动

    生成配置信息: ./codis-admin --dashboard-list --zookeeper= | tee conf/codis.json 如果当前目录下还没有创建logs文件夹,请先创建lo ...

  7. CentOS系统安装启动tomcat

    我们可以通过xftp工具将tomcat文件上传至CentOS系统指定文件夹中 一.安装tomcat 进入tomcat存放目录解压: tar -zxf apache-tomcat-9.0.2.tar.g ...

  8. JavaScript、TypeScript、ES6三者之间的联系和区别

    ES6是什么 ECMAScript 6.0(以下简称ES6)是JavaScript语言(现在是遵循ES5标准)的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以 ...

  9. WCF-简单 配置文件

    一.服务端配置文件 主要包括 1.services 配置服务节点 <!--name 指的是契约实现类--> <service name="WcfLib.User2" ...

  10. wordpress5.0+中 Notice: Undefined index: HTTP_REFERER 问题解决

    都说现在搭网站很简单了,但真遇到问题了还真不一定能解决. 这次搭建的网站是用的wordpress版本5.0.4,以为操作和以前的低版本一样,结果做出来还是遇到问题了. 网站搭好后,首页总在顶端出现一行 ...