投稿
  1. 首页
  2. html-js-css

JavaScript基础

芯片查询 • 2022-6-10 • html-js-css • 阅读 41

JavaScript基础,第1张

ECMAScript基本语法 1.基本语法

js引入方式

1.内部/内嵌js

定义

2.外部式

3.行内式 js事件

注释方式

// 单行

/**/ 多行

3.数据类型

number

boolean

string

undefined

null

4.变量

定义变量的方式 var 变量名=初始化变量值

5.字符串拼接

只要字符串和其他类型相拼接 最终的结果都是字符串类型 使用＋

6.输出方式

1.alert() 2.console.log() 3.prompt()

7.typeof运算符

获取变量的类型

null得到的类型是object

算数运算符

1.算数运算符

+ - / * %

2.赋值运算符

=
+=
-= 
* =
/ =

3.自增自减

++ - -

4.比较运算符 
> < >= <= == != ===(全等于)
比较运算符 结果为true 或 false
比较方式
1.类型相同的话直接比较
字符串:字符串是按照字典顺序比较的 按位逐一比较 直到得出大小位置
2.类型不相同 类型转换在比较
=== 全等于 在比较之前 先判断数据类型 如果类型不一致就返回false

5.逻辑预算符

&& 逻辑与 两边都为true 结果才为true

|| 逻辑或 只要有一个为true 结果就为true

! 逻辑非 结果取反

逻辑与的短路运算 如果表达式一结果为真 则返回表达式二 如果1的结果为假 返回表达式一

逻辑或单短路运算 如果表达式一结果为真 则返回表达式一 如果表达式一为假 则返回表达式二

6.三元表达式(三目运算)

? :表达式
表达式?值1:值2
var a=3;
var b=4;
a>b ? 10 : 20  取值20
判断表达式的值 如果为true 则返回值1 如果为false返回值2
条件分支语句 
if else 双分支语句
if(条件表达式){
    执行语句1;
}else {
    执行语句2;
}
执行思路 先判断条件表达式 如果为true 就执行语句1 如果为false 就执行语句2

回顾

1.运算符 + - * / %

2.赋值运算符= += -= *= /=

a=a+1 a+=1

++ -- (自增减运算符)

1.++在前 先自身加一 之后再参与运算

2.++在后 先参与运算 在自身加一

var a=5;

var a1=a++ + ++a

3.比较运算符

> < >= <= == ===
==:只关注值是否相等 不看数据类型
=== : 数据类型一致 值也要相等

4.逻辑运算符

&& 两边都为true 返回true

|| 只要一边为true 返回true 都为false 返回false

! 结果取反 !true=false

5.三元表达式

表达式 ? 值1 : 值2;

var a=10;

var b=20;

var c=a>b?a : b;

if(a>b){

a

}else {

b

}

6.流程控制语句

多条件控制语句

if(条件控制语句){

执行结果1

}else if(条件控制表达式) {

执行结果2

}else if(表达式){

执行结果3

} else {

}

switch 
switch(变量(表达式)){
    case 1:
        执行语句1;break;
    case 2:
        执行语句2;break; 
    case 3:
        执行语句3;break; 
    default:
        执行最后的语句;
       }
在Java中 变量或者表达式可以接收byte int short char 枚举(1.5) string(1.7)
在js当中可以接收任意原始数据类型
循环 for循环 
for循环主要用于把某些代码循环若干次 通常和计数有关系
语法结构
for(初始化变量;条件表达式; *** 作表达式(计数器增加)){
    //循环体
}
初始化变量:用var 来声明一个计数器
条件表达式:true 继续执行进行循环 false则退出循环
 *** 作表达式:每次循环结束之后 计数器递增 递减
双重循环 
1.双重for循环  语法结构
for(初始化变量;条件表达式; *** 作表达式(计数器增加)){
    for(初始化变量;条件表达式; *** 作表达式(计数器增加)){
    //循环体
}
}
我们可以吧里面的循环看做是外层循环的语句
外层循环一次 里面就要循环所有
while循环 
while(条件表达式){
    //循环体
}
当...的时候
执行思路
如果条件表达式为true 则执行循环体 否则退出循环体

do{}while();

1.do{} while;
语法结构
do{
    循环体
}while(条件表达式);
2.执行的思路 do while 循环先执行一次循环体 之后再判断条件 如果结果为真 表达式继续执行 否则退出
do while 至少会执行一次

