一、特点：

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. 第十章 会话管理——《跟我学Shiro》

    转发地址:https://www.iteye.com/blog/jinnianshilongnian-2028675 目录贴:跟我学Shiro目录贴 Shiro提供了完整的企业级会话管理功能,不依赖于 ...

  2. 慕课零基础学java语言翁恺老师——第二周编程题

    1.时间换算(5分) 题目内容: UTC是世界协调时,BJT是北京时间,UTC时间相当于BJT减去8.现在,你的程序要读入一个整数,表示BJT的时和分.整数的个位和十位表示分,百位和千位表示小时.如果 ...

  3. CenOS 7 java链接redis数据库

    完整代码 public class App { public static void main(String[] args) { System.out.println("Hello Worl ...

  4. 在同一个页面多次调用el-select选择器

    elementui是一个十分好用的组件库,但毕竟也不能做到面面俱到,有些还是要根据根据自己的实际需求做一些自定义的方法. 比如el-select选择器在同一个页面使用多次的话就会造成选择一个另一个也会 ...

  5. 有四个数字能组成多少个互不相同的三位数 --Python

    有四个数字能组成多少个互不相同的三位数? num = 0 for i in range(1, 5): for j in range(1, 5): for k in range(1, 5): if i ...

  6. SQL入门经典（第四版）学习记录——欢迎来到SQL世界（一）

    1.结构化查询语言——SQL,关系型数据库通信的标准语言: 2.关系型数据库:表的逻辑单元组成,这些表在内部彼此关联,组成了关系型数据库: 3.SQL会话:用户用SQL命令语句与关系型数据库进行交互时 ...

  7. “无法改变的设计”——浅谈Java中的final关键字

    在Java中,final关键字可以用来修饰类.变量(包括成员变量和局部变量).方法,下面从这三个方面分别说明. final方法 当一个方法被final修饰时,表明这个方法不能被子类重写. 下面程序试图 ...

  8. python Django基础操作

    Django常用命令 创建Django项目 Django-admin startprotect  mysite 创建项目以后,以下生成的文件 最外层的file:mysite/ 根目录只是你的项目的容器 ...

  9. Linux中 ls -l 命令显示结果中的每一列的含义

    图片转载自:https://blog.csdn.net/zhuoya_/article/details/77418413 简单解释下: 1.第一列颜色框:文件类型列,这里简单描述几种常见类型,d表示目 ...

  10. maftools | 从头开始绘制发表级oncoplot（瀑布图）

    本文首发于微信公众号 **“ 生信补给站 ”** ,期待您的关注!!! 原文链接:https://mp.weixin.qq.com/s/G-0PtaoO6bYuhx_D_Rlrlw 对于组学数据的分析 ...