JavaScript笔记整理1 -- JavaScript简介与入门
JavaScript简介
什么是JavaScript
JavaScript = ECMAscript + BOM + DOM
- ECMAscrip标准：js的基本语法
- DOM：Document Object Model 即文档对象模型
- BOM：Browser Object Model 即浏览器对象模型
JavaScript从交互的角度，提升用户的体验性。
JavaScript是由网景公司开发的一款基于浏览器、基于面向对象、事件驱动式的网页脚本语言。
- JavaScript与Java的关系：
JavaScript是由网景公司开发的livescript；
Java是Sun公司开发的，但是已被甲骨文收购；
基于浏览器：JavaScript是由浏览器进行解析。HTML、CSS、JavaScript它们都是由浏览器进行解析。
基于面向对象：在JavaScript中一切皆都是对象，对象是由属性与方法来组成。
事件驱动式：用户的某些特定行为，比如鼠标经过鼠标点击等等这些行为它会被JavaScript所捕获，JavaScript会给这些行为赋予一些功能代码。
JavaScript的应用场景
- 表单验证
- 与服务器进行交互 例如：谷歌2005年推出的Ajax
- 部分网页特效 例如：全选功能、图片轮播…
- 开发一些网页小游戏 例如：贪吃蛇、俄罗斯方块、别踩白块…
JS代码的书写规则
-
JavaScript脚本程序须嵌入在HTML文件中
JavaScript脚本程序可以独立保存为一个外部文件，这个文件是不能自己运行的，它必须要依赖于HTML文件 -
JavaScript脚本程序中不能包含HTML标记代码
-
每一条语句末尾可以加分号（最好加分号），注意必须是英文分号
;
一行写了多条js代码时每条语句就必须加分号 -
JavaScript严格区分大小写
-
在一对JavaScript的标签中有错误的js代码时，该段代码后面的js代码不会执行；但后面任意对代码不受影响，将继续执行。
JavaScript的书写方式
嵌入式
将JavaScript代码嵌入到HTML代码中，它是通过一对<script></script>标签来嵌入的。
HTML代码如下：
<body>
<script type="text/jscript">
document.write("Hello World"); <!--JavaScript内容-->
</script>
</body>
注意：
<script></script>标签可以放置在HTML文档的任何地方，建议写在body标签的最后面；
原因：当<script></script>标签中有调用document.body时，因为顺序执行的原因，浏览器将报错。<script></script>标签可以u多对；- 如果是HTML5文档，
<script>标签里面可以不写；
外链式
将JavaScript代码写入后缀名为.js的文件中，可单独保存。
通过HTML中<script></script>的src属性将其引入到当前HTML文件中。
.js代码：document.write("Hello World");
HTML代码如下：
<body>
<script type="text/jscript" src="HelloWorld.js"></script>
</body>
注意：
- 不要在.js文件中书写
<script>标签； - 一个HTML文件可以同时引入多个.js文件（即多个JavaScript代码）；
- 一个script标签一次只能做一件事，要么引入js文件要么直接书写代码
嵌入式与外链式区别
- 使用嵌入式书写的js代码它只能被当前的HTML文件所使用；
- 外部的js文件可以被多个HTML文件所引入；（推荐使用）
行内式
HTML标签中，有一些事件属性，将js代码书写在HTML标签的事件中属性。
- 事件属性都是带有on前缀，比如鼠标经过
onclick、鼠标离开onmouseover、鼠标单击onmouseout等。
书写格式：<标签 事件属性="js代码">
HTML代码如下：
<body>
<button type="button" onClick="alert('Hello World');">确定</button>
</body>
注释
js中的注释有两种方式：单行注释 和 多行注释
单行注释
格式：//注释内容
快捷键：ctrl+/
多行注释（块注释）
格式：
/*
注释内容
*/
快捷键：ctrl+shift+/
三个常用输出语句
document.write(“要输出的内容”);
作用：向body标签中输出write()小括号里的内容。
- 送到body中的被人如果是的标签则可以辨认。
解释：
document：表示当前的HTML对象write：表示输出方法
window.alter(“要输出的内容”);
作用：向当前浏览器窗口弹出一个警告提示框。
解释：
window：表示当前的浏览器窗口对象，window对象是js中最顶级的对象，可以省略不写alter：“警告”，弹出警告提示框方法
document 与 window
实际上，window对象包含document对象，即window.document
console.log(“要输出的内容”);
作用：向浏览器调试工具中的“Console”选项卡里输出内容。
- 一般用于调试
解释：
console：“控制台”log：“日志”
常用的系统函数
parseInt
语法：parseInt(变量名);
作用：从一个字符串提取整数。
提取规则：
- 如果字符串第一个字符不是数字就会返回NaN
- 遇到非数字就终止提取。遇到非数字就停止提取。
- eg.
parseInt('100px')的值为100
parseFloat
语法：parseFloat(变量名);
作用：从一个字符串提取小数。
提取规则：
- 如果字符串第一个字符不是数字就会返回NaN
- 如果遇到除第一个
.以外的非数字就会停止提取。
- eg.
parseFloat('100.1.1px')的值为100.1
isNaN
作用：判断字符串是不是数字。
规则：现将一个变量的数据类型自动转换为Number，如果是NaN，就返回true；否则，返回false。
- eg.
isNaN('100px')的值为false
新学方法
输入对话框
方法：window.prompt(Message,defaultValue);
- Message：提示信息
- defaultValue：输入框中的默认值
- 两参数可写可不写
说明：在浏览器中弹出对话框，如果用户点击确定，会得到他输入的字符串类型数据；如果点击取消，则得到null。
获取当前星期
创建Date 对象
var myDate=new Date();
调用getDay()方法 从时间日期对象中获取一周中的某一天，返回的是0-6之间的一个整数
var week=myDate.getDay();
- 注意：0 表示星期日。
开发操作
查看JS报错
浏览器f12–>选择查看看守控制台console
使用断点调试工具
步骤：
- 在浏览器中的HTML页面，右键单击，选择“检测”（或按快捷键F12）
- 选择开发人员工具中的“sources”选项卡
- 双击指定HTML文件
- 找到对应所在行，双击鼠标设置断点
- 刷新当前HTML文件
- 右侧栏单击“下一步”图标进行调试，可在“watch”中监控数据的变化
使用高版本JS
‘use strict’
4608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
