一、特点：

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. dubbo的负载均衡策略和容错策略

    一.dubbo 负载均衡策略 random loadbalance 默认情况下,dubbo 是 random load balance 随机调用实现负载均衡,可以对 provider 不同实例设置不同 ...

  2. 如何使用 AWS Auto Scaling 按需动态增加和减少实例

    目录 一.背景需求 二.配置步骤 2.1.创建 AMI 2.2.创建负载均衡目标组 2.3.创建 Classic Load Balancer 2.4.创建启动配置 2.5.创建 Auto Scalin ...

  3. Charles 教程

    本文介绍 charles 教程 - 代理抓包的使用方法 本文参考了:阿西河 Charles 教程 Charles Charles是一个HTTP代理/ HTTP监视器/反向代理,使开发人员能够查看其机器 ...

  4. Navicat安装及使用

    一.安装Navicat 1.下载安装文件:navicat11.0.17_premium_cs_x86.exe(32位) 2.Oracle 的 Instance Client:instantclient ...

  5. 安装CCS提示错误Windows8.1-KB2999226-x64安装提示 此更新不适用你的计算机

    问题如图所示: 解决方案: 放在D:\目录下 windows键+X  选择  命令提示符(管理员)  一定要是管理员 打开cmd 分别执行下面两句.红色部分就是自己的更新程序了.其他安装同理 例如Wi ...

  6. Leetcode之148. Sort List Medium

    https://leetcode.com/problems/sort-list/ Sort a linked list in O(n log n) time using constant space ...

  7. go context源码解析

    go 的context贯穿整个goroutine的运行控制的中枢,可以实现执行的生命周期的控制. Context是一个接口,他派生了context.emptyCtx(TODO),cancelCtx,t ...

  8. SpringBoot Profile使用详解及配置源码解析

    在实践的过程中我们经常会遇到不同的环境需要不同配置文件的情况,如果每换一个环境重新修改配置文件或重新打包一次会比较麻烦,Spring Boot为此提供了Profile配置来解决此问题. Profile ...

  9. mysql 查询某一天数据

    某个场景下需要查询某一天的数据,例如2017/9/27这一天所有的数据量,有以下几个方法. SELECT * FROM cms_book_statistics WHERE substring(Conv ...

  10. Java 七牛云存储与下载

    七牛云的文件上传和下载(私有空间) 1.本篇博客参考网址 https://blog.csdn.net/peaceful000/article/details/53171578 https://blog ...