JS Q&A

智极漫步
• 阅读 1731

URL后面#号是代表什么?

  • # 代表页面中的某个位置,也称为地址hash值
  • #XX 作用当前可视区域移动到页面xx位置
  • # 仅对浏览器起作用,对服务器无用,所以HTTP请求不包括#(#之后的字符都不会被发送到服务器端。)
  • 改变#不触发网页重载
  • 改变#会改变浏览器的访问历史

如何获取URL中#号的值?

  • 使用window.location.hash这个属性可读可写

如何监听URL中#号值的变化

  • onhashchange事件(IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。)
window.addEventListener("hashchange", function(){
   var hash = window.location.hash.slice(1);
});

浏览器中的localStorage如何存取?

  • localStorage存值
 localStorage.setItem(key,val);
  • localStorage取值
var data = localStorage.getItem(key);

传统表单提交前的数据校验如何实现?

  • 使用表单提交事件onSubmit,返回ture,表单继续提交,返回false,表单终止提交
       <form name="formLogin" action="user.php" method="post" onSubmit="userLogin()">
            <table width="100%" border="0" align="left" cellpadding="3" cellspacing="5">
                <tr>
                    <td width="15%" align="right">{$lang.label_username}</td>
                    <td width="85%"><input name="username" type="text" size="25" class="inputBg"
                                           placeholder="请输入用户名/手机号"/></td>
                </tr>
                <tr>
                    <td align="right">{$lang.label_password}</td>
                    <td>
                        <input name="password" type="password" size="15" class="inputBg"/>
                    </td>
                </tr>
                <!-- 判断是否启用验证码{if $enabled_captcha} -->
                <tr>
                    <td align="right">{$lang.comment_captcha}</td>
                    <td><input type="text" size="8" name="captcha" class="inputBg"/>
                        <img src="captcha.php?is_login=1&{$rand}" alt="captcha"
                             style="vertical-align: middle;cursor: pointer;"
                             onClick="this.src='captcha.php?is_login=1&'+Math.random()"/></td>
                </tr>
                <!--{/if}-->
                <tr>
                    <td colspan="2"><input type="checkbox" value="1" name="remember" id="remember"/><label
                            for="remember">{$lang.remember}</label></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td align="left">
                        <input type="hidden" name="act" value="act_login"/>
                        <input type="hidden" name="back_act" value="{$back_act}"/>
                        <input type="submit" name="submit" value="" class="us_Submit"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td class="f3">找回密码:(<a href="user.php?act=qpassword_name" class="f3">密码问题</a>&nbsp;<a
                            href="user.php?act=get_password" class="f3">邮件</a>&nbsp;<a
                            href="user.php?act=sms_get_password" class="f3">短信验证</a>)
                    </td>
                </tr>
            </table>
        </form>
function userEdit()
{
  var frm = document.forms['formEdit'];
  var email = frm.elements['email'].value;
  var msg = '';
  var reg = null;
  var passwd_answer = frm.elements['passwd_answer'] ? Utils.trim(frm.elements['passwd_answer'].value) : '';
  var sel_question =  frm.elements['sel_question'] ? Utils.trim(frm.elements['sel_question'].value) : '';

  if (email.length == 0)
  {
    msg += email_empty + '\n';
  }
  else
  {
    if ( ! (Utils.isEmail(email)))
    {
      msg += email_error + '\n';
    }
  }

  if (passwd_answer.length > 0 && sel_question == 0 || document.getElementById('passwd_quesetion') && passwd_answer.length == 0)
  {
    msg += no_select_question + '\n';
  }

  for (i = 7; i < frm.elements.length - 2; i++)    // 从第七项开始循环检查是否为必填项
  {
    needinput = document.getElementById(frm.elements[i].name + 'i') ? document.getElementById(frm.elements[i].name + 'i') : '';

    if (needinput != '' && frm.elements[i].value.length == 0)
    {
      msg += '- ' + needinput.innerHTML + msg_blank + '\n';
    }
  }

  if (msg.length > 0)
  {
    alert(msg);
    return false;
  }
  else
  {
    return true;
  }
}

数据类型转换规则

  • 自动转换为布尔值
JavaScript 遇到预期为布尔值的地方(比如if语句的条件部分),就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean函数。

因此除了以下五个值,其他都是自动转为true。

undefined
null
0
NaN
''(空字符串)
  • 自动转换为字符串
JavaScript 遇到预期为字符串的地方,就会将非字符串的值自动转为字符串。具体规则是,先将复合类型的值转为原始类型的值,再将原始类型的值转为字符串。

字符串的自动转换,主要发生在字符串的加法运算时。当一个值为字符串,另一个值为非字符串,则后者转为字符串。

'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + {a:12} // "5[object Object]"
'5' + [] // "5"
'5' + [1,2] // "51,2"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"
  • 自动转换为数值
JavaScript 遇到预期为数值的地方,就会将参数值自动转换为数值。系统内部会自动调用Number函数。

除了加法运算符(+)有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值。

'5' - '2' // 3
'5' * '2' // 10
true + 3  // 4
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

// 对象 -> NaN

