js基础

JavaScript基础

JavaScript 基础
javaScript 基于对象与驱事件动的具有安全性的脚本语言
基于对象
可以使用JS提供的对象的属性方法,也可以自己创建对象。
面向对象:封装 继承 多态
基于对象:封装
事件驱动:
事件:针对浏览器页面的所有操作统称为事件 如:点击,页面加载,鼠上移标
事件驱动:对应每个事件执行的应用程序称之为事件驱动
脚本语言:弱类型语言
它采用小程序段的方式实现编程。它作为一种解释性语言,不需要进行编译,而是在程序运行过程中逐行地被解释。
与Java的区别:
1.基于对象和面向对象
面向对象:封装 继承 多态
基于对象 封装
可以使用JS提供的对象的属性方法,也可以自己创建对象。
2.解释和编译
Java 需要先编译再执行 JS 不需要编译通过浏览器直接执行
3.强变量和弱变量
Java 变量使用前必须先声明 规定他的数据类型
JS 使用前不需要规定数据类型,再代码运行中JS会判断他的数据类型
4.应用方面
JS 多应用与客户端 Java多应用于服务器
服务器 & 客户端?
B/S 与 C/S
Browser(浏览器) / Server(服务器)
淘宝 京东 贴吧 等
Client (客户端) / Server(服务器)
LOL CF 360 各种APP
Js作用:
嵌入动态文本于HTML页面
对浏览器事件做出响应
读写HTML元素
在数据被提交到服务器之前验证数据 表单验证
游戏 等
特点:
脚本语言
JavaScript是一种脚本语言,它采用小程序段的方式实现编程。它作为一种解释性语言,不需要
进行编译,而是在程序运行过程中逐行地被解释。
基于对象
JavaScript是一种基于对象的语言,这意味着它能运用自己已经创建的对象。
简单性
JavaScript的简单性首先主要体现在它基于Java的基本语句和控制流程,是一种简单而紧凑的 语言;其次,它的变量类型是采用“弱类型”,
并未使用严格的数据类型。
动态性
JavaScript是动态的,它可以直接对用户或客户输入做出响应而无需经过服务程序。它对 用户的响应是采用以事件驱动的
安全性方式进行的。
JavaScript是一种安全性语言,它不允许访问本地的硬盘,而且不能将数据存入到服务器上;
不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据
的丢失。
跨平台
JavaScript仅依赖于浏览器本身,与操作系统无关,只要是能运行浏览器的计算机,并支持 JavaScript的浏览器就可以正确执行。从而实
现“编写一下,走遍天下” 的梦想。
Js使用方法

  1. 页面写入 js文件中不需要写
  1. 特殊运算符:
    . 用于属性和方法的调用
    [] 用于数组下标
    , 多个变量或参数的间隔
    new 创建新的对象
    ? : 条件运算符
    typeof 用于返回数据类型
  2. 算数运算符
    +,-,*,/,%,++,–
  3. 比较运算符:

=,<=,>,<,==,!=

  1. 4.逻辑运算符:
    !,&&,||
  2. 赋值运算符
    =,+=,-=,*=,/=,%=,
  3. 字符串运算符

控制语句

  1. if else
  2. switch case
  3. for
  4. while
  5. do while
  6. for( in ) 针对于数组的一个遍历
  7. break 跳出循环
  8. continue 跳出本次循环执行下一次循环
    变量
    1、命名规则
    以字母开头可以由数字_组成不能使用汉字 空格 + # 等符号
    不能是JS关键字
    首字母小写 多个单词链接开头字母大写 驼峰规则
    区分大小写
    2、声明变量的关键字 var
    3、变量名必须保持唯一,不能重复
    全局变量 :定义在函数外 使用VAR 定义在函数内 必须不使用VAR
    局部变量: 使用Var定义在函数内 只能在函数内使用。
    函数:
    使用 function 函数名(【参数列表】){函数体} 【】可有可无
    参数 可以为任意个,调用函数传参数可以传任意个,
    如果函数有返回值直接使用return
    onclick 鼠标点击事件 onblur 失去焦点事件
    document.getElementById(“id”) 根据HTML id属性获取元素对象 使用.可以调用对象的所有属性
    1、计算1加到100的和
    2、使用while语句计算1加到100的和
    3、打印100以内的偶数序列 :02468。。。
    4、循环1-100,单数次输出“好好学习!”,偶数次输出“天天向上!”
    5、在死循环中用if和break实现连续打印20个*就结束循环。
    6、将a,b,c三个整数按它们数值的大小,从小到大的顺序打印显示。
    (练习if else语句)

