day5-JavaScript基础语法

作者: 2ez4ddf | 来源:发表于2018-12-07 19:32 被阅读0次

一.js简介

有些地方建议手动加;来区别,js自带加;有的地方会坑~

什么是js
js是JavaScript的缩写，是web标准中的行为标准。负责网页中变化的部分
在哪儿写js代码
a.写标签的事件相关属性中，例如按钮的onclick属性
b.写在script标签中(将js代码作为script标签的内容)
注意：script标签理论上可以放在html中的任何位置，但是一般放在head或者body中
c.写在js文件中，在html中通过script标签将文件导入(src属性值就是要导入的js文件的路径)
js能做什么
a.在网页的指定位置插入标签
b.修改网页中标签的内容
c.修改标签样式
怎么写js代码
JavaScript是一门编程语言，和python一样是动态语言也是脚本语言。但是和java没有关系

补充：
window.alert(信息) - js代码，在浏览器上弹出一个对话框。对话框中显示指定的信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--c.位置3-->
        <!--<script type="text/javascript" src="js/index.js"></script>-->
        <!--b.位置2-->
        <!--<script type="text/javascript">
            //在这儿写js代码
            window.alert('水陆草木之花，可爱者甚蕃~')
        </script>-->
    </head>
    <body>
        <!--a.位置1-->
        <!--<button onclick="window.alert('hello')">点我</button>-->
        <script type="text/javascript">
            arr = ['濯清涟而不妖','中通外直','不蔓不枝','香远益清']
            for (index in arr){
                message = '<h1>'+arr[index]+'</h1>'
                //在网页中添加内容
                document.write(message)
            }
//          for (i = 0;i< 100;i++){
//              document.write('<h1>我是标题</h1>')
//          }
        </script>
        
        <!--b.修改标签内容-->
        <p id="p1">我是段落</p>
        <button onclick="document.getElementById('p1').innerHTML='亭亭净植，可远观而不可亵玩焉'">修改内容</button>
        
        <!--c.修改标签的样式-->
        <button onclick="document.getElementById('p1').style='color:red;font-size:30px'">修改样式</button>
        
        <img id="img1" src="img/2.jpg"/>
        <button onclick="document.getElementById('img1').src='img/5.png'">修改图片</button>
        
    </body>
</html>

二.基本语法

<script type="text/javascript">
    //1.控制台输出
    //console.log(输出的内容) - 和print的功能一样
    console.log(100)
    console.log('abc',998)
    
    //2.注释
    //单行注释
    /*
     * 多行注释
     * 多行注释
     */
    
    //3.标识符
    //由字母数字下划线和$组成，数字不能开头
    a = 10
    a20 = 100
    a_10 = 200
    $12s = 998
//  9gg = 100 //Uncaught SyntaxError: 
//  as^ = 200//Uncaught SyntaxError:
    
    //4.行与缩进
    //从语法角度，js代码怎么换行和缩进都无所谓。js中通过{}来确定代码块，
    
    //5.常见的数据类型:数字，布尔，字符串，数组，对象，函数
    /* a.数字(Number) - 包含所有的数字，包括整数和小数。例如：100,-3.14,12.5,3e3
     *                支持科学计数法，不支持虚数
     * b.布尔(Boolean) - 只有两个值ture和false。这两个值是关键字；分别代表'真'和'假'
     * c.字符串(String) - 使用单引号或者双引号引起来的字符集,'abc',"ddf"
     * d.数组(Array) - 相当于python中的列表,[12,'ggg',true]
     * e.对象(Object) - 相当于python中的字典和对象,{}
     * f.函数(Function) - 相当于python中的函数
     * 
     */
    console.log('予谓菊，花之隐逸者也',"牡丹，花之富贵者也",3e3)
    
    obj1 = {name:'ddf',age:10}
    console.log(obj1['name'],obj1.name)
    
    //声明函数
    function eat(food){
        console.log('吃'+food)
    }
    eat('面条')
    
    
    
</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本语法</title>
    </head>
    <body>
    </body>
</html>

三.变量

<script type="text/javascript">
    //1.变量的声明
    /*语法1：变量名 = 值
     * 变量名 - 标识符，不能是关键字；
     *          驼峰式命名(第一个单词首字母小写，后面每个单词首字母大写);见名知义
     * 
     * 语法2:var 变量名 = 值或var  变量名
     * var - 声明变量的关键字
     * 
     * 区别：声明的时候加var，变量可以不用赋值，默认是undefined；不加var就必须赋值，否则报错
     * 
     * 补充：js中两个特殊的值 - undefined(没有,空)和null(清空)
     */
    name = 'ddf'
    console.log(name)
    arr1 = [12,78,45]
    console.log(arr1[10])
    var age = 10
    var sex//通过var声明变量的时候如果不赋值，默认是undefined
    console.log(age,sex)
    
    //重新给变量赋值
    name = 'cyy'
    age = 18
    sex = '男'
    console.log(name,age,sex)
    
    //同时声明多个变量，赋一样的值
    a1= a2 = a3 =10
    console.log(a1,a2,a3)
    
    //同时声明多个变量，赋不同的值
    var b1=1,b2=2,b3=3,b4
    console.log(b1,b2,b3,b4)
    
        