1.打印一个n行 n列的星星 n的意思是可以自己输入 输入行数 输入列数 双重for

2.九九乘法表 双重for

3.d出一个提示框 显示你爱我么? 如果输入我爱你 就提示结束 我也爱你啊 否则一直循环问 while循环

数组 
1.创建数组的方式
 1.var arr=new Array(元素列表);
 2.var arr=new Array(默认长度);
 3.var arr=[元素列表];
访问数组元素 遍历的方式 通过下标索引来实现
结合for循环 
//遍历数组 把数组从头到尾访问一边
            var arr=['red','green','pink','black'];
            console.log(arr);
            //循环遍历
            for(var i=0;i 
函数(方法)对象 

1.function (函数,方法)
  1.创建方式
  var fun=new Function(参数,方法体);
  2.function 方法名(参数列表){
  方法体;
  }
  3.var fun= function (参数列表){
  方法体
  }
 

1.声明函数 (1)function函数的关键字全部小写 (2)函数是做某一件事 ,函数名一般的动词 (3)函数不调用 不会执行 2.调用函数 格式 函数名(); (1)调用函数的时候千万不要忘记写小括号
 

1.我们可以利用函数的参数 来实现函数重复不同的代码 语法 function 方法名(形参1,形参2){}声明在函数的小括号里面
 

        function cook(menu) {//menu 就是一个形参 是接收实际参数的
            console.log(menu);
        }
        cook('鱼香肉丝');//鱼香肉丝 就是 实参
        cook('大肘子');
        //函数的参数 可以有 也可以没有
 

continue 关键字 退出本次循环 继续执行剩余的循环次数 for(var i=1;i<=5;i++){ if(i==3){ continue; } console.log(i); } //break 退出整个循环 for(var i=1;i<=5;i++){ if(i==3){ break; } console.log(i); }
 

confirm 确定 取消
 
基本对象 

1.function:函数(方法)
 

1.var fun=new Function(参数)
 

2.function 方法名称(参数){方法体}
 

3.var 方法名=function(参数)
 

2.Array数组对象
 

1.var arr=new Array(数组元素)
 

2.var arr=[数组元素]
 

3.var arr=new Array(数组长度)
 
3.Date:日期对象 

1.创建日期对象
var date = new Date();
toLocaleString() 返回当前date对象对应的时间本地字符串格式
getTime() 获取毫秒值 返回当前的日期对象从1970年1月1日零点的毫秒值
document.write()输出到页面
 
4.Math:数学对象 

1.创建
    特点:不需要创建直接使用 Math.方法名();
2.random():在0-1之间产生随机数 [0,1) 包含0不包含1
3.ceil():对数字进行上舍入
4.floor():对数字进行下舍入
5.round():对数字四舍五入
6.Math.PI 圆周率
 

5.RegExp:正则表达式
 

1.正则表达式定义的规则 
 1.单个字符
   例如[a]    [abc]  [a-zA-Z0-9_]
   \d:单个数字字符[0-9]
   \w:单个单词字符 [a-zA-Z0-9]
 2.量词符号 
  ?:表示出现0次或者1次; 
  *:表示出现0次或者多次;  
  +:表示出现1次或者多次;    
  {m,n}   m<=数量<=n
  {,n}    最多n次
  {m,}    最少m次
 3.^开始 
   $结束       
    
  正则对象
  1.创建对象
  var reg=new RegExp("正则表达式")
  var reg=/^正则表达式$/
  var reg=/^[a]{1,2}$/
  2.test(参数) 验证字符串是否符合正则表达式
 
DOM入门 

1.功能:控制HTML里面的内容
2.获取页面标签(元素对象):Element
  document.write()
  document.getElementById("id值"):通过id值获取元素对象
3.innerHTML修改标签的内容
  1.修改属性值
    明确获取的对象是哪一个
    查看API 看看都能修改哪些属性
  2.修改标签体的内容
    属性:innerHTML
    使用innerHTML来修改标签体的内容
 
事件的简单学习 

1.功能:某些组件被执行了某些 *** 作之后,触发某些代码的执行
  造句:XXX被XXX,我就XXX
  我方水晶被摧毁之后,我就骂队友
  敌方水晶被摧毁之后,我就发gg
如何绑定事件
          1.直接在HTML标签上 指定事件的属性 属性值就是js代码
            1.事件 onclick---单击事件
            2.通过js代码获取元素对象 指定事件的属性 设置一个函数
 
BOM 

1.概念;Browser Object Model 浏览器对象模型
  将浏览器各个部分封装成了对象
2.组成:
  window:窗口对象
  navigator:浏览器对象
  screen:屏幕
  history:历史记录
  location:地址栏对象
3.windows:窗口对象
  1.与d出框 有关的方法
    alert()
    prompt()
    confirm() 带有确认按钮和取消按钮 如果用户点击确定 true 反之 false
  2.与打开关闭有关的方法
    close() 关闭浏览器窗口
    open() 打开一个新的浏览器窗口
  3.与定时器有关的方法
    setTimeout() 在指定的毫秒后调用函数表达式
       参数
       1.js代码或者方法对象
       2.毫秒值
       返回值 唯一标识 , 用于取消定时器
    clearTimeout取消有setTimeout设置的定时器
    setInterval() 按照指定的周期 来调用函数表达式
    clearInterval 取消由setInterval设置的 timeout
 

 
回顾 

DOM
1.事件----单击事件
  οnclick="函数名";
  获取页面元素var ele=document.getElementById("id名");
             ele.οnclick=fun...
             
             
BOM
close()  open()
定时器
一次性定时器
setTimeout
参数:要执行的函数  毫秒
clearTimeout(); 取消定时器
周期性
setInterval()
参数: 要执行的函数 毫秒
clearInterval() 清楚定时器
 
1.location:地址栏对象 

1.创建地址栏对象
 

1.window.location
 

2.location
 

2.reload() 重新加载当前的文档
 

3.属性
 

href 设置返回的URL
 
2.History 历史记录对象 

1.创建
 

1.window.history
 

2.history
 

2.back() 返回 加载前一个history中的URL
 

forward() 前进 加载后一个history中的URL
 

go(参数为数字) 数字如果为正数:前进几个历史记录
 

数字为负数:后退几个历史记录
 

属性: length 返回当前窗口历史列表当中URL的数量
 
DOM 

概念:Document Object Model 文档对象模型
    将标记语言文档的各个部分 封装为对象  可以使用这些对象进行crud的动态 *** 作
create创建 read读取 update更新 delete删除
​
Document:文档对象 
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象
​
1.Document:文档对象
  1.创建
    window.document
    document
  2.方法
    1.获取Element对象
      1.getElementById() 根据id值获取元素对象 id值唯一
      2.getElementsByClassName() 根据class属性值获取元素的对象 返回的是一个数组
      3.getElementsByTagName() 根据元素名称获取元素对象 返回值也是一个数组
      4.getElementsByName() 根据name的属性值获取元素 返回是一个数组
      
2.Element:元素对象
  1.创建/获取:通过document 来获取或者创建
    1.removeAttribute():删除属性
    2.setAttribute():设置属性
    
3.node:节点对象
  每一个DOM对象都可以被认为是一个节点
  方法
  dom 数 crud
  appendChild():向节点的子节点列表的结尾 添加新的子节点
  removeChild():删除并返回当前节点的指定子节点
  replace(): 用新节点替换一个子节点
 属性 parentNode 返回节点的父节点
 document.createElement
 
1.标签体的设置和获取:innerHTML
2.使用HTML元素对象的属性
3.可以控制元素样式
  使用元素style 属性来进行设置
  div1.style.border="1px solid black";
 

1.点击事件 onclick:点击事件 ondblclick:双击事件 2.焦点事件
 

onblur: 失去焦点,
 

onfocus: 元素获得焦点 3.鼠标事件 onmousedown 鼠标按钮被按下 onmouseover 鼠标移动到元素上 event 参数 4.键盘事件 onkeydown 某个键盘按键被按下 onkeyup 某个键盘按键被松开 onkeypress 某个按键被按下并松开
 

5.加载事件 onload
 

 

vertical-align:middle;
 

上下垂直居中
 

/* Global 1.特点:全局对象 Golbal里面封装的方法不需要调用 直接使用 方法名() 2.方法 url编码:encodeURI(); url解码:decodeURI();
 

         encodeURIComponent();url编码 能编码的字符更多
         decodeURIComponent();url解码 
         */
        
        var str = "https://www.baidu.com?text=是否放假?";
        var encode=encodeURI(str);
        document.write(encode+"
");
        var s = decodeURI(encode);
        document.write(s);
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1299049.html
赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
芯片查询 芯片查询 一级用户组
0 0
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表（0条）

保存