JavaScript基础

消息警告框

<script>  alert("我的第一个 JavaScript");  </script>  参数只有1个,多余的会被丢弃.若要输出多项内容,先把要输出的内容整理(如"aaa"+":"+"bbbb")成一个。

点击按钮时被调用

<p id="demo">一个段落</p>

<button type="button" onclick="myFunction()">尝试一下</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

document.write("<h1>这是一个标题</h1>");

JavaScript 输出

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台   console.info()和console.debug()本质上与console.log()没有区别。谷歌和opera不支持console.debug()。

函数(Function)字面量 定义一个函数

function myFunction(a, b) { return a * b;}

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length 
x = 5 
length = 6
document.getElementById("demo").innerHTML = length;
var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值 
var lastName = "Johnson";                         // String 通过字符串字面量赋值 
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值 
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
 

JavaScript 区别大小写 自动忽略空格

在一条语句中声明很多变量"

var lastname="Doe", age=30;  声明变量未赋值,其值实际上是 undefined。var carname;

如果重新声明 JavaScript 变量,该变量的值不会丢失:var carname="Volvo";var carname;

 

 JavaScript 错误处理 Throw、Try 和 Catch

try 语句测试代码块的错误。   catch 语句处理错误。   throw 语句创建自定义错误。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  var  txt="错误描述:" + err.message + "\n";                 //在这里处理错误

  alert(txt);
  }

如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

try{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
}
catch(err){
var y=document.getElementById("mess");
y.innerHTML="错误:" + err + "。";
}

JavaScript 调试

console.log()        设置断点    debugger 语句将无法工作        浏览器中console

 

 

JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名:

JavaScript 经常与 Java 一起使用。应该避免使用一些 Java 对象和属性作为 JavaScript 标识符:

在 HTML 中,必须(为了可移植性)避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名:

非标准的关键字。一个实例是 const 关键字,用于定义变量。 一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。

        Const 是 JavaScript 的扩展。

JavaScript JSON

JSON 是用于存储和传输数据的格式。 通常用于服务端向网页传递数据 。

全称 JavaScript Object Notation    轻量级的数据交换格式。JSON是独立的语言

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

语法规则:数据为 键/值 对。数据由逗号分隔。大括号保存对象 。方括号保存数组。

eg:"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"}
]                                                                               对象 "employees" 是一个数组。包含了三个对象。

JSON 字符串转换为 JavaScript 对象:

JSON 数据是键值对,可以有多个

首先,创建 JavaScript 字符串为 JSON 格式的数据:

var text = '{ "employees" : [' + 
'{ "firstName":"John" , "lastName":"Doe" },' + 
'{ "firstName":"Anna" , "lastName":"Smith" },' + 
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

 

javascript:void(0) 含义

javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id

如果你要定义一个死链接请使用 javascript:void(0) 。

 

JavaScript 代码规范

  • 变量和函数的命名规则
  • 空格,缩进,注释的使用规则。

变量名推荐使用驼峰法来命名:lastName

变量名应该区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号;

变量名不要以 $ 作为开始标记,会与很多 JavaScript 库冲突。

  • 变量名不能为JavaScript中的关键词、保留字全名;

一条语句通常以分号作为结束符。

通常运算符 ( = + - * / ) 前后需要添加空格:

代码缩进:通常使用 4 个空格符号来缩进代码块:

 

复杂语句的通用规则:    将左花括号放在第一行的结尾。     左花括号前添加一空格。      将右花括号独立放在一行。      不要以分号结束一个复杂的声明。

 

对象定义的规则:          将左花括号与类名放在同一行。      冒号与属性值间有个空格。  字符串使用双引号,数字不需要。             最后一个属性-值对后面不要添加逗号。 

  •                                   将右花括号独立放在一行,并以分号作为结束符号。

 

为了便于阅读每行字符建议小于数 80 个。如果一个 JavaScript 语句超过了 80 个字符,建议在 运算符或者逗号后换行。

在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中,不允许在 , 或 前换行。

命名规则:变量和函数为驼峰法              全局变量为大写           常量 (如 PI) 为大写

HTML 和 CSS 的横杠(-)字符:             HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。           CSS 使用 - 来连接属性名 (font-size)。

注意:- 通常在 JavaScript 中被认为是减法,所以不允许使用。

 使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):          <script src="myscript.js">

 

文件扩展名:

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。

 

使用小写文件名               大多 Web 服务器 对大小写敏感

 

posted @ 2019-02-27 17:29  程序图  阅读(174)  评论(0编辑  收藏  举报