专栏首页日常撸知识JS(javascript)入门

JS(javascript)入门

起因是在用python的Django做一个页面,需要对原先的文章进行修改,怎么在文本框中填充原先的数据?由于文本框使用了富文本编辑器,发现不只是简单的在input里使用value。最后发现可以用JS来实现,html页面如下:

< form class ='form' action="" method="post" >


{ % csrf_token %}


{{blogform.as_p}}

{ % for blog in blog %}
    
{ % autoescape off %}

< script language = 'javascript' >
document.getElementById('id_title').value = "{{blog.title}}"
document.getElementById('id_author_name').value = "{{blog.author}}"
document.getElementById('id_tag').value = "{{blog.tag}}"
document.getElementById('id_content').value = "{{blog.content}}"
< / script >

{ % endautoescape %}

{ % endfor %}



< button class ="btn-lg" type="submit" > 请提交 < / button >

< / form >

因此问题的到解决:

javascript的基础

JS程序不需要编译,程序在运行的时候才翻译成机器语言,每执行一次都要翻译一次,因此效率低,但跨平台性好。js语句就是向浏览器发出命令,告诉浏览器该做什么。

script标签可以放在页面的任何位置,一般在head和body中。当引入文件和内部js同时存在时,内部js不会执行。

不能使用<script>的单标签。

js 语句严格区分大小写。

{ } 一个花括号就是一个代码块。

1.js 解释

单行注释://

多行注释:/*、、、、*/

2.数据类型

基本数据类型:String、number、boolean、null、undefined

引用数据类型:object、function

(String :必须由成对的单引号或双引号包起来

number:带小数点、不带小数点的都可

boolean:true、false

undefined:声明的变量没有值

null:表示尚未存在的对象

可以用typeof来检测数据的类型:

typeof "john" //返回值是string

typeof 3.14 //返回值是number

3.运算符

算术运算符:+ 、- 、* 、/ 、%(取余) 、++(递增) 、--(递减)

a++:后自增,先将结果赋予当前位置,然后再自增(先运算,后自增)

++a:前自增,将自增后的结果赋予当前位置(先自增,后运算)

赋值运算符: = 、+= 、-= 、*= 、/= 、%=

关系运算符:> 、< 、>= 、<= 、== 、=== (三等)、!= 、!==

“==”两边若有字符串类型,可自动转换为数值型再进行比较

“===”不可自动转换两边类型,因类型不同,结果为false。

辑运算符:&& 、|| 、!

Math.round()四舍五入(针对整数)

4.逻辑控制与流程控制

(a) if语句:

if (bool表达式){

    语句
}

else if (bool表达式){

    语句
}
    
else {

    语句
}

(2) switch—case语句:

switch (var){

       case 值1 :语句;break;
        case 值2 :语句;break;
        case 值3 :语句;break;
        case 值4 :语句;break;
        case 值5 :语句;break;
        default:语句;break;
            }

(3) while语句:

while(逻辑表达式){

        循环体
            }

(4) do—while语句:先执行一次循环,在判断,

do
{
执行
}
while (条件);

(5) for语句:

for (var i=0 ;i < max;i++){

    循环体
    }

(6) Break 语句:

break 语句可用于跳出循环。break 语句跳出循环后,会继续执行该循环之后的代码。

for (i=0;i < 10;i++)
    {
    if (i == 3)
    {
    break;
    }
    x = x + "it is " + i + "<br>";
}

(7)continue语句:中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。

for (i=0;i <= 10;i++)
{
    if (i == 3)
        continue;
    x = x + "It is " + i + "<br>";
}

一个简单的例子:

<p>点击下面的按钮来显示今天是周几:</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo5"></p>
<script>
function myFunction(){
   var x;
   var d=new Date().getDay();
   switch (d){
      case 0:x="小花";
       break;
      case 1:x="小红";
        break;
      case 2:x="小白";
        break;
        case 3:x="小谢";
          break;
      case 4:x="小蓝";
       break;
      case 5:x="小元";
        break;
      case 6:x="全部一起";
       break;
   
   }
   document.getElementById("demo5").innerHTML=x;
}
</script>

结果:

JS在表单验证,输入验证等方面很好用。

“作为一种脚本语言,JavaScript可以说是非常成功的,它在相当多的领域中得到了广泛应用。它不但可以用于编写Web浏览器端(或者称为客户端)脚本,实现在Web页面上下文中执行的程序,而且可以在服务器端用于编写可处理浏览器提交的信息并相应地更新浏览器显示的Web服务器程序。

在最典型的客户端应用中,JavaScript脚本程序被嵌入到HTML文件中,随着HTML文件一同下载到浏览器端。浏览器读HTML文件,然后解释执行并显示其中的元素。读取HTML文件并分辨其中的元素的过程称为语法分析或解析(parsing)。如果解析到JavaScript脚本,则浏览器执行其脚本语句。”

本文分享自微信公众号 - 小末快跑(Faster_Future),作者:小末快跑

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 假设检验的例子

    在假设检验的时候,你只能根据手头已有的证据做出决策,数据来源于样本,如果样本有偏,那么就会根据有偏数据做出错误的决策。

    小末快跑
  • python scipy.stats计算单样本假设检验(1 sample test)

    单样本检验:检验单个变量的均值与目标值之间是否存在差异,如果总体均值已知,样本均值与总体均值之间差异的显著性检验属于单样本假设检验。

    小末快跑
  • 用python的Django框架的内置User来做一个用户注册、登录、密码重置的应用

    写了几个简单的页面,突然想到这些页面需要注册并登录后的用户才可以观看该怎么实现呢?于是通过查找资料,做了一个简单的注册、登录、密码重置、密码找回的应用。

    小末快跑
  • 小闫陪你入门 Java (四)

    Any person capable of angering you becomes your master. They can anger you only ...

    小闫同学啊
  • 校长讲堂第六讲

    要理解 C 语言程序,仅了解构成它的关键字是不够的。还要理解这些关键字是如何构成声明、表达式、语句和程序的。尽管我们可以很清楚的找到这些关键字的定义以及用法,但...

    一头小山猪
  • 基于laravel where的高级使用方法

    Laravel作为一个人见人爱的框架,相信很多人在使用,那就避免不了对Sql语句的应用,很多情况下,在多种字段作为条件查询使用where的时候,不需要复杂的原生...

    砸漏
  • 用Python实现科研自动化

    这个学期如期开课了,虽然是在家里。这学期我导开了一门《高等教育管理专题研究》,一口气给了11个专题。为了对这11个专题的文献分布情况有一个粗略的印象,我觉得都得...

    公众号机器学习与生成对抗网络
  • Excel图表学习61: 编写一个给多个数据系列添加趋势线的加载宏

    在《Excel图表学习60:给多个数据系列添加趋势线》中,我们手工给多个散点图系列添加了一条趋势线,如下图1所示。

    fanjy
  • 坑爹的Python陷阱(避坑指南)

    我个人对陷阱的定义是这样的:代码看起来可以工作,但不是以你“想当然“”的方式。如果一段代码直接出错,抛出了异常,我不认为这是陷阱。比如,Python程序员应该都...

    小草AI
  • 如何通过FST实现研发生态持续改进

    如何在新兴创业公司开展有效的持续改进,达到质量和效率的双赢,以下是笔者入职不到一个月时某天早晨突然冒出的想法,当然也是因为之前的一些实践基础,就此诞生此篇文章。...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券