JavaScript(1)

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量617 收藏
点赞数
分类专栏： javaScript 文章标签： javascript

1) 第一个js
———————**
index.js文件内容：

 /*解释执行，读到哪执行到哪*/
      alert('hello js from <script>');

      //js中没有继承，返回值类型不写可返回，参数不写可传参
      /*js方法的格式：
        function 方法名（参数列表）｛方法体｝*/
      function func(){
        alert('hello js from func()');
      }
      function func1(){
        alert('hello js from js file');
      }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>第一个js</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!--
     javaScript用来向页面添加交互行为。（IPO）

      .length
      .toLowerCase()

     JavaScript适宜：
        客户端数据计算
        表单合法性验证
        浏览器事件的触发
        网页特殊效果制作
        服务器异步数据提交（Ajax，需要服务器端的配合）

    -->
    <style></style>
    <script src="index.js">//专门保存脚本的标签
    /*js代码主要放在js文件中。
      如果引用了src="js文件名"，script标签中的内容都不认。（不能并存）
      如果非要写，那么再写一个script标签，
      在新加的标签中添加需要的内容
     */

      /*解释执行，读到哪执行到哪*/
      /*
      alert('hello js from <script>');
      */
      //js中没有继承，返回值类型不写可返回，参数不写可传参
      /*js方法的格式： function 方法名（参数列表）｛方法体｝*/
      /*
      function func(){
        alert('hello js from func()');
      }
      */
    </script>
    <script></script>
   </head>

   <body>
       <!--js的按钮type为"button"，js不区分单双引号，区分大小写-->
       <input type="button" value="first button" onclick="alert('hello js from onclick')"/>

       <!--方法的调用：onclick="方法名()"   -->
       <input type="button" value="second button" onclick="func()"/>
       <input type="button" value="third button" onclick="func1()"/>
   </body>
</html>

2) 类型计算

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>类型计算</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script></script>
   </head>

   <body style="font-size:18px;font-weight:bold">
       var s1="a"; var s2 = "b";<br/>
       var n1= 1; var n2 = 2;<br/>
       <br/>
       alert(n1+s2);<br/>

       var b1=true; var b2 = false;<br/>
       <br/>
       alert(b1+b1);<br/>
       <br/>
       alert(n2+b1);<br/>
       <br/>
       alert(s1+b1);<br/>

       <script>
       /*
js变量：
  所有变量不考虑类型，都用var声明，例如var x,y;
  没有初始化的变量自动取值为undefined


  一旦赋值，就有具体的类型
  使用“=”赋值
  如 var a=0;（声明a为整型）

   var a;(undefined，内存中没有a)
   var a=null;(这时内存有a这个对象，内容为空)


js数据类型
   1）基本类型
  Number 数字，不区分整数和浮点值类型，类似Java中的double
  String 字符串
  Boolean 布尔：仅有2个值true和false（有时候null也是false，有时候0也是false）
               也代表1和0（可跟数值运算）

  2）特殊类型
  null
  undefined

  3）复杂类型
  Array：数组（放多少个都可以，可放各种类型数据，有点像java中的object对象集合）
  Object：对象


       */
       var s1="a"; var s2 = "b";
       var n1= 1; var n2 = 2;

       alert(n1+s2);//1b,数字+字符串

       var b1=true; var b2 = false;

       alert(b1+b1);//2，布尔值转为1或0

       alert(n2+b1);//3，数字+布尔值

       alert(s1+b1);//atrue，字符串+布尔值
       alert(s1+b1+b1);//atruetrue
       alert(b1+b1+s1);//2a
       //0,-0,null,"",false,undefined或NaN，则设置该值为false
       </script>
   </body>
</html>

3) parse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>parse</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script></script>
   </head>

   <body style="font-size:18px;font-weight:bold">
     <script>
     /*

       toString转为字符串
       parseInt("6.12")返回6，
       parseInt：（1）自动去前后空格
       parseInt：（2）自动去除数字后非数字字符

       parseFloat("6.12")返回6.12

     */
       var i=6.12;
       alert(typeof(i));//number,typeof()检查对象类型
       alert(typeof(i.toString()));//string
       alert("parseInt('6.12')="+parseInt('6.12'));//6
       alert("parseInt(7.12)="+parseInt(7.12));//7
       alert("parseInt(' 8.12 ')="+parseInt(' 8.12 '));//8，自动去前后空格
       alert("parseInt('')="+parseInt(''));//NaN,not a number(不是个数字的数字，NaN是数字类型)
       alert("parseInt('blue1234')="+parseInt('blue1234'));//NaN
       alert("parseInt('12px')="+parseInt('12px'));//12，自动去除数字后非数字字符

       alert("parseInt(true)="+parseInt(true));//NaN,这是个特例，布尔隐式可转为数字，但不可强转

       //parseFloat用法同于parseInt
       alert("parseFloat('6.12')="+parseFloat('6.12'));//6.12
       alert("parseFloat(7.12)="+parseFloat(7.12));//7.12
       alert("parseFloat(' 8.12 ')="+parseFloat(' 8.12 '));//8.12
       alert("parseFloat('')="+parseFloat(''));//NaN
       alert("parseFloat('blue1234.56')="+parseFloat('blue1234.56'));//NaN
       alert("parseFloat('12.34px')="+parseFloat('12.34px'));//12.34

     </script>
   </body>