</script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

四.运算符

<script type="text/javascript">
    //1.数学运算符：+、-、*、/、%、++、--
    /* 前四个运算符和python一模一样
     * 
     * ++,--都是单目运算符，使用方式：变量++/--,++/--变量
     * a.++ - 自加1运算；让变量本身的值加1
     * b.-- - 自减1运算；让变量本身的值减1
     */
    num = 10
    num++
    console.log(num) //11
    ++num
    console.log(num) //12
    num--
    console.log(num) //11
    --num
    console.log(num) //10
    
    //坑：用一个变量单独使用++/--的时候，++/--放前面和放后面效果一样；
    //   如果是使用++/--运算的结果给另个变量赋值;
    //   ++/--放前面先自加/自减再赋值；++/--放后面是先赋值再自加/自减
    num2 = 10
    num = ++num2 //相当于：num2 += 1；num = num2
    console.log(num,num2) // 11,11
    
    num2 = 10
    num = num2++ //相当于：num = num2;num2 += 1
    console.log(num,num2) // 10,11
    
    
    //2.比较运算符：<,>,==,!=,>=,<=,===,!==
    /* 结果是布尔值
     * 比较大小的和python一样
     * a. ==:判断值是否相等(相等)
     * b.===：判断值和类型是否相等(完全相等)，相当于python中的==,!==相当于python中的不等
     */
    console.log(5 == 5) //true
    console.log(5 == '5') //true
    console.log(5 != 5) //false
    console.log(5 != '5') //false
    
    
    console.log(5 === 5) //true
    console.log(5 === '5') //false
    console.log(5 !== 5) //false
    console.log(5 !== '5') //true
    
    //3.逻辑运算符：&&(逻辑与)、||(逻辑或)、!(逻辑非)
    //运算规则和使用方式和python的逻辑运算一摸一样
    console.log('==============')
    console.log(true && true) //true
    console.log(true && false)//false
    console.log(false || true) //true
    console.log(false || false)//false
    console.log(!true)//false
    
    //4.赋值运算符：=，+=，-=，*=，/=，%=
    //和python一样
    
    //5.三目运算符 - ?:
    //语法：
    //条件语句?值1:值2 - 判断条件语句的值是否为true，为true整个表达式的结果是值1，否则是值2
    age = 12
    is_man = age>=18?'成人':'未成年'
    console.log(is_man)
    
    //6.运算顺序
    //数学>比较>逻辑>赋值
    //如果有括号，先算括号里面的
    
    
</script>



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

五.分支结构

<script type="text/javascript">
    //js中的分之结构有两种：if和switch
    /*
     * 1.if语句
     * a.if
     * if(条件语句){
     *  满足条件会执行的代码
     * }
     * b.if-else
     * if(条件语句){
     *  代码段1
     * }
     * else{
     *  代码段2
     * }
     * c.if - else if - else 
     * if(条件语句){
     *  代码段1
     * }
     * else if(条件语句2){
     *  代码段2
     * }
     * else if(条件语句3){
     *  代码段3
     * }
     * else{
     *  代码段4
     * }
     * 执行过程和python一模一样
     * 
     * 
     */
    num = 10
    if(num % 2){
        console.log('奇数')
    }
    else{
        console.log('偶数')
    }
    
    age = 90
    if(age<18){
        console.log('未成年')
    }
    else if(age<60){
        console.log('成年')
    }
    else{
        console.log('老年')
    }
    
    /*
     * 2.switch语句
     * a.结构:
     * switch(表达式){
     *  case 值1:代码段1
     *  case 值2:代码段2
     *  case 值3:代码段3
     *  ...
     *  default:代码段4
     * }
     * b.执行过程:
     * 使用表达式的值依次和后面每个case后面的值进行比较，看是否相等。
     * 找到第一个和表达式的值相等的case，将这个case作为入口，依次执行后面所有的代码，
     * 直到执行完成或者遇到break为止。如果每个case的值都和表达式的值不相等，
     * 就执行default后面的代码
     * 
     * 注意：case后面必须是一个有结果的表达式
     * 
     */
    a = 1
    switch(a){
        case 5:
            console.log('表达式1')
        case 6:
            console.log('表达式2')
        case 7:
            console.log('表达式3')
        case 10:
            console.log('表达式4')
        case 11:
            console.log('表达式5')
            break
        default:
            console.log('表达式6')
    }
    
    //练习：用一个变量保存10分制的成绩，根据成绩打印情况：
    //0~5不及格 6及格 7-8良好 9-10优秀
    score = 8
    switch(score){
        case 0:
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
            console.log('不及格')
            break
        case 6:
            console.log('及格')
            break
        case 7: 
        case 8:
            console.log('良好')
            break
        default:
            console.log('优秀')
    }
    
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