// 数组 
1、空数组 -> 0
2、只有一个元素数组(数值) ->  数值
3、只有一个元素数组(数值字符串)  ->  数值
4、多个元素数组 -> NaN

// 函数 -> NaN
注意:null 转为数值时为 0,而 undefined 转为数值时为 NaN

比较运算(==) - 数据类型转换

记住特例:
null == underfined (true)
null == null (true)
underfined == underfined (true)
NaN == NaN (false)
除了上面这2种要记住,只有存在null、underfined、NaN其中一个,比较都是返回fasle
==两边值类型相同时,无需转换,不同时,自动转换(全转成数值类型)
// 当比较的数据类型相同时
Number / String / Boolean ---> true
对象 / 数组 / 函数 ---> false
null / underfined ---> true

// 当比较的数据类型不相同时(转成数值类型Number)
一边是Number / String / Boolean,另一边是null / underfined  都为false

JS数组也可以存非数值Key

  • 最开始认识的JS数组
var arr = ['234',123,{'name':'xiaoming'},ture];

// 修改
arr[0]="Opel";
  • 最后发现JS数组也可以像PHP数组一样,可以存key
var array = new Array();
    array["first"] = "my";
    array["second"] = "name";
    array["third"] = "is";
    
var arr = [];
    arr["first"] = "my";
    arr["second"] = "name";
    arr["third"] = "is";
// 打印出数组:["first":"my","second":"name","third":"is"]
// 使用如下:
array['first']
点赞
收藏
评论区
推荐文章
凯特林 凯特林
4年前
React - Fiber原理
浏览器渲染屏幕刷新率(FPS)浏览器的正常绘制频率是60次/秒,小于这个值时,用户会感觉到卡顿绘制一次的称为一帧,平均每帧16.6ms帧每个帧的开头包括样式计算、布局和绘制js的执行是单线程,js引擎和页面渲染引擎都占用主线程,GUI渲染和Javascript执行两者是互斥的如果某个js任务执行时间过长,浏览器会推迟渲染,每
徐小夕 徐小夕
4年前
《前端实战总结》如何在不刷新页面的情况下改变URL
由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上,这样我们就可以直接通过复制url来显示对应的界面数据了。背景介绍由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现,这种请求操作并不会触发浏览器url的变化,这样虽然也能正常请求数据并渲染到页面,但是如果用户在当前页面操作了某个get请求并得到了某条数据,想
陈发良 陈发良
4年前
工作问题记录总结2021--1
1问题:在ios设备,怎么判断玩家是从通过浏览器进入,还是通过主屏幕点击进来的?解决方法:(不刷新页面,但是改变页面的url地址)1用户在第一次使用浏览器进入的时候,给url地址添加标记,2当用户添加到主屏幕的时候,就多了标记3网页打开的时候,判断是否有这个标记,如果有这个标记,就是通过主屏幕进入,如果没有这个标记,就是通过浏览器进入主
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Bill78 Bill78
4年前
Python 字符串常用方法总结
明确:对字符串的操作方法都不会改变原来字符串的值1,去掉空格和特殊符号name.strip()去掉空格和换行符name.strip('xx')去掉某个字符串name.lstrip()去掉左边的空格和换行符name.rstrip()去掉右边的空格和换行符2,字符串的搜索和替换name.count('x')查找某个
Peter20 Peter20
4年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Wesley13 Wesley13
3年前
HTTP报文
一、HTTP概述(一)什么是HTTP协议?  当在web页面输入url后,浏览器会向web服务器请求资源以显示web页面,而它们之间使用的就是HTTP协议(HyperTextTransferProtocol,超文本传输协议),浏览器就是基于HTTP协议进行文档传输的。(二)HTTP协议的特点1、
Wesley13 Wesley13
3年前
URL编码以及get和post请求乱码问题
1. 什么是URL编码。URL编码是一种浏览器用来打包表单输入的格式,浏览器从表单中获取所有的name和其对应的value,将他们以name/value编码方式作为URL的一部分或者分离的发送到服务器上。2. URL编码规则。每对name/value由&分开,每对来自表单的name/value用分开。如果用户没有输入值的那个
Stella981 Stella981
3年前
JavaScript事件 ——常见事件
1.什么是事件?      当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小。常见事件:(http://www.runoo
Stella981 Stella981
3年前
Angular最新教程
Angular之所以被称为单页面应用,就是因为我们在改变浏览器URL的时候, 不触发刷新当前页面的行为,我们看到的所有的界面,其实是在一个主URL中。 这个功能(功能?现象?表现?随便吧!)就是通过路由实现的。 下面我们先简单的看一个关于路由的例子。!(https://oscimg.oschina.net/oscnet/4e0e1
Stella981 Stella981
3年前
JavaScript——页面相关事件
页面事件是在页面加载或改变浏览器的大小、位置,以及对页面中的滚动条进行操作时,所触发的事件处理程序。加载与卸载事件加载事件(onload)是在网页加载完毕后触发相应的事件处理程序,它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件(unload)是在卸载网页时触发相应的事件处理程序,卸载网页是指关闭当前页或
智极漫步
智极漫步
Lv1
阶下青苔与红树,雨中寥落月中愁。
文章
3
粉丝
0
获赞
0