</html>

4 ) isNaN()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>isNaN()</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script></script>
   </head>

   <body style="font-size:18px;font-weight:bold">
     <script>
     /*
       用户在页面上输入的都是字符串  'xxx'
       isNaN 判断是否为数值  true:不是数  false：是数
     */
       alert("isNaN('')="+ isNaN(''));//false--
       //***不对空字符串进行验证，所以返回默认值false.要配合.length>0使用


       alert("isNaN(22.5)="+ isNaN(22.5));//false--22.5 is a number
       alert("isNaN('10')="+ isNaN('10'));//false--can be converted to number 10
       alert("isNaN(' 10 ')="+ isNaN(' 10 '));//false，可自动忽略前后空格，然后自动转为数字
       alert("isNaN('1234blue')="+ isNaN('1234blue'));//true--不能自动转为数字，比parseInt严格
       //alert("isNaN(1234blue)="+ isNaN(1234blue));编译出错
       alert("isNaN(true)="+ isNaN(true));//false-可以自动转为1
       alert("isNaN('true')="+ isNaN('true'));//true，'true'是字符串，字符串不能转为布尔
       alert("isNaN(NaN)="+ isNaN(NaN));//true
       /*NaN和任何数字计算返回都是NaN*/
       /*NaN和任何数字比较返回都是false*/

       /*NaN不能作计算不能做比较*/
       alert("isNaN(NaN == NaN)"+isNaN(NaN == NaN));//false

     </script>
   </body>
</html>

5）
index5.js

function getInt(){
    //IPO
    /*得到文本框对象,
    document：当前正在加载的网页文件
    document：可以找到一切

    getElementById('id');按id查找一个元素
    querySelector('选择器')：
       按选择器查找第一个元素（不变应万变）
    */

    //获得id为txtData的文本框对象
    //var txtObj=document.getElementById('txtData');

    //通过选择器获得
    var txtObj=document.querySelector('#txtData');
    //获得文本框对象中的内容
    var str=txtObj.value;


    //判断：是不是数字(isNaN)，长度>0


    if(str.trim().length>0)
        if(!isNaN(str))
            alert("整数部分是："+parseInt(str));
        else
            alert("请输入数字");
    else
        alert("输入内容不可为空或空格");

}
function getSquare(){

    //var txtObj=document.getElementById('txtData');
    var txtObj=document.querySelector('#txtData');
    var str=txtObj.value;
    if(str.trim().length>0)
        if(!isNaN(str))
            alert("平方是"+(parseFloat(str)*parseFloat(str)));
        else
            alert("请输入数字");

    else
        alert("空和空格不允许");
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>计算整数部分和平方</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script src="index5.js"></script>
   </head>

   <body style="font-size:18px;font-weight:bold">
     <input type="text" id="txtData"/>
     <input type="button" value="得到整数部分" onclick="getInt()"/>
     <input type="button" value="计算平方" onclick="getSquare()"/>
   </body>
</html>

6）
index6.js

function guessNumber(str){
    var i=10;
    var n=parseFloat(str);

    //js中经常使用三元运算符代替if/else
    var r=n>i?'大了':n<i?'小了':'猜对了';
    alert(r);




    /*  
    //var str = document.getElementById('txtData');
    var result = 10;

    // .trim()：IE8不支持
    //if(str.trim().length>0)

    if(str.length>0)
        if(isNaN(str)) alert("请录入数值");
        else{
            var data = parseFloat(str);
            //js中经常使用三元运算符代替if/else
            data > result ? alert("大了") : data<result ? alert("小了") : alert("恭喜您猜对了");
        }
    */

}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>JS onblur()</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script src="index6.js"></script>
   </head>

   <body style="font-size:18px;font-weight:bold">
     <!--onblur:失去焦点（往边框外点击1下，光标不闪了） 
      this.value:获取当前对象的值。this表示这个文本框
      当事件发生在要获取的控件对象上时，比较方便使用
      -->
     <input type="text" onblur="guessNumber(this.value)"/>
     <!--<input type="text" id="txtData" onblur="guessNumber(this.value)"/>-->
   </body>
</html>

7)

