前端三件套（3）-Javascript

1.网页与Javascript

网页（HTML+CSS+Javascript）
HTML-结构-HTML是网页内容的载体（内容就是程序员放在页面上想让用户去浏览的信息，如文字，图片，视频等）
CSS-表现-用来改变内容的外观，就像网页的外衣，内容还是那个内容，但是外观有变化，比如说字体，颜色变化，背景图片，边框设置等

javascript-行为-Javascript用来实现网页上的行动的效果，一般的交互行为，动画效果由JavaScript来实现（后续准备学习JQuery，见专题：从Javascript到JQuery）

2.Javascript（js）作用

JavaScript 能改变 HTML 内容，能改变 HTML 属性能改变 HTML 样式 (CSS)，能完成页面的数据验证。JS 需要运行浏览器来解析执行 JavaScript 代码。
。Javascript和 Java 没什么大关系，就是名字像。

3.Javascript（js）特点

3.1JavaScript是一种基于对象的解释型的脚本语言，在程序运行中逐行解释，js中可以创建和使用对象；
3.2 跨平台，只要能解释 JS 的浏览器都可以执行。
3.3JavaScript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。

4.Javascript（js）基本使用

4.1 在script 标签中写 JS 代码

console.log("ok")在控制台输出ok
alert() 使用弹窗方式输出信息
可以在head 和 body 嵌入 script，执行顺序从上到下，一般我会放在head

4.2 使用 script 标签引入 JS 文件

(1.)创建js文件
(2.)在html文件中使用 script 标签引入 JS 文件
<script type="text/javascript" src="JS文件的路径"></script>
说明：Javascript（js）的两种方法不可以混用，如果都使用，实测只有一个生效（引入的js文件）-猜测原因：js的执行顺序从上到下）

4.3 查看 JS 错误信息

使用浏览器的调试器可以直接定位错误

5.JavaScript 变量

与其他语言差不多，是存储数据的容器

6.JavaScript 数据类型

**理解JavaScript的弱引用与松散

6.1数据类型（常用的）

数值变量使用：number
字符串使用：string （可以双引号，单引号，空串）
对象类型: object
布尔类型： boolean
函数类型： function

6.2 特殊值

没赋值：undefined 变量未赋初始值时，默认 undefined
null 空值
NaN Not a Number 非数值（java可能直接报错了，再次理解JavaScript“松散”的特点）

7.运算符

算数运算符-同java
赋值运算符-同java
关系运算符-多了一个"="：全等值和类型都相等，返回true,""只要值相等< 是简单的做字面值的比较>（e.g. "100"==100,返回true）
逻辑运算符（或、与、非）

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、""(空串) 都认为是 false
&&：短路与机制；||短路或机制（短路机制：有了结果就不继续往下执行，结合1去理解到底返回什么）

条件运算符-类似java中的三元运算符（A>B？C：D）

8.数组定义使用与遍历

定义：类似java，同时可以直接扩容，数组名【下标】=xxx；下标跳过的也被扩出来，值=defined
使用与遍历：

9.JavaScript 函数

9.1函数说明
js中函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块（js中函数在这两种情况下才会执行）
9.2示例
简单示例1（直接定义）：function hello（）{
alter（"hello，JavaScript！"）
}
事件驱动函数：botton事件：
<button onclick="hello()">点击这里驱动函数</button>
简单示例2（将函数赋给变量）：
var f1 = function () {
alter（"hello，JavaScript！"）
}
直接调用函数：
console.log(typeof f1)；
9.3注意事项

JS 中函数的重载会覆盖掉上一次的定义（没有重载机制）
函数的 arguments 隐形参数（作用域在 function 函数内）

隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数的变量。
function f1 ~~（arguments）~~{
}
f1（10，500，"aaa"）;可以使用的，因为arguments 隐形参数，如果函数有x个形参，但是使用时传了超过x个，那么就使用隐形参数arguments了，当成函数没有形参（因为没有匹配上），如果少于x个，那么认为多余的形参值为undefined。
隐形参数特别像 java 的可变参数一样。 public void fun( int ... args )
js 中的隐形参数跟 java 的可变参数一样。操作类似数组

10.JS 自定义对象

定义1：

var 对象名 = new Object(); // 对象实例（空对象）
属性定义与访问：
对象名.属性名 = 值; // 定义一个属性
对象名.函数名 = function(){} // 定义一个函数
对象名.属性名；对象名.函数名
没有定义属性，直接使用，就会出现变量提升，显示 undefined

定义2：

