js上课笔记

Posted 2020-10-12 七哥*启秀

html 结构化
CSS 样式
javascript 行为交互
01.JavaScript基础
02.JavaScript操作BOM对象
03.JavaScript操作DOM对象 *****
04.JavaScript的面向对象
--------------------------------------
05.jQuery (js) .css .js
06.jQuery选择器 ******
07.jQuery事件和动画
08.jQuery操作DOM对象 ******
09.表单验证
10.表单验证的框架 jquery validate
11.bootstrap 封装了Html css js

 

JavaScript基础 （liveScript）
01.和java的关系，只是借势！
02.是一个脚本语言，以.js结尾
03.浏览器编译JavaScript,解析器我们称之为JavaScript引擎！
04.无需预编译 *****
js是一种弱语言类型 var a=10; var a="101"; var a=new Date();
05.运行在客户端 ***** 减轻服务器的压力

目的：
01.提升用户的体验
02.减轻服务器的压力

组成部分：
01.ECMAScript规定了js的基本语法和基本对象
02.BOM(浏览器对象模型) 提供了处理网页内容的方法和接口
03.DOM(文档对象模型) 提供了与浏览器进行交互的方法和接口

我们一个页面中可以引入css文件还可以引入js文件？
有没有顺序呢？

01.css写在head中
02.js文件的引入写在body的最下方

 

 

js的引入方式：
01.行内引入
02.内部引入
03.外部引入

js中的常用事件

01.不想让a超链接 立即跳转至指定的页面
02.想让用户点击的时候 做一些处理工作
javascript: 伪协议
01.先去执行js代码
02.根据js代码做操作
alert(‘就是不跳转‘) 后续会换成某个操作的函数（方法）

<a href="javascript:alert(‘就是不跳转‘)">跳转</a>

伪协议 javascript:
onclick 点击事件
onblur 失去焦点事件
onfocus 获取焦点事件

 

 

js数据类型

undefined： 声明但是没有赋予初始值！没有被定义的变量！
var name;
alert(name); //什么都没有
alert(typeof(name)); //undefined

number: 包含了整数和浮点数
typeof(20)
typeof(20.2)

string : 被单引号和双引号括起来的内容都是字符串
typeof(‘20‘)
typeof(‘20.2‘)

boolean: true 和 false
alert(typeof(TRUE)); //把TRUE 当成一个变量名
alert(typeof(true)); //√
alert(typeof("true")); //string

object: js中的对象，包含数组, null和对象！

null：空值，表示对象不存在，等于undefined！

typeof 检测变量的数据类型
01. typeof 空格变量名称
02. typeof(变量名称) *****

类型转换
parseInt(): 变量值可以不是一个数字,返回第一个不为数字的所有值,
返回一个整数！
　否则返回NaN(not a number)
parseFloat()：返回一个浮点数！

强制类型转换

number():把变量整体当作转换的值，如果有一个字符不是数值，则返回NaN！

boolean():只要变量不是false，0，undefined，null，NaN,未定义的参数或者定义未赋值
空串，或者什么都没有输入！ 其他都返回true！

== 和 ===

== ：在两个变量比较的时候，先进行类型转换，之后再比较！
alert("0"==false);
首先会把字符串"0"转换成number 0
false转换成number 0
0==0

===：比较严格，先比较两个变量的类型是否一致，之后再比较值！不会类型转换！

注意点：
01.如果比较的变量中boolean的值，会先把boolean类型的值转换成number类型！
02.如果比较的变量中String的值，会先把String类型的值转换成number类型！

输入和确认
alert()： 只有一个确定按钮！
confirm ()：是一个提示框，有确定和取消按钮！
用户点击确定返回值是true
用户点击取消返回值是false

prompt（）：是一个对话框！
01.第一参数是提示语句
02.第二参数是输入框中的默认值，可以省略
返回值是我们第二个参数（用户的输入）！

js中也有选择结构！和java中的用法一致！

数组

var arr1=new Array(); //没有长度
var arr1=new Array(5); //有长度5
var arr1=new Array(1,2,3,4,5) //定义数组的同时赋值
var arr1=[1,2,3];

向数组中新增元素 push
把数组中的每个元素使用指定的分隔符连接起来，变成字符串！ join

循环 for in

for(var index in arrs){
document.write(arrs[index])
}
index 是元素的下标！

函数

定义函数的两种方式
<a href="javascript:sayHello(‘小黑‘);">跳转</a>

function sayHello(userName){
alert(userName+"辛苦了！");
}

var sayHello=function(userName){
alert(userName+"辛苦了！");
}