index7.js

function searchAndReplace(){
/*

String:
  .length是属性，不要加括号

  JavaScript从0开始
   x.charAt(index);

x.IndexOf(findstr,index)  返回首字符位置索引，没找到返回-1
x.lastIndexOf(findstr,index) 从后面起找

  findstr:查找的字符串
  index：开始查找的索引位置，可省略

  x.repalce(findstr,tostr)
   findstr:要找的字符串
   tostr：替换为的字符串
   返回替换后的字符串
*/
    //IPO
    //var txtObj = document.getElementById("txtString");//本行作用等同下一行
    var txtObj = document.querySelector("#txtString");
    var str=txtObj.value;
    /*一致关键字，找位置：indexOf('关键字',开始位置)*/
    var index=0;
    while((index=str.indexOf('js',index)) > -1){
        str=str.replace('js','**');
        console.log(index);//在console界面打印出想要的值（打桩调试）
    }
    txtObj.value=str;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>字符查询与过滤</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script src="index7.js"></script>
   </head>

   <body style="font-size:18px;font-weight:bold">

     <input style="width:300px" id="txtString" 
       value="我的第一个js页面，js是个客户端脚本语言"/><br/>

     <input type="button" value="过滤特殊字符（js）" 
       onclick="searchAndReplace();"/>

   </body>
</html>
wahxsm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
whs.js：:tornado:用于Web应用程序和游戏的超快速3D框架。 基于Three.js
02-05
社区聊天。 表中的内容 新版本 whs当前是v2主版本。 我们已经制定了v3的计划，但是开发尚未进行。 因此，v2可能仍将是主要的稳定版本，直至另行通知。 我们尝试发布次要更新版本以修复错误，我们将审查PR。 NPM # Install npm version $ npm install whs 对于[email protected] （Three.js r92），请使用@beta标记 # Install npm version $ npm install whs@beta 基本设定 下载或从链接一个 < script src =" js/three.min.js " > </ script > < s
Web3D展示框架whs.js：基于Three.js的Web3d应用程序的超快3D框架
VR观察 ——专注AR/XR//MR/VR技术研究与应用探索！
07-20 4558
whs.js介绍: whs.js是一个在Three.js基础上构建的Web3D应用框架，它实现了一个具有组件系统和插件支持的核心，可以快速开发出web3D场景。 Web3D展示框架whs.js：基于Three.js的Web应用程序的超快web3D框架 whs.js如何获取 whs是开源项目，因此你可以直接到Github上获取，也同时提供了相关文档和案例演示，今后可能不会直接给出地址，原因...
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础1
ws_ssss的博客
01-16 2616
什么是JavaScript? JavaScript是一种专为网页交互而设计的客户端脚本语言。 最初是为了实现表单验证 JavaScript能干什么？ 用户交互（表单验证） 网页特效（漂浮的广告） 用户记住账户名密码 网页游戏（围住神经猫） … JavaScript的组成 ECMAScript：是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 16万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
用JavaScript实现1--100奇数之和
qq_51066068的博客
04-02 4930
奇数：不能被2整除的数 “在整数中，不能被2整除的数叫做奇数。奇数又叫单数，它跟偶数是相对的。奇数可以分为正奇数和负奇数，数学表达形式为：2k+1（k≠0）。” var sum=0; for(var i=1;i<=100;i++){ if(i%2==1){ sum+=i; } } console.log(sum); ...
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7640
JavaScript的使用
JavaScript简介
wsdhy_的博客
04-02 4387
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
javascript 下载方法
陈小陈的博客
08-18 2848
javascript 下载方法
hyf-javaScript1
05-01
hy-javaScript1
javascript1:Javascript 模块 1
06-26
javascript1 Javascript 模块 1 #Project 与 javascript/jquery/ajax 的研究定义。
javascript1
04-22
_JavaScript语法
5.2生成并运行Javascript1
08-04
5.2生成并运行Javascript.md 5.2生成并运行Javascript.md 5.2生成并运行Javascript.md 5.2生成并运行Javasc
JavaScript1-2章笔记1
08-03
1.初识 JavaScript 2.JavaScript 编辑器 3.JavaScript 在 HTML 应用 4.各浏览器调用 JavaScript 5.实战
JavaScript：打印出100以内的质数
lvh98的博客
04-23 6249
JavaScript打印100以内的质数
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 293
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 138
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1209
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
javascript
05-28
JavaScript是一种广泛用于网页客户端编程的脚本语言，可以实现动态效果和交互功能。JavaScript的语法与C语言类似，但更加简洁灵活。JavaScript可以嵌入到HTML文档中，也可以作为单独的脚本文件进行引用。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值