var 对象名 = {
属性名：值, // 定义属性
属性名：值, // 定义属性 , 注意有,号
函数名：function(){} // 定义函数
};
访问：对象名.属性名；对象名.函数名

11.事件

11.1 事件说明

JavaScript中事件是电脑输入设备与页面进行交互的响应。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

11.2 事件分类

事件的注册（绑定）：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码
动态注册事件：通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){}

11.3常用事件

1.onload加载完成事件

静态注册：直接在hrml标签的事件属性调用
<body onload="sayOK()">

动态注册：
window.onload = function () { alert("动态注册 onload 事件"); }
解释：在js中，将页面窗口映射成 window dom对象，window对象有很多的函数和属性，可以使用， window.onload 表示页面被加载完毕后，后面的 function (){} 表示加载完毕后，再去执行的function方法。

2.onclick单击事件

静态：<button onclick="sayOK()">sayOK按钮</button>
动态：先拿到dom对象，在动态的绑定
window.onload = function () {
var btn01 = document.getElementById("btn01");**
btn01.onclick = function () {
alert("你点击了sayHi按钮");
} }
<button id="btn01">sayHi按钮</button>
体会window.onload = function()的作用哦
window的dom对象：整个浏览器窗口
document的：浏览器地址栏下面的正文部分

3. onblur 失去焦点事件

点击查看代码

fname2.onblur = function () {
      fname2.value=fname2.value.toUpperCase();
                //失去焦点就转换成大写
            }
<input type="text" id="fname2" />

4.onchange 内容发生改变事件

域的内容被改变

点击查看代码

动态：
<select id="sel01"> <!-- 动态绑定 onchange-->
    <option>---城市---</option>
    <option>北京</option>
    <option>上海</option>
    <option>长沙</option>
</select>
        window.onload = function () {
            //获取到sel01的dom对象
            var sel01 = document.getElementById("sel01");
            //给sel01绑定onchange事件
            sel01.onchange = function () {
                alert("城市变更~");
            }
        }
静态:
<select onchange="function()" >
    <option>---城市---</option>
    <option>北京</option>
    <option>上海</option>
    <option>长沙</option>
</select>

5.onsubmit 表单提交事件

点击查看代码

静态：
<h1>注册用户1</h1> <!-- 静态注册表单提交事件 -->
<form action="ok.html" onsubmit="return register()">
    u: <input type="text" id="username" name="username"/><br/>
    p: <input type="password" id="pwd" name="pwd"/><br/>
    <input type="submit" value="注册用户"/>
</form>

动态：
1.取id
<h1>注册用户2</h1> <!-- 动态注册表单提交事件 -->
<form action="ok.html" id="form2">
    u: <input type="text" name="username"/><br/>
    p: <input type="password" name="pwd"/><br/>
    <input type="submit" value="注册用户"/></form>
2.调用函数
form2.onsubmit = function () {业务逻辑}

posted @ 2023-01-10 17:25 ZitWang 阅读(48) 评论(0) 收藏举报

刷新页面返回顶部

zitw

前端三件套（3）-Javascript

1.网页与Javascript

2.Javascript（js）作用

3.Javascript（js）特点

4.Javascript（js）基本使用

4.1 在script 标签中写 JS 代码

4.2 使用 script 标签引入 JS 文件

4.3 查看 JS 错误信息

5.JavaScript 变量

6.JavaScript 数据类型

6.1数据类型（常用的）

6.2 特殊值

7.运算符

8.数组定义使用与遍历

9.JavaScript 函数

10.JS 自定义对象

定义1：

定义2：

11.事件

11.1 事件说明

11.2 事件分类

11.3常用事件

1.onload加载完成事件

2.onclick单击事件

3. onblur 失去焦点事件

4.onchange 内容发生改变事件

5.onsubmit 表单提交事件

公告

zitw

前端三件套（3）-Javascript

1.网页与Javascript

2.Javascript（js）作用

3.Javascript（js）特点

4.Javascript（js）基本使用

4.1 在script 标签中 写 JS 代码

4.2 使用 script 标签引入 JS 文件

4.3 查看 JS 错误信息

5.JavaScript 变量

6.JavaScript 数据类型

6.1数据类型（常用的）

6.2 特殊值

7.运算符

8.数组定义使用与遍历

9.JavaScript 函数

10.JS 自定义对象

定义1：

定义2：

11.事件

11.1 事件说明

11.2 事件分类

11.3常用事件

1.onload加载完成事件

2.onclick单击事件

3. onblur 失去焦点事件

4.onchange 内容发生改变事件

5.onsubmit 表单提交事件

公告

4.1 在script 标签中写 JS 代码