A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 学习交流 › 免费资源 › 前端资源 › 正文

【成都校区】js基础结合页面

© 小刀葛小伦 黑马粉丝团   /  2019-9-5 16:47  /  924 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<h1>结合方式1</h1>
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
  <head>
    <title>01-js结合方式01.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 結合方式1 -->
    <script type="text/javascript">
        alert(" haha ");
    </script>
    
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

<h1>结合方式2</h1>
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
  <head>
    <title>01-js结合方式01.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 結合方式2 -->
    <script type="text/javascript" src='hello.js'></script>
    
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

<h1>js的基本语法</h1>
二ECMAScript 基础
2.1.ECMAScript 语法
变量区分大小写
a>可一次声明多个变量,并且变量不必具有相同的类型.例如:var test = "hi", age = 25;
b>命名规范:
第一个字符必须是字母、下划线（_）或美元符号（$）
余下的字符可以是下划线、美元符号或任何字母或数字字符
c>ECMAScript 的解释程序遇到未声明过的标识符时，用该变量名创建一个全局变量，并将其初始化为指定的值。
这是该语言的便利之处，不过如果不能紧密跟踪变量，这样做也很危险。最好的习惯是像使用其他程序设计语言一样，总是声明所有变量。
变量是弱类型的
每行的分号可有可无.没有就按折行符的末尾作为结尾.
注释与java,c,php相同
使用{}来封装代码块
变量声明不是必须的.
匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";
数组 a aValues
布尔型 b bFound
浮点型（数字） f fValue
函数 fn fnMethod
整型（数字） i iValue
对象 o oType
正则表达式 re rePattern
字符串 s sValue
变型（可以是任何类型） v vValue
<pre>
<!DOCTYPE html>
<html>
<head>
<title>03-js的语法.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- js是弱类型语言
        弱类型一个体现是变量类型可以随时变化的
     -->
[JavaScript] 纯文本查看 复制代码
      <script type="text/javascript">
            //1声明变量
            var a = 1;
                a = "haha";
                a = false;
            //2注释写法与java一样.没哟文档注释
            //3申明变量
            var b = 2,c=3
            //4js中每行语句的结束使用";"号来表示,也可以不是用
            //分号
            
            //5声明变量的时候也可不加var 加var和不加var的区别
            //加var声明作用范围在代码块中,而不加var声明作用范围在全局
            
            //6字母大小写,语法区分大小写 语法上FUNCTION区分大小写
            function fun1(){
                var d ="hello"
                e = "heihei";
            }
            
            fun1();
            //alert(d); //作用范围在方法那个代码块里
            alert(e);//e作用范围在全局
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>js的变量</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>01-js结合方式01.html</title>
[JavaScript] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 結合方式2 -->
<script type="text/javascript">
    //java中的变量分类
    //1基本数据类型
    //2引用数据类型
    //js中的变量分类
    //1原始类型
    //2对象类型
//---------------------------
    //js的原始类型 5种
    //1 number(长度相当于java的long 不区分整形和浮点型) 
    //2 string(基本数据类型) 
    //3 boolean 布尔 
    //4 null 一般人为赋值null.(java会自动赋值为null) 当我们想给这个对象将来装引用数据类型的时候
    //我们会赋值为null    也就是对象类型的占位符
    //5 undefined(未定义) null的衍生值  系统自动赋值的 当我们创建一个变量并且没有初始化的时候
    
    var a = 10;
    var b = 3.14;
    //单引号和双引号都是字符串类型
    var c ="hello";
    var d = 'word';
    var e = true;
    var f = null;
    var g = undefined;
    //以下没赋值会自动赋值为undefined
    var h;
    
    var i = new Object();
    //运算符=>typeof=>返回原始类型的类型
    
/*  alert(typeof a);
    alert(typeof b);
    alert(typeof c);
    alert(typeof d);
    alert(typeof e);
    alert(typeof f);
    //typeof null =>这里为object
    //是javascript中的一个bug 后来保留了该bug
    alert(typeof g);
    alert(typeof h); */
    alert(typeof i);
