JavaScript代码翻译中文 javascript翻译器

前言

解释型语言和编译型语言

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

• 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
• 编译器是在代码执行之前进行编译，生成中间代码文件
• 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

js的组成

ECMAScript

ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

DOM——文档对象模型

文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM——浏览器对象模型

浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

js输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

script 标签的位置

代码解析从上到下

1. head标签中放在window.onload函数中

window.onload = function() {
	console.log(document.getElementById(''));
}
-----------
window.onload:(等待窗口加载)
fuction() {
	//放置窗口加载完成之后要做的事
}

不推荐，这样可行但是 这要将会先执行js代码而后解析body里的代码，页面加载变慢

1. 放在body标签内的底部

1 获取元素的方式

document.getElementById(“id属性值”)

1. 如果获取一个不存在的元素，返回的结果是null
2. 只有document有这个方法
3. 遇到第一个符合条件的元素就只返回第一个

document.querySelector(’#id值’)

1. 获取一个不存在的元素，返回null
2. 可以通过指定父级的方式，获取其子元素

1. document.querySelector(‘父级’) .querySelector(‘子级’)（太麻烦不这样用）
2. document.querySelector(‘父级 子级’) 中间用空格隔开

2 给元素绑定事件

1. .onclick

document.getElementById('').onclick = function() {
	// 当元素被点击的时候要做的事
	document.getElementById('').style.background = 'red'
}

1. 修改元素样式 style.样式 = 新属性

3 变量

声明 var

var = document.getElementById('');

1. 只声明变量，没有赋值的时候，默认值为undefined

命名规则

1. 不允许数字开头
2. 不允许关键字和保留字
3. 字母，数字，下划线，美元符组成

关键字和保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

命名风格

1. 语义化
2. 驼峰命名

1. 大驼峰：JavaScript
2. 小驼峰：javaScript

变量在内存中的存储

多变量同时命名，用,隔开

4 函数

1. 有名函数

var a;

function fn() {
	// 代码块
}
fn(); // 调用

1. 匿名函数，不可直接创建

var m = document.getElementById('main');
    
    // console.log(main);
    m.onclick = function() {
        alert(2);
    }

标识符

1. 变量名
2. 函数名（函数参数）
3. 属性名

5 js属性操作

两种方式

1. 元素.属性

box.style.background = "red";

1. 元素["属性"]

box['style']['background'] = 'red';

1. 复合使用

box.style['font-size'] = '40px'

常用属性

1. value: 获取标签里的value的值
2. className
3. style

1. cssText：更改多个css样式

box.style.cssText = "width: 100px; height: 100px; background: #FFF"

1. innerHTML：文字内容
2. href
3. src
4. tagName：console.log("tag= " + box.tagName);标签名（获取到的是大写）

属性操作要点

1. href和src的值是绝对路径
2. style添加的是行间样式
3. cssText会替换当前所有行间属性
4. class是关键字，所以用className替代
5. tagName获取到的是大写字母

调试的使用

1. console.log()

1. typeof 变量名：检查数据类型

• 过去调试JavaScript的方式

• alert()
• console.log()

• 断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

• 调试步骤

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点

• 调试中的相关操作

Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。

6 循环事件案例

1

for循环内的事件中保存i的值时，使用title属性是自带属性，会显示在浏览器中，自定义属性则不会显示

2 图片拼图