数组

数组对象类型 Array
数组可以存放很多的数据。有数组名代表所有这些数据,而用
数组名[下标]表示其中某个元素(下标从0开始)。

  1. 数组的定义方式
    <1> 使用new操作符,创建数组的同时赋初值
    var 数组名 = new Array(””,””)
    <2>先创建指定长度的数组,内容后面再赋值
    var 数组名 = new Array(数组的长度);
    <3> 使用方括号,创建数组的同时赋初值
    var 数组名 = [元素1,元素2,,,,];
    注意:如果()中写的是一个正整数的情况下,那么代表的是数组的长度
  2. 数组的遍历:
    <1>普通for循环,
    <2> for in的使用
    for (var 一个下标变量 in 数组名){
    alert(数组名[下标变量]);
    }
  3. 数组的属性:
    js只有length属性 没有length()
    java 数组 有length属性 和 Strign length();
  4. 数组的常用方法:
    concat([数组1]) 拼接数组,将一个数组和一个或多个数组拼接返回新的数组
    join() 将数组转化为字符串 并使用参数的字符分隔 ,没有参数默认是逗号
    pop() 移除数组的最后一个元素 并返回该元素
    push() 向数组中添加新元素,并返回数组的最新长度
    reverse() 返回一个数组元素被反转的数组
    toString() 返回一个字符串
    sort() 返回一个排序后的数组
    二维数组
    var 数组名 = new Array(arr1,arr2,·····);
    var 数组名 = new Array(数组长度);
    var 数组名 = [[值1,值2···],[值1,值2··],[],[]]
    二维数组横坐标越界 报错 纵坐标越界返回undefined 一维数组下标越界返回undefined

常用事件

内建函数
isNaN(is not a number) 判断参数是不是 不是数字 ,参数是数字返回false,不是数字返回true ,
数值类型字符串
parseInt()
剖析字符串 从左往右,返回数值类型字符,如果找到非数值类型,停止剖析,立刻返回剖析结果,如果一开
始就是非数值类型,返回NaN not a number,不识别小数点
parseFloat() 可以识别小数点
number() 将数值类型字符串转化为number类型 非数值类型字符串返回NaN 空字符串,空格返回0
eval() 把字符串当做表达式 JS代码执行
如果字符串不是合法的表达式JS代码将报错
eval()可以使用 变量, 函数, 前提是变量 函数上下文是可用的
常用事件
1 鼠标事件
onclick 鼠标单击事件
ondblclick 鼠标双击事件
onmouseover 鼠标上移事件
onmouseout 鼠标移开事件
onmousemove 鼠标移动事件
onmouseup 鼠标抬起事件
onmousedown 鼠标按下事件
2 键盘事件
onkeydown 键按下事件
onkeyup 键抬起事件
onkeypress 键按下并抬起事件
3 一般事件
onFocus() 获得焦点事件
onBlur() 失去焦点事件
onChange() 内容改变事件(仅用于下拉列表框)
4 表单事件
onsubmit 写在标签里面 通过提交按钮调用函数 必须有返回值 onsubmit=”return 函数名()” 如果
函数返回false 不进行提交。
onreset写在标签里面 通过重置按钮调用函数
5 页面事件
onLoad() 页面加载事件作用于标签
onUnload() 页面关闭事件作用于标签

正则表达式