六.循环结构

<script type="text/javascript">
    //js中有for循环和while循环两种
    //1.for循环
    /*
     * a.for-in
     * 结构:
     * for(变量 in 序列){
     *  循环体
     * }
     * 执行过程和python一样，但是变量取到的不是元素，而是下标/key(属性名)
     * 序列 - 字符串，数组，对象
     */
    str1 = 'abc'
    for(x in str1){
        console.log('====')
        console.log(x,str1[x])
    }
    
    arr1 = [1,'aaa',true,998]
    for(index in arr1){
        console.log(index,arr1[index])
    }
    
    person1 = {name:'小明',age:18,sex:'男'}
    for(x in person1){
        //typeof() - 获取值的类型
        console.log(x,typeof(x))
        console.log(person1[x])
    }
    
    /*
     * b.c的for循环
     * 结构:
     * for(表达式1;表达式2;表达式3){
     *  循环体
     * }
     * 执行过程：先执行表达式1；然后判断表达式2的值是否为true，如果为true就执行循环体，
     * 执行完循环体再执行表达式3；然后再判断表达式2是否为true，如果为true就执行循环体，
     * 执行完循环体再执行表达式3；...依次类推，直到表达式2的结果为false为止(循环结束)
     * 
     * 
     * 表达式1
     * while(表达式2){
     *  循环体
     * 表达式3
     * }
     * 
     * 表达式1
     * for(;表达式2;){
     *  循环体
     * 表达式3
     * }
     * 
     */
    for (num=1,sum1=0;num<=100;num++) {
        sum1 += num
    }
    console.log(sum1)
    
    //2.while循环
    /*
     * a.while循环
     * while(条件语句){
     *  循环体
     * }
     * 执行过程和python一摸一样
     * 
     * b.do-while循环
     * do{
     *  循环体
     * }while(条件语句)
     * 区别：do-while的循环体至少会执行一次
     */
    //1+2+3+...+100(do-while)
    num=1
    sum=0
    do{
        sum +=num
        num++
    }while(num<101)
    console.log(sum)
    
    
</script>



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

七.函数

<script type="text/javascript" >
    //1.函数的声明
    /*
     * function 函数名(参数列表){
     *  函数体
     * }
     * js中的函数除了声明的关键字不一样，其他的都一样
     */
    //参数可以设置默认值,也可以通过关键字参数来调用函数
    function sum(num1,num2=3){
        console.log('求两个数的和')
        return num1+num2
    }
    //2，函数的调用
    /*
     * 函数名(实参列表)
     */
    console.log(sum(10,20))
    console.log(sum(17))
    console.log(sum(num1=100,num2=200))
    
    //js中所有的函数都有返回值，默认是undefind
    function func1(){
        console.log('我是js函数')
    }
    re = func1()
    console.log(re,typeof(re))
    
    //3.匿名函数(函数的字面量)
    /*
     * 函数名 = function(参数列表){函数体}
     */
    func2 = function(a,b){
        console.log(a,b)
        return a*b
    }
    console.log(func2(10,20))
    
    funcs_arr = [func1,function(a){console.log(a)}]
    funcs_arr[0]()
    funcs_arr[1]('abc')
    
    
    //4.变量的作用域
    /*
     * a.全局变量：只要声明在函数外面的变量就是全局变量;在函数中以'变量名=值'的形式声明的变量也是全局的
     * b.局部变量：以var关键字声明在函数中的变量，才是局部变量
     * 
     * 
     */
    var1 = 1000//这是一个全局变量
    var var2 = 'abc'//这是一个全局变量
    
    for(xxx in 'hello'){
        
    }
    
    
    function abc(){
        var var4 =222 //这个是局部变量
        var3 = 111 //这是一个全局变量
        console.log(var1,var2,xxx)
    }
    abc()
    console.log(var3)
</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

八.字符串

