JavaScript基本整理1

Javascript基本整理<1>

@[基本实例|基于bootstrap框架]

目录

Javascript简介

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习

JavaScript：写入 HTML 输出

<script type="text/javascript">
    document.write("<h1>test</h1>");
</script>

注意只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档

JavaScript：对事件作出反应

<button class="btn btn-primary btn-lg"  onclick="alert('Welcome!')">点击这里</button>

JavaScript：改变 HTML 内容

//javascript代码
function MyOnClick(){
    temp=document.getElementById("demo");
	temp.innerHTML="Have been changed";
}
//html代码
<button class="btn btn-primary btn-lg"  onclick="MyOnClick()">点击这里</button>

JavaScript：改变 HTML 样式

//javascript代码
<script type="text/javascript">
    function MyOnClick(){
		temp=document.getElementById("demo");
		x=document.getElementsByClassName("btn");
		x[0].style.backgroundColor="yellow";
		x[1].style.backgroundColor="yellow";
		temp.style.backgroundColor="yellow";
	}
</script>
 //html代码
<button class="btn btn-primary btn-lg"  onclick="MyOnClick()">点击这里</button>
<h1 id="demo">test</h1>
<button class="btn btn-primary btn-lg" >nothing</button>

JavaScript使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{document.getElementById("demo").innerHTML="My First JavaScript Function";}
</script>
</body>
</html>

脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件

<script type="text/javascript" src="/js/myScript.js"></script>

提示：外部脚本不能包含 <script> 标签

JavaScript输出

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法

<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

JavaScript注释

  • 单行注释以 // 开头
  • 多行注释以 /* 开始，以 */ 结尾

JavaScript变量

JavaScript变量声明

我们使用 var 关键词来声明变量 ，实例 var x=2;
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 数据类型

字符串、数字、布尔(true/false)、数组、对象、Null、Undefined

JavaScript对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

var person={firstname:"Bill", lastname:"Gates", id:5566};

对象属性有两种寻址方式

name=person.lastname;
name=person["lastname"];

创建自己的对象

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

访问对象属性
objectName.propertyName

var message="Hello World!";
var x=message.length;

访问对象的方法

var message="Hello world!";
var x=message.toUpperCase();

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

//使用关键词function
function functionname(){
    执行的代码
}
//带参数变量的函数
function myFunction(var1,var2)
{
这里是要执行的代码
}
//带有返回值的函数
function myFunction()
{
var x=5;
return x;
}

向未声明的 JavaScript 变量来分配值
如果把值赋给尚未声明的变量，该变量将被自动作为全局变量声明

posted @ 2018-01-11 15:16  ustc_rjgc2017  阅读(203)  评论(0)  编辑  收藏  举报