</script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>js中的语句</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>05-js的语句.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        ```
                  <script type="text/javascript">
            //java中的语句
                //循环 for while do do while
                    //判断 if else switch
            //js和java中是一样的      
                    
            function fun1(){
                var num1 = 1;
                var num2 = 2;
                if(num1<num2){
                    alert("num1");
                }else{
                    alert("num2");
                }
                
            }   
            fun1();
        
            function fun2(){
                var count = 0;
                for(i = 1;i<100;i++){
                    count+=i;
                }
                alert(count);
            }
            fun2();
        </script>
```
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>js中的运算符 一元运算符</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>05-js的语句.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        <script type="text/javascript">
            //java中的运算符
            var a = -2;
            var a =+2;
            var c ="1234";
            alert(typeof c);
            c = -c;
            alert(typeof c);
            //js是弱类型=>js是类型会根据需要自动变化
            //上面的例子中因为+是数学运算符，所以需要c是数字类型,js就会自动将c转换为number类型
            //-号仅仅能够转化可是符号位会变化不建议用
            
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>js中的运算符-BOOLEAN运算符
<pre>
<!DOCTYPE html>
<html>
<head>
<title>05-js的语句.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        <script type="text/javascript">
            //js中的运算符
            //&&||！=>与java的一模一样
            //-------------------------
            //js会在需要上面类型时，对类型自动转换
            if(""){
                alert("true");
            }else{
                alert("false");
            }
            
            if(1){
                alert("true");
            }else{
                alert("false");
            }
            //Object =>boolean true
            //undefined =>boolean false
            //null =>boolean null的结果为false
            //string =>boolean 字符串不为空串其他都是true 
            //number =>除了+0和-0 NaN其他都是true
            //NaN是number里的一个特殊值用来表示错误的数字
            //上面是错误的数字
            var n = +"abc";//这种情况下n的值就是NaN
            //NaN的全写就是not a number
            if(NaN){
                alert("1true");
            }else{
                alert("1false");
            }
            
            if("haha"&&null){
                alert("1true");
            }else{
                alert("1false");
            }
            if("haha"&&1){
                alert("1true");
            }else{
                alert("1false");
            }
            
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>06-js中的运算符-一元运算符.html</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>js中的三元运算符.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        <script type="text/javascript">
            var a = 10;
            var b = 20;
            alert(a>b?"a":"b");
            
            var c = 1;
            c+=1;
            alert(a);//2
            
            var d = 1;
            d+="1";
            alert=(d)//11
            //如果是乘除莫会把字符串转化为数字
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>07-js中的运算符-BOOLEAN运算符.html</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>05-js的语句.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        <script type="text/javascript">
            //js中的运算符
            //&&||！=>与java的一模一样
            //-------------------------
            //js会在需要上面类型时，对类型自动转换
            if(""){
                alert("true");
            }else{
                alert("false");
            }
            
            if(1){
                alert("true");
            }else{
                alert("false");
            }
            //Object =>boolean true
            //undefined =>boolean false
            //null =>boolean null的结果为false
            //string =>boolean 字符串不为空串其他都是true 
            //number =>除了+0和-0 NaN其他都是true
            //NaN是number里的一个特殊值用来表示错误的数字
            //上面是错误的数字
            var n = +"abc";//这种情况下n的值就是NaN
            //NaN的全写就是not a number
            if(NaN){
                alert("1true");
            }else{
                alert("1false");
            }
            
            if("haha"&&null){
                alert("1true");
            }else{
                alert("1false");
            }
            if("haha"&&1){
                alert("1true");
            }else{
                alert("1false");
            }
            
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>08-js中的运算符-数字运算符.html</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>05-js的语句.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        <script type="text/javascript">
            //js中的运算符
            //使用+法时,如果相加的值包含字符串,会自动转化为字符串类型
            var a = "1"+1;
            alert(a);//11
            //其他数学运算符中，字符串会自动转换为数字
            var b ="2"-1;
            alert(b);//1
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>09-js中的运算符-关系运算符.html</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>js中的关系运算符.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        <script type="text/javascript">
            //js中的关系运算符
            //alert("2">1); //true
            //alert('a'>'b') false
            //alert("aa">"ab"); false
            //alert("2">"1");字符串的比较规则=>asc码的比对true
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>10-js中的运算符-等性运算符.html</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>js中的关系运算符.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        <script type="text/javascript">
            //js中的等性运算符
            //== != ===
                
            alert(1==true);//true   这里因为true转化后为1 1==1
            alert(2==true); //false 这里是  2==1所以false
            alert(0==false);//true
            alert(0==null);//false null不能转化为数字就是nan 0!=NAN
            alert(null==undefined)//true 衍生为true
            alert(NaN==NaN);//false 存在NaN除去非和！=其他都是false 
            //----------------------------------
            //===比较时包括类型本身
            alert(1===true);//false
            alert("1"===1);//false
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>
<h1>11-js中的运算符-三元运算符.html</h1>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>js中的三元运算符.html</title>
[HTML] 纯文本查看 复制代码
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- js的语句 -->
        <script type="text/javascript">
            var a = 10;
            var b = 20;
            alert(a>b?"a":"b");
            
            var c = 1;
            c+=1;
            alert(a);//2
            
            var d = 1;
            d+="1";
            alert=(d)//11
            //如果是乘除莫会把字符串转化为数字
        </script>
</head>
<body>
This is my HTML page.

</body>
</html>
</pre>


0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马