<script type="text/javascript">
    //1.字符串字面量
    /*
     * a.使用双引号或者单引号括起来的字符集
     * b.除了普通字符以外还可以是转义字符：\n,\t,\\,\',\"
     * c.\u4位16进制值对应的Unicode编码，\u4e00
     */
    str1 = 'abc\n123'
    str2 = "abc\"123"
    str3 = "abc\u4e01"
    console.log(str1)
    console.log(str2)
    console.log(str3)
    
    //2.获取字符
    /*
     * 字符串[下标] - 获取单个字符
     * 下标 -范围是0~长度-1；下标如果越界取到的值是undefined
     * js中没有切片方法
     */
    str1 = "hello js"
    console.log(str1[1])
    
    //3.相关运算： +
    /*
     * NaN - js中一个特殊的值,类似undefined、null，用来表示一个不存在的数值
     * 字符串+数据 - 支持字符串和其他任何数据相加，是将其他数据全部转换成字符串，然后再去拼接
     * 
     */
    str2 = 'abc'+123+true+[1,'ddf',666]
    console.log(str2)
    
    //补充:js中数据类型转换:类型名()
    num_str = String(123)
    str_num = Number('a23.45')
    arr_str = String([1,true,'ddf'])
    console.log(num_str,str_num,typeof(num_str),arr_str)
    
    //4.字符串长度 - String 对象属性
    console.log('hello world'.length)
    
    str3 = 'abc'//str3是String类型
    str4 = new String('abc')//object
    console.log(str3==str4,str3===str4)
    
    console.log(str3[1],str4[1])
    
    //5.字符串相关方法 String 对象方法(见菜鸟教程:http://www.runoob.com/js/js-strings.html)

    str1 = 'ddf666f'    
    //charAt()  返回指定索引位置的字符
    console.log(str1.charAt(2))//f
    
    //charCodeAt()  返回指定索引位置字符的 Unicode 值
    console.log(str1.charCodeAt(2))//102
    
    //fromCharCode()    将 Unicode 转换为字符串
    console.log(String.fromCharCode(97))//a
    
    //concat()  连接两个或多个字符串，返回连接后的字符串
    console.log(str1.concat('cyy'))//ddf666fcyy
    
    //indexOf() 返回字符串中检索指定字符第一次出现的位置
    console.log(str1.indexOf('f'))//2
    
    //lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
    console.log(str1.lastIndexOf('f'))//6
    
    /*
     * match()  找到一个或多个正则表达式的匹配
     * match() 方法将检索字符串 String Object，以找到一个或多个与 regexp 匹配的文本。
     * 这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。
     * 如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。
     * 如果没有找到任何匹配的文本， match() 将返回 null。
     * 否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。
     */
    console.log('abcd12abc23hhh123'.match(/\d+/g))//(3) ["12", "23", "123"]
    
    //replace(searchvalue,newvalue) 替换与正则表达式匹配的子串
    console.log('abcd12abc23hhh123'.replace(/\d+/g,'*'))//abcd*abc*hhh*
    
    /*
     * search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
     * 如果没有找到任何匹配的子串，则返回 null。
     */
    console.log('abcd12abc23hhh123'.match(/\d+/g))//(3) ["12", "23", "123"]
    console.log('ddfnbbb'.match(/\d+/g))//null
    
    //slice(start,end) - 提取字符串的片断，并在新的字符串中返回被提取的部分
    //start 必须. 要抽取的片断的起始下标。    
    console.log('ddf666nb'.slice(3))//666nb
    
    //split(separator,limit) - 把字符串分割为字符串数组。
    //separator 可选。字符串或正则表达式，从该参数指定的地方分割 string Object.
    console.log('abcd12abc23hhh123d'.split(/\d+/))//(4) ["abcd", "abc", "hhh", "d"]
    
    //toLowerCase() 把字符串转换为小写。
    console.log('DDF666nb'.toLowerCase())//ddf666nb
    
    //toUpperCase() 把字符串转换为大写。
    console.log('ddf666nb'.toUpperCase())//DDF666NB
    
    //trim()    去除字符串两边的空白
    console.log('  ddf666nb  '.trim())//ddf666nb
    
    //substr()  从起始索引号提取字符串中指定数目的字符。
    console.log('ddf666nb'.substr(-1))//b
    console.log('ddf666nb'.substr(4))//66nb
    
    //substring()   提取字符串中两个指定的索引号之间的字符。    
    console.log('ddf666nb'.substring(1,7))//df666n
    
    //6.js中的数组只需要关注：a.怎么获取数组中的元素 b.数组对应的方法 c.元素可以是任何类型
    arr = [1, 'abc', true]  // arr = {0: 1, 1: 'abc', 2: true}
    console.log(arr)
    nums = [1, 34, 67, 2, 344]
    new_nums = nums.sort(function(a,b) {return b-a})
    console.log(new_nums)
    
    
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

day5-JavaScript基础语法

一.js简介

有些地方建议手动加;来区别,js自带加;有的地方会坑~

二.基本语法

三.变量

四.运算符

五.分支结构

六.循环结构

七.函数

八.字符串

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读