正则表达式
作用 提供一个模板 对搜索输入的字符串进行匹配或者验证 (多用于表单验证)
定义使用方式
var reg = /表达式/ ;
reg.test(字符串);
1 预定义字符

  1. . 匹配除了换行以外所有字符
  2. \w 匹配字母数字下划线 相当于 [0-9a-zA-Z_]
  3. \s 匹配任意的空白符 空格 tab
  4. \d 匹配数字 [0-9]
  5. ^ 表示字符串开始
  6. $ 表示字符串的结束
    2 反义字符
    1 \W 匹配除了字母数字下划线以外的任意字符
    2 \S 匹配任意非空白符
    3 \D 匹配任意非数字的字符
    5 ^ 取反 用法[^abc] 用来匹配除了abc之外任意字符
    3 限定字符(重复)
    1 * 重复0 次或者多次 相当于{0,}
    2 + 重复1次到多次 相当于{1,}
    3 ? 重复0次或者1次 相当于{0,1}
    4 {n} 重复N次
    5 {n,} 至少重复n次
    6 {n,m} 至少重复N次 最多M次
    4 转义字符
    \ . \ \w
    5 匹配汉字
    [\u4e00-\u9fa5] [0-9a-zA-Z\u4e00-\u9fa5]
    6拓展
    g 全局匹配
    I 大小写全部匹配
    replace(/正则/g,”替换字符”)替换全部
    优先级
    相同优先级的从左到右进行运算,不同优先级的运算先高后低。各种操作符的优先级从高到低如下:
    操作符 描述
    \ 转义符
    (), (??, (?=), [] 圆括号和方括号
    *, +,?, {n}, {n,}, {n,m} 限定符
    ^, $, \元字符,任意元字符 位置和顺序
    | “或”操作

Window对象

Window对象
代表浏览器开启的视窗 他是js的默认对象 使用它的属性方法 可以省略window前缀
在这里插入图片描述
1常用属性

  1. status 浏览器状态栏信息
  2. document window中的文档属性,每个载入浏览器的HTML文档都会成为document对象,它使我们在
    脚本中可以对页面的所有元素进行访问
  3. location window中的location对象
  4. history window中的history对象
    2 window常用方法
  5. alert() 提示警告信息 用法:alert(“信息”)
  6. confirm() 提示确认信息 用法:confirm(“信息”),
    根据返回值来判断点击的是确定还是取消,确定返回true,取消返回false
    3 prompt() 显示可提示用户进行输入的对话框 用法:prompt(“信息”,[输入框默认值]),当点击确定时返回的是输入的值,点击
    取消时。返回的是null
    4 open() 打开一个新的浏览器窗口 用法:视窗对象名称 =open (‘url‘ , ‘新视窗名’ , ‘规格‘ )
    被open的打开的浏览视窗中 通过opener调用父窗口的功能和信息也可以调用父窗口的函数
  7. close() 关闭已开启的浏览视窗 用法:视窗对象名称.close( )
  8. setInterval() 按照指定的周期(毫秒)来调用函数或者计算表达式 用法:temp = setInterval( “函数( )”,毫秒)
  9. clearInterval( ) 取消某setInterval ( )的设置 用法:clearInterval(temp )
  10. setTimeout( ) 在指定的毫秒数后调用函数或计算表达式(记住,次数是一次) 用法:timer =setTimeout( “函数( )”,毫秒)
  11. clearTimeout( ) 取消某setTimeout ( )的设置 用法:clearTimeout(timer)
    3窗口对话框类型
    1 模态窗口 showModalDialog
    如果不关闭当前窗口,就无法操作其他窗口
    showModalDialog([, vArsURL gs],[vArgs] [,sFeatures])
    参数说明:
    sURL用来指定对话框要显示的文档的URL(;路径必须是相对路径)
    vArgs用来向对话框传递参数。
    sFeatures用来描述对话框的外观等信息。
    使用window.dialogArguments;//获得父级传的参数
    2非模态窗口 showModelessDialog
    即使不关闭当前页面,也可以操作其他窗口
    3模态对话框规格参数
    dialogHeight 对话框高度
    dialogWidth 对话框宽度
    dialogLeft 设定视窗左边界
    dialogTop 设定视窗上边界
    center 窗口是否居中,默认yes。
    help 是否显示帮助按钮,默认yes
    resizable 是否可被改变大小,默认no
    status 是否显示状态栏。默认为yes
    scroll 是否显示滚动条。默认为yes
    JS中打开新页面的方法
    location.href =
    open()
    showModalDialog()
    showModelessDialog()
    location.relace();
    JS刷新页面方法:
    location.reload()
    location.href = location
    history.go(0)
    4 浏览器对象
  12. location对象
    Location 对象包含有关当前 URL 的信息
    常用属性:href location.href=”Url”; 在同一窗口跳转到新的页面
    能返回上级页面
    常用方法:
    location.reload() 重新location.href=location加载当前文档(刷新);
    等同于 localtion.href = location
    location.replace(“新页面”) 以新的文档取代之前文档
    无法返回上级页面 与 location.href 效果相同
  13. history对象
    History 对象包含用户(在浏览器窗口中)访问过的 URL。
    常用方法:
    history.back() 加载 history 列表中的前一个 URL 。相当于浏览器后退按钮
    history.forward()加载 history 列表中的下一个 URL。等同于按浏览器的前进按钮
    作用:阻止本页面的前进和后退
    history.go(索引)
    history.go(1) 等同于history.forward() 前进
    history.go(-1) 等同于history.back() 后退
    history.go(0)
    等同于location.reload(),location.href=location;刷新
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值