javaScript书写位置及常见的语句

与java关系
关于javascript有这样一个说法，java和javascript的关系是雷锋和雷锋塔的关系。那到底有没有关系呢
javascript最开始的名字是LiveScript，除了语法看起来和java类似之外，javascript和java是完全不同的两种编程语言

程序设计语言分为解释型和编译型两大类。java或C++等语言需要一个编译器。编译器是一种程序，能够把用java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件。解释型程序设计语言不需要编译器——它们仅需要解释器，浏览器中的javascript解释器将直接读入源代码并执行

java在理论上几乎可以部署在任何环境，但javascript却倾向于只应用在web浏览器。而且，在javascript语言中，函数是一种独立的数据类型，采用基于原型对象（prototype）的继承链，javascript语法要比Java自由得多

javascript是一门动态的、弱类型的解释型编程语言，非常适合面向对象和函数式的编程风格。javascript的语法源自java，
　javascript用来增强页面动态效果，实现页面与用户之间的实时、动态交互
       javascript由三部分组成：ECMAScript、DOM和BOM
       [1]ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）
       [2]DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口
   　[3]BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口



大小写敏感：var a 和 var A不同
Object 和 object不同
function 和 Function不同
空格：大部分空格没有实际意义
var a = 1和 var a=1没有区别
加回车大部分时候也不会影响代码
[注：只有一个地方不能加回车，此处为return后面]
标识符
 标识符（identifier）是用来识别具体事物的一个名称（比如：变量名、函数名）。
JavaScript语言的标识符对大小写敏感，所以a和A是两个不同的标识符。
 
 有一套标识符命名规则，js引擎遇非法标识符报错。
   不能有+ - * / 连词线 首位不能是数字；
  中文可作合法标识符，可为变量名，少用

var 临时变量 = 1; 
var 你好 = 'hi'
  保留字不作标识符；
   保留字，关键字，Infinity/NaN/undefined不能作为标识符；

例如合法的标识符 arg0 _tmp $elem π 
例如不合法的标识符 1a 23 a+b -d
 第一个字符可以是任意Unicode字母，以及美元符号（$）和下划线（_）。 后面的字符，还可以用数字。
保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
另外，还有三个词虽然不是保留字，但是因为具有特别含义，也不应该用作标识符：Infinity、NaN、undefined。

熟悉js常见的语句

 alert("******") 弹出窗口

 document.write() 在页面中输出信息

 console.log("...") 控制台输出

 注释 
单行注释 // 快捷键： ctrl + / 

多行注释 

/*

 ....

分号
javascript使用分号;将语句分隔开，这对增强代码的可读性和整洁性是非常重要的
有些地方可以省略分号，有些地方则不能省略分号

//两条语句用两行书写，第一个分号可以省略
a = 3;
b = 4;
//两条语句用一行书写，第一个分号不能省略
a = 3; b = 4;

　但javascript并不是在所有换行处都填补分号，只有在缺少了分号就无法正确解析代码时，javascript才会填补分号。

换句话说，如果当前语句和随后的非空格字符不能当成一个整体来解析的话，javascript就在当前语句行结束处填补分号

var a
a
=
3
console.log(a)

javascript将其解析为:

var a;
a = 3;
console.log(a);

下面这种语句的分隔规则会导致一些意想不到的情形为了让下面代码解析成两条不同的语句，必须手动填写行尾的显式分号

var y = x + f
(a+b).toString
javascript将其解析为: var y = x + f(a+b).toString

两个例外

　　如果当前语句和下一行语句无法合并解析，javascript会在第一行后填补分号，这是通用规则，但有两个例外

　　【1】第一个例外是涉及return、break、continue、throw语句的场景中。
如果这四个关键字后紧跟着换行，javascript会在换行处填补分号

return
true;

javascript将其解析为: return;true;
而代码的本意是:          return true;

【2】第二个例外是在涉及++和--运算符时，如果将其用作后缀表达式，它和表达式应该同一行。
否则，行尾将填补分号，同时++或--将作为下一行代码的前缀操作符并与之一起解析

x
++
y

javascript将其解析为: x;++y;
而代码的本意是:      x++;y;

　　分号不是必须的，但最好不要省略它，因为加上分号可以避免很多错误，代码行结尾处没有分号会导致压缩错误。
加上分号也会在某些情况下增进代码的性能，因为这样解析器就不必再花时间推测应该在哪里插入分号了

书写方式及位置

1、行内使用Javascript不好维护

  <input type="button" value="click me2" onclick="alert('这是行内写法')" />

2、嵌入式即可在body 也可在head

    <script> window.onload = function () {
      var oDiv = document.getElementById("btn2");
      oDiv.onclick = function () {
        alert("这是写在head的嵌入样式 需要处理一下 才有效");
      }
    }
  </script>
<body>
  <input type="button" value="click me1" id="btn1" />
  <input type="button" value="click me2" id="btn2" />

  <script>
    var oDiv = document.getElementById("btn1");
    oDiv.onclick = function () {
      alert("这是写在body的嵌入样式");
    }
  </script>
</body>

3、外联式即可在body 也可在head

<script src="./my.js"></script>

关于script的标签位置，按照传统的做法，是写在head元素中；这种做法的目地是把所有外部文件(CSS,JS)的引用都放在相同的地方；

可是如果放在顶部，HTML加载的时候，是从上到下依次解析的；

页面加载很多HTML的时候，就会堵塞后面的DOM节点加载；

导致页面呈现的内容出现延迟，而延迟期间浏览器窗口将是空白的；

为了避免这个问题，
把全部javascript都放在</body>之前 这也是W3C规范推荐的，

如果放在head中需要处理一下，直接获取元素的时候，是获取不到的（因为此时还没有加载完成）；比如获取ID，就是获取不到的；需要做延迟加载才好

window.onload = function() {
放代码

}

嵌入式与外链式的区别？

用嵌入式写js 没有问题，但最好的还是用外链式 外链式优点

1.维护性好

◦JS代码和HTML代码混在一起，维护的时候需要改动HTML页面，而现在为了专注和分工明确，基本都是前后端分离的做法；如果是外链式的，只需要维护自己的JS文件即可，不需要接触HTML文件；

2.可缓存

浏览器能够具体的设置缓存连接的所有javascript文件，也就是说如果两个页面都使用同一个文件，那么这个文件只需要下载一次，最终结果就是能够加快页面加载的速度（每次上新的时候，修改时间戳即可，）；

注意，在使用嵌入式写法的时候，不要标签内任何地方都不要出现 <script> 的字符串；

即使是 alert ， console.log 这些输出，如果需要用，请使用转移字符”/“来解决；

HTML外部资源引入

href: hypertext reference

src: source

href 用于标示资源和文档关系,src 用于替换标签内容

<img src="xxx.jpg"/> 
<script type="text/javascript" src="xxx.js"></script>
 <a href="http://www.baidu.com">百度</a>
 

posted @ 2020-12-11 06:49 沁莹阅读(244) 评论(0) 收藏举报

刷新页面返回顶部

沁莹

javaScript书写位置及常见的语句

公告