1. 掌握JavaScript的组成
为什么学习JavaScript?
1.可以做表单验证
2.可以做页面的动态交互
JS是什么？
它是一种基于事件和对象驱动的，具有安全性的脚本语言。
JS也是一门面向对象的编程语言，它是一种面向原型的面向对象（原型链）。
JavaScript这种脚本语言和Java这种非脚本静态语言有什么区别？
编译器：
1.Java这种非脚本的静态语言，它们是先进行编译，然后编译后的代码才可以在某些机器上运行。
2.缺点：如果修改了源代码那么Java这种静态语言必须要重新编译
3.优点：当编译完之后，如果下次要再执行，无需编译直接执行，速度较块。
解释器：
1.一般解释器作为编译器的都是一些脚本语言/动态语言，无需编译，写完就可以运行。
2.缺点：每次都要进行编译（解释），速度慢。
3.优点：无需编译，修改完直接可以运行展示最新的。
组成：
1.ECMAScript - 核心语法（标准） 欧洲计算机制造商协会设立的标准。
2.BOM浏览器对象模型
3.DOM文档对象模型
2. 掌握JavaScript的基本语法
<script type="text/javascript">
/* 当初JS标准打的火热 如果有浏览器不支持JS，那么后果就是代码会被认为普通文字展示在页面 */
/* 所以为了让不支持的浏览器别瞎显示 所以放上了HTML注释 */
/* 现在没这问题了 不支持的基本凉了 */
<!--
document.write("<h1>Hello World！</h1>");
-->
</script>
2.1JavaScript的引入方式
1.行内引入
借助于标签内置的事件属性来实现
常用的事件属性有：
onclick 点击事件
onmouseover鼠标悬浮事件
onblur失去焦点事件
<input type="button" value="点我清除缓存" onclick="alert('清除成功！');" />
2.内部引入
在上编写
<script type="text/javascript">
document.write("<h1>Hello World！</h1>");
</script>
<input type="button" value="清除缓存" id="btn" onclick="tip()" />
<!--<script type="text/javascript">
function tip(){
alert("清楚成功！");
}
</script>-->
<script type="text/javascript">
//获取input对象
var btnObj= document.getElementById("btn");
btnObj.onclick = function(){
alert("清除成功！");
}
</script>
3.外部引入
在上编写
注意事项：
1.不要将外部引入的JS标签自闭合
2.也不要在外部引入JS标签内写代码，如果想写新的JS代码，另外创建一个新的标签
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<input type="button" value="点我清除缓存" />
<script src="js/index.js" type="text/javascript" charset="UTF-8"></script>
</body>
2.2JavaScript变量
Java中变量的组成：
1.变量的数据类型
2.变量名
3.变量值
// 先声明再赋值
int num;
num = 10;
// 声明并赋值
int num = 10;
JavaScript中变量的组成：
1.变量的数据类型
var(variable) 动态类型识别
2.变量名
1.它由数字、字母、下划线、$等组成，但是数字不能开头
2.见名知义
3.采用小驼峰命名法
4.也可以采用_连接命名法
3.变量值(单一类型的数据)
// 先声明再赋值
var num;
num = 10;
// 声明并赋值
var num = 10;
2.3 JavaScript数据类型
Java中的数据类型：
1.基本数据类型
数值类：byte 、 short 、int 、long、float、double
非数值类：char、boolean
2.引用数据类型
数值，类(String) ,Enum枚举，接口…
JavaScript中的数据类型：
1.undefined：未定义 如果一个变量没有赋值过它的类型就是undefined
2.null：表示一个空值 它可以和undefined做相等判断
3.number：表示数值，整数或浮点数
4.boolean：表示真和假 true、false
5.string：表示字符串 (单引号或双引号引起来的内容)
6.object：表示对象类型 (因为历史原因，以前的bug，所以当你测试null类型的数据时显示的是object)
如果检验是什么类型的？
typeof
2.4JavaScript常用运算符
1.算术运算符
+ - * / % ++ --
2.关系/比较运算符
> < >= <= == != === !==
全等和==的区别？
1.== 只比较内容
2.=== 比较内容 还比较类型
var str1 = "12";
var num1 = 12;
alert(str1 === num1); // false
alert(str1 == num1); // true
3.赋值运算符
= 复合赋值：+= -= *=...
4.逻辑运算符
&& || !
2.4JavaScript控制语句
选择结构：
1.基础if选择结构
if(条件表达式){
// 代码
}
2.if-else选择结构
if(条件表达式){
// 代码1
}else{
// 代码2
}
3.多重if选择结构
if(条件表达式1){
// 代码1
}else if(条件表达式2){
// 代码2
}else{
// 代码3
}
4.嵌套if选择结构
if(条件表达式1){
if(条件表达式2){
}
}
5.switch选择结构
switch(表达式){
case 常量1:
break;
case 常量2:
break;
....
default:
break;
}
循环结构：
循环控制关键字：
1.break 结束循环
2.continue 结束本次循环，进入下次循环
1.while循环
while(循环条件){
循环体
}
2.for循环
for(初始化循环变量;循环条件;循环出口){
循环体/循环操作
}
2.5数组
// 1.
var arr = new Array(3);
arr[0] = "hh";
arr[1] = "yy";
arr[2] = "mm";
// 2.
var arr = new Array("kk","ww","dd");
// 3.
// JSON(非常重要的文本格式 未来学)
var arr = ["ss","op","pp"];
<body>
<script type="text/javascript">
//定义数组(弱语法)
/*var arr = new Array(3);
arr[0] = "你好";
arr[1] = "呵呵";
arr[2] = "哈哈";
alert(arr[1]);*/
var arr = ["你","是","呀"];
//遍历数组
for (var i = 0;i<arr.length;i++) {
alert(arr[i]);
}
</script>
</body>
3.掌握JavaScript的函数使用
函数：方法：功能
一系列代码组成的一个完整功能。
3.1基本的系统函数使用
1.输出：alert(); 会弹出一个带有确定按钮的提示框
2.输入：prompt(); 会弹出一个带有输入框的提示框
var pwd = prompt("请输入您的密码：");
alert("您输入的是："+pwd);
3.parseInt() 转换为整数
4.parseFloat() 转换为小数
var num1 = prompt("请输入第一个整数：") - 0; // - 0也可以实现下方效果
var num2 = prompt("请输入第二个整数：") - 0;
// 转换为整数
// var num1 = parseInt(prompt("请输入第一个整数："));
// var num2 = parseInt(prompt("请输入第二个整数："));
/*var num1 = parseFloat(prompt("请输入第一个整数："));
var num2 = parseFloat(prompt("请输入第二个整数："));*/
// alert("两数的差为："+(num1 - num2));
// prompt()返回的类型是字符串 所以加号自动拼接
alert("两数的和为："+(num1 + num2));
3.2会自定义函数（方法）
方法的分类（按有返和无返等分类）：
1.无参无返
// function ： 函数/功能
function 方法名(){
// 方法代码
}
// 无参无返
function method1(){
alert("我是无参无返！");
}
// 方法需要调用
method1();
2.无参有返
function 方法名(){
// 方法代码
// 返回值
return 返回值;
}
function method2(){
alert("我是无参有返！");
return "hehe";
}
var result = method2();
alert(result);
3.有参无返
function 方法名(形参列表){
// 方法代码
}
function method3(name,age){
alert("有参无返："+name+"："+age);
}
method3("xxx",12);
4.有参有返
function 方法名(形参列表){
// 方法代码
return 返回值;
}
function method4(name){
alert("有参有返:"+name);
return "xx";
}
3.3函数的使用
/*function dianni(){
alert(1);
}*/
var btn = document.getElementById("btn");
// 绑定事件
// 匿名函数 没有方法名 只能使用一次
/*btn.onclick = function(){
alert(1);
}*/
// 绑定事件 如果函数绑定写上小括号() 表示调用函数并返回结果
// 如果只是写上方法名 这表示绑定函数
btn.onclick = dianni;
function dianni(){
alert(2);
}
3.4函数中的变量作用域
// 成员变量
var i = 11;
function method1(){
// 局部变量
var i = 10;
alert(i);
}
function method2(){
alert(i);
}
method1();
// method2(i);
扫